Jump to content


Problems with ScrollTriggers in ReactJS

Go to solution Solved by Guest,

Recommended Posts

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 :D



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';


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, 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,
            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>
        <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} />




  margin-top: 50%;
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 50px;
  z-index: 30000;

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

.b {
  top: 400px;


Link to comment
Share on other sites

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:



Also take a look at this guide:


Let us know if you have more questions.


Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.