Problems with ScrollTriggers in ReactJS

[Guest]

Hey everyone,

I really new to gsap. Im currently working on a pretty big project in ReactJS with ScrollMagic. Im trying to use gsap for the Text portions of the Animations... and I cant figure out whats wrong. Im trying to do a simple Fade in -  Fade out animation on scroll triggers. The current state of the project is hoster on Here and below are the JS and CSS Files related to this.. if someone who knows a bit more than me can help me out.. it would be great

 

JS

import { React} from 'react'
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { useEffect } from "react";
import { Controller, Scene } from "react-scrollmagic";
import Sequence from "./Sequence";
import { gsap, ScrollTrigger } from "gsap/all";
import { useRef } from 'react';

gsap.registerPlugin(ScrollTrigger);


export default function Scrollmagic() {
    const control = useAnimation()
    const [ref, inView] = useInView()
    const boxVariant = {
        visible: { opacity: 1, scale: 1 },
        hidden: { opacity: 0, scale: 0 },
      }

    useEffect(() => {
        if (inView) {
          control.start("visible");
        } 
      }, [control, inView]);

      const root = useRef();
      const q = gsap.utils.selector(root);
      
      useEffect(() => {
       gsap.to(q(".b"), {
          x: 400,
          scrollTrigger: {
            trigger: q(".b"),
            start: "45% 60%",
            end: "+=4300",
            duration: 1.5,
            delay: 1,
            opacity: 0,
            stagger: 0.02,
            y: 30,
            ease:"power1.out",
            markers: true,
            id: "scrub"
        
           /* gsap.to(q(".b"), {
              x: 400,
              rotation: 360,
              scrollTrigger: {
                trigger: q(".b"),
                start: "top center",
                end: "top 100px",
                scrub: true,
                markers: true,
                id: "scrub"*/
          }
        })});
    
      
return (
    <div className="wrapper">
      <div id="root"></div>
      <Controller>
        <Scene duration="200%" triggerHook="0"  pin>
          {progress => (
            <div ref={root} style={{ width: "100%", height: "100vh", position: "relative" }}>
                <div class="box b">Test Text </div>
            <Sequence ref={ref} progress={progress} />
            </div>
          )}
          
        </Scene>
      </Controller>

        </div>
        )

}

CSS

.stickyblock{
  position:absolute;  
  bottom:50%;
  left:12.5%;
  right:12.5%;
  margin-top: 50%;
  
  color:#fff;
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 50px;
  z-index: 30000;
}

.box {
  height: 100px;
  position: absolute;
  left: 100px;
  font-size: 50px;
  color:#fff;
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 50px;
  z-index: 30000;
}

.b {
  top: 400px;
}

 

[Guest]

I figured it out

[Rodrigo]

Hi @D3FX and welcome to the GreenSock forums!

 

Glad to hear that you were able to find and solve your issue! 🥳

 

Also is a good idea to use GSAP Context when working with React:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also take a look at this guide:

 

Let us know if you have more questions.

 

Happy Tweening!