How to write html css and plain JS code in ReactJs

Question

I have to build an animation in ReactJs. For that, I had write HTML, CSS, and JavaScript code in codepan to make that animation. But Now I am wondering how to implement this code in ReactJs. Now I am wondering how to implement this code in ReactJs.`

This is the codepan link: https://codepen.io/GreenSock/pen/ExvZjZQ

 var slideDelay = 1.5; var slideDuration = 1; var slides = document.querySelectorAll(".slide"); var numSlides = slides.length; gsap.set(slides, { xPercent: i => i * 100 }); var wrap = gsap.utils.wrap(-100, (numSlides - 1) * 100); var wrapProgress = gsap.utils.wrap(0, 1); var timer = gsap.delayedCall(slideDelay, autoPlay).pause(); var proxy = document.createElement("div"); var slideWidth = 0; var wrapWidth = 0; var animation = gsap.timeline({repeat:-1}); resize(); var draggable = new Draggable(proxy, { trigger: ".slides-container", type: "x", inertia: true, onPressInit: function() { animation.pause(); timer.pause(); updateProgress(); }, snap: { x: value => gsap.utils.snap(slideWidth, value) }, onDrag: updateProgress, onThrowUpdate: updateProgress, onThrowComplete: function() { timer.restart(true); } }); window.addEventListener("resize", resize); function animateSlides(direction) { var progress = animation.progress() + direction / numSlides; timer.pause(); animation.pause(); gsap.to(animation, { duration: slideDuration, progress: gsap.utils.snap(1 / numSlides, progress), overwrite: true, modifiers:{ progress: wrapProgress // value => (value < 0 || value === 1 ? 1 : 0) + (value % 1) }, onComplete:() => timer.restart(true) }); } function autoPlay() { animation.play(); gsap.fromTo(animation, {timeScale: 0}, {timeScale: 1, duration: 0.3, overwrite: true, ease: "power1.in"}) } function updateProgress() { animation.progress(wrapProgress(gsap.getProperty(proxy, "x") / wrapWidth)); } function resize() { var progress = animation.progress(); slideWidth = slides[0].offsetWidth; wrapWidth = slideWidth * numSlides; animation.progress(0).clear().to(slides, { duration: 100, xPercent: "+=" + (numSlides * 100), ease: "none", modifiers: { xPercent: wrap } }) .to(proxy, {x: wrapWidth, duration: 100, ease: "none"}, 0) .progress(progress); } Hamster(document.querySelector('.slides-container')).wheel(function(event, delta, deltaX, deltaY) { event.preventDefault(); animateSlides(delta/30); });

 * { box-sizing: border-box; } main { display: flex; position: relative; flex-direction: column; width: 100vw; height: 100vh; } .a { background:black; } .b { background: gray; } .slides-container { position: relative; overflow: hidden; display: flex; flex: 1; } .slide { position: absolute; font-size: 90px; font-weight: 700; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; height: 100%; width: calc(100% / 3); width: 100vw; } .slides-inner { position: relative; height: 100%; width: 100%; overflow: hidden; }

 <main> <div class="slides-container"> <div class="slides-inner"> <div class="slide a">1</div> <div class="slide b">2</div> <div class="slide a">3</div> <div class="slide b">4</div> <div class="slide a">5</div> <div class="slide b">6</div> <div class="slide a">7</div> <div class="slide b">8</div> <div class="slide a">9</div> <div class="slide b">10</div> </div> </div> </main>

`

Answer 1

The CSS and HTML should be no problem on implementing it on ReactJS...

just paste the html on the reactjs file and dont forget to add the class/const/function components. also change the class to className

In terms of CSS, you may either create your own or utilize the built-in styles. and then copy and paste the CSS code from codepen.

Finally, for plain js, you have two options: build a js file and paste it in there, or convert the plainjs yourself and add a script to public/index.html (i cant help on converting to reactjs). Installing the extensions "react-helmet" or "react-safe" is another alternative.

https://www.npmjs.com/package/react-helmet https://www.npmjs.com/package/react-safe

You can research more here: Adding script tag to React/JSX

Please accept my apologies if I was of no assistance.