GSAP scrollTrigger firing on page load, not “start” trigger (React.js)

[AlexMKC]

I'm trying to make the second block of text on my screen animate when I scroll down on it. The second block of text has ref={animeRef}

I added the GSAP code as follows below. However, the animation runs as soon as the page is loaded, not when I scroll down to the scroll trigger (I added scrolltrigger markers for my reference).

 

  gsap.registerPlugin(ScrollTrigger);
  const classes = useStyles();
  const animeRef = useRef()

  useEffect(() => {
    gsap.from(
      animeRef.current,
      {
        opacity:0,
        x: -30,
        duration: 3,

        scrollTrigger: {
          trigger: animeRef.current,
          markers: true
        }
      }
    );
  }, []);

It's strange, it seems that my code is working in this sandbox (I need to refresh sometimes to make sure the "start" trigger is aligned properly), but for some reason it doesn't work on my end. I'm wondering if I'm not installing ScrollTrigger properly?

Sandbox: https://codesandbox.io/s/boring-visvesvaraya-ubb4z?file=/src/App.js (make sure you "Open in New Window" to see it on desktop view)

 

My full code is here for reference:

import React, { useState, useEffect, useRef } from 'react';
import './../App.css';
import {Grid, Typography, Paper, useMediaQuery, useTheme, Container, CardMedia} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";

const useStyles = makeStyles((theme) => ({
  holderText: {
    left: '200px',
    textAlign: 'left',
    paddingTop: '50px'
},
  holderImg: {
    flexGrow: '1',
    marginLeft: '20px'
},
  containerStyle:{
    marginTop: '30px'
},
  containerStyleSecond:{
    marginTop: '200px',
    marginBottom: '200px'
}
}))


function Homepage() {

  gsap.registerPlugin(ScrollTrigger);
  const classes = useStyles();
  const animeRef = useRef()

  useEffect(() => {
    gsap.from(
      animeRef.current,
      {
        opacity:0,
        x: -30,
        duration: 3,

        scrollTrigger: {
          trigger: animeRef.current,
          markers: true
        }
      }
    );
  }, []);


    return (
      <div>
        <section>
          <Container maxWidth={false} className={classes.containerStyle}>
            <Grid item xs={12} container > 
              <Grid item xs={1} />
              <Grid item xs={3} >
                  <div className={"classes.holderText"}>
                    <Typography >
                        <h1>
                        Lorem ipsum dolor sit amet.
                        </h1>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <p>
                        Shop Now
                        </p>
                    </Typography>
                  </div>
              </Grid>
             <Grid item xs={4} >
                  <div className={classes.holderImg} >
                    <div className="first">
                      <div className="firstP">
                    <Paper>
                        <CardMedia
                          component="img"
                          image={require(`../images/LA_night_car.jpg`)}
                        />
                    </Paper>
                    </div>
                    </div>
                  </div>
             </Grid>
              <Grid item xs={2}>
                <Paper className={classes.holderImg}>
                    <CardMedia
                      component="img"
                      image={require(`../images/skater.jpg`)}
                    />
                </Paper>
              </Grid>
              <Grid item xs={4} />
           </Grid>
          </Container>
        </section>
        <section>
          <Container maxWidth={false} className={classes.containerStyleSecond}>
            <Grid item xs={12} container > 
                <Grid item xs={1} />
                <Grid item xs={4}>
                    <div className={classes.holderText}>
                      <Typography ref={animeRef}>
                          <h1 >
                          Lorem ipsum dolor.
                          </h1>
                          <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </p>
                      </Typography>
                    </div>
                </Grid>
              <Grid item xs={4} >
                    <div className={classes.holderImg}>
                      <Paper>
                          <CardMedia
                            component="img"
                            image={require(`../images/diner_portrait.jpg`)}
                          />
                      </Paper>
                    </div>
              </Grid>
                <Grid item xs={3} />
            </Grid>
           </Container>

        </section>
      </div>
    );
}

export default Homepage;

 

See the Pen App.js by s (@s) on CodePen

[akapowl]

 

Welcome to the forums @AlexMKC

 

I think the reason it fires on page load is because you did simply not set a specific start to it, so it uses the default for not-pinning ScrollTriggers, which is 'top bottom' (when the top of the element hits the bottom of the viewport - for pinning ScrollTriggers it is 'top top' btw).

 

Since your element is past that point on page load already, the animation triggers.

 

If you want it to trigger at a different point, just define a start value for it - I set it to 'top center' so it triggers when the element's top hits the center of the page. Hope that's helpful.

 

https://codesandbox.io/s/lively-silence-mfge8?file=/src/App.js

[AlexMKC]

Very helpful, thanks for this explanation!