[React] ScrollTrigger component triggering everything at the same time

[modulareverything]

Hi everyone,

 

I'm trying to create a React component that wraps around other components (ie. `children`) and animates them in as they appear in the viewport using ScrollMagic ScrollTrigger.

 

It's working, but the problem I'm having is all of the components are animating in at the same time and I was wondering if someone could explain where I'm going wrong?

 

Here's my component:

import React, { useLayoutEffect, useRef } from "react";
import PropTypes from "prop-types";
import gsap from "gsap";

// ---

const AnimateIn = ({ children, className }) => {
  const ref = useRef(null);

  useLayoutEffect(() => {
    gsap.fromTo(
      ref.current,
      {
        scrollTrigger: ref.current,
        opacity: 0,
        y: 32,
      },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        stagger: 0.2,
      }
    );
  });

  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
};

AnimateIn.propTypes = {
  ref: PropTypes.node.isRequired,
  className: PropTypes.string,
};

AnimateIn.defaultProps = {
  className: null,
};

export default AnimateIn;

And then I'm using it on other components like this:

import React from "react";
import AnimateIn from "./AnimateIn";

// ---

const Link = () => (
  <AnimateIn>
    This would animate in!
  </AnimateIn>
);

export default Link;

 

[elegantseagulls]

At first glance: you'll want to put your scrollTrigger property in the second (to) object of the fromTo:

gsap.fromTo(
  ref.current,
  {
    opacity: 0,
    y: 32,
  },
  {
    scrollTrigger: ref.current,
    opacity: 1,
    y: 0,
    duration: 1,
    stagger: 0.2,
  }
);

 

[modulareverything]

55 minutes ago, elegantseagulls said:

At first glance: you'll want to put your scrollTrigger property in the second (to) object of the fromTo:

gsap.fromTo(
  ref.current,
  {
    opacity: 0,
    y: 32,
  },
  {
    scrollTrigger: ref.current,
    opacity: 1,
    y: 0,
    duration: 1,
    stagger: 0.2,
  }
);

 

I tried this but to no avail

 

I noticed in the console just now that it's giving me this error:

 

Missing plugin? gsap.registerPlugin()

[elegantseagulls]

Yes, you'll need to register your plugin gsap.registerPlugin(ScrollTrigger), and will also need to import the ScrollTrigger files.

 

Good info here: https://greensock.com/docs/v3/Installation
Scroll down to the GSAP 3 Install Helper and look at the Modules section (if you're using next you'll need to import from 'dist', instead).

(you also called it ScrollMagic in your original question, which is a "competitor" product to ScrollTrigger)

[modulareverything]

Thanks @elegantseagulls — the solution was to register the plugin and move scrollTrigger (not ScrollMagic as you rightly pointed out) to the second object in the fromTo. Updated/working component below for anyone referencing this in the future:

 

import React, { useLayoutEffect, useRef } from "react";
import PropTypes from "prop-types";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger.js";

// ---

const AnimateIn = ({ children, className }) => {
  const ref = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useLayoutEffect(() => {
    gsap.fromTo(
      ref.current,
      {
        opacity: 0,
        y: 32,
      },
      {
        scrollTrigger: ref.current,
        opacity: 1,
        y: 0,
        duration: 1,
        stagger: 0.2,
      }
    );
  });

  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
};

AnimateIn.propTypes = {
  ref: PropTypes.node.isRequired,
  className: PropTypes.string,
};

AnimateIn.defaultProps = {
  className: null,
};

export default AnimateIn;