AlexMKC

The issue was caused by the by the commas after all those closing parentheses, updated to semi-colons

I added GSAP to my React App. I'm calling GSAP using a useEffect hook. I'm currently receiving an error of "Expected an assignment or function call and instead saw an expression". This is apparently due to a lack of a 'return' statement. Does a return statement need to be added for this GSAP code to run? Or is this due to another issue? import { gsap, ScrollTrigger } from "gsap/all"; gsap.registerPlugin(ScrollTrigger); useEffect(() => { gsap.from(textRef.current, { opacity: 0, duration: 3.3, }), gsap.from(animeRef1.current, { duration: 1.9, y: -20, opacity: 0, }), gsap.from(textRef2.current, { opacity: 0, duration: 3, scrollTrigger: { trigger: textRef2.current, start: "top center", }, }), gsap.from(animeRef3.current, { duration: 1.9, opacity: 0, y: -20, scrollTrigger: { trigger: animeRef3.current, start: "top center", }, }); }, []);

What solved my problem is importing gsap as... import { gsap, ScrollTrigger } from "gsap/all"; and removing the following gsap scripts from my index.html file <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

My project works perfectly in the build, but when deploying it to a live website, gsap is having errors: Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin() I'm using the gsap 3.11 My code looks like this, is there any obvious issue here? Again, it works perfectly in the build... import React, { useState, useEffect, useRef } from "react"; import "./Home.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import { Link, useLocation } from "react-router-dom"; import { useMediaQuery, useTheme } from "@material-ui/core"; useEffect(() => { gsap.to("body", { backgroundColor: "black", scrollTrigger: { toggleActions: "play pause resume reverse", trigger: backColor.current, start: "top center", markers: true, }, }); gsap.to(".fontStyle", { color: "#f9cdcd", scrollTrigger: { toggleActions: "play pause resume reverse", trigger: backColor.current, start: "top center", }, }); if (location.state?.scrolled) { scrollFun("projects"); } }, []);

In the below link, the GSAP effect is working on page load. However, when I refresh the page, it no longer works. Why is this? I tried using a useEffect hook but that didn't work. https://codesandbox.io/s/wonderful-elbakyan-enusid?file=/src/App.js

I'm learning GSAP and my long term goal is to build websites like this: https://www.haritos.co/ Two questions: Does this site use GSAP? How do you achieve pixelated/color effect when the image moves? (if you hover over the underlined text, an image appears). Thank you

Thank you! Adding "height" totally solved my issue. I also tested using "addEventListener" which worked. I didn't get "uselayouteffect" to work, so I may need to research that more.

I tried adding "immediateRender: false" but the issue persists. Below is a video of what I'm seeing. Notice on the far right that the "start" marker seems to momentarily flash ahead of the "scroller-start" which I believe is causing the animation to start immediately on page load, rather than on scrollTrigger. Does this help provide more context? Do you know what's going on here?

When my page loads, the animation for "textRef2" and "animeRef3" (text and picture at the bottom of the page) start immediately, instead of on the specified start point. On my PC browser, I'm noticing that when I refresh the page, I see the "start" marker appear above "scroller-start" marker for 1 second before going to it's proper place below it. I believe this glitch is causing my animation to start immediately on page load, rather than on the scroll start. I have no idea why this is happening. Here is a sandbox of my project. Please click on "open in new window" to fully see the issue. On this sandbox, however, the "start" button doesn't flicker, but appears above the "scroller-start" marker by default. https://codesandbox.io/s/silly-payne-w69cg?file=/src/App.js Why doesn't the "start" marker simply load where it's supposed to be consistently every time? Code snippet useEffect(() => { gsap.from( textRef.current, { opacity:0, x: -80, duration: 3 }, ), gsap.from( animeRef1.current, { duration: 1.2, opacity: 0, y: -30 } ), gsap.from( animeRef2.current, { duration: 1.5, opacity: 0, y: -20 } ), gsap.from( textRef2.current, { opacity:0, x: -80, duration: 3, scrollTrigger: { trigger: textRef2.current, start: "top center" } }), gsap.from( animeRef3.current, { duration: 1.5, opacity: 0, y: -20, scrollTrigger: { trigger: animeRef3.current, start: "top center", markers: true } } ); }, []); Full code for context import React, { useState, useEffect, useRef } from 'react'; import './../App.css'; import {Grid, Typography, Paper, useMediaQuery, useTheme, Container, CardMedia, Button} from '@material-ui/core'; import {makeStyles} from '@material-ui/core/styles'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const useStyles = makeStyles((theme) => ({ holderText: { left: '200px', textAlign: 'left', paddingTop: '50px' }, holderImg: { flexGrow: '1', marginLeft: '20px' }, containerStyle:{ marginTop: '30px' }, containerStyleSecond:{ marginTop: '100px', marginBottom: '100px' }, buttonFont: { fontSize: 12 } })) function Homepage() { const classes = useStyles(); const textRef = useRef() const textRef2 = useRef() const animeRef1 = useRef() const animeRef2 = useRef() const animeRef3 = useRef() useEffect(() => { gsap.from( textRef.current, { opacity:0, x: -80, duration: 3 }, ), gsap.from( animeRef1.current, { duration: 1.2, opacity: 0, y: -30 } ), gsap.from( animeRef2.current, { duration: 1.5, opacity: 0, y: -20 } ), gsap.from( textRef2.current, { opacity:0, x: -80, duration: 3, scrollTrigger: { trigger: textRef2.current, start: "top center" } }), gsap.from( animeRef3.current, { duration: 1.5, opacity: 0, y: -20, scrollTrigger: { trigger: animeRef3.current, start: "top center", 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 ref={textRef}> <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> <Button to={'/shop'} className={classes.buttonFont}> Enter </Button> </Typography> </div> </Grid> <Grid item xs={4} > <div className={classes.holderImg} > <div className="first"> <div className="firstP"> <Paper ref={animeRef1}> <CardMedia component="img" image={require(`../images/LA_night_car.jpg`)} /> </Paper> </div> </div> </div> </Grid> <Grid item xs={2}> <Paper className={classes.holderImg} ref={animeRef2}> <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={textRef2}> <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 ref={animeRef3}> <CardMedia component="img" image={require(`../images/diner_portrait.jpg`)} /> </Paper> </div> </Grid> <Grid item xs={3} /> </Grid> </Container> </section> </div> ); } export default Homepage;

Very helpful, thanks for this explanation!

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;