Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
modulareverything

[React] ScrollTrigger component triggering everything at the same time

Go to solution Solved by elegantseagulls,

Recommended Posts

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;

 

Link to comment
Share on other sites

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,
  }
);

 

  • Like 2
Link to comment
Share on other sites

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()

Link to comment
Share on other sites

  • Solution

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)

  • Like 4
Link to comment
Share on other sites

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;

 

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.
×