Jump to content
GreenSock

ELG0BLIN0

Members
  • Posts

    9
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ELG0BLIN0's Achievements

  1. I have tried this same mimmal demo and the same issue still occurs. As codepen and code sandbox both run development mode React .Therefore I can't be sure it works unless I'm given a demo running the production version of react and not development mode. Heres the exact code I tried: import * as React from 'react'; import { useEffect, useRef } from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function About() { const h1 = useRef(null); useEffect(() => { gsap.from(h1.current, { duration: 1, yPercent: 10, opacity: 0, ease: "sine", delay: 0.5, scrollTrigger: { trigger: h1.current, toggleActions: "restart none none reverse" } }); }, []); return ( <div className="space-y-12"> <div className="scroll-down">&darr; scroll down &darr;</div> <div className="h-[1500px] w-[100px] bg-red-700"></div> <h1 ref={h1}>It seems to work just fine.</h1> <p>Are we missing something?</p> </div> ); }
  2. Yes, afraid it made no difference
  3. Not sure what you mean about scroll triggers ive set the trigger to an element and its an useEffect() I have debugged using both markers:true and console.log() and found that it is triggered when the components are rendered not when the scroll trigger is reached. Strict mode is also disabled.
  4. I have an scrollTrigger animation created in React. In developer mode the animation works fine. But ive noticed that when switching to production mode the animation is played as the components are loaded. Giving the impression that the animation was never triggered. I initially thought that it wasnt triggering at all in production. I have tried various method to prevent it from triggering such as a bool to check whether the components mounted. I have also debugged this as not being an issue related to strict mode as I understand this is common. Due to this being in the production build strict mode isnt used at all as its purely for the development mode of React. I have several from animations without scrollTrigger that all work as intended regardless of development or production mode. Perhaps someone could give me a workaround or solution to this. Heres the relevant code: import { useEffect } from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); //Animation useEffect(() => { gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: { trigger: "#aboutSection", }}); }, []);
  5. No sorry its not strict mode. Not only have I disabled it but it only runs in development mode. As its a tool to literally double check errors. I am attempting to trigger the animations in production mode, strict mode doesn't run in this mode.
  6. I have an scrollTrigger animation created in React. In developer mode the animation works fine. But ive noticed that when switching to production mode the animation is played as the components are loaded. Giving the impression that the animation was never triggered. I initially thought that it wasnt triggering at all in production. I have tried various method to prevent it from triggering such as a bool to check whether the components mounted. I have several from animations without scrollTrigger that all work as intended regardless of development or production mode. Perhaps someone could give me a workaround or solution to this. Heres the relevant code: import { useEffect } from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); //Animation useEffect(() => { gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: { trigger: "#aboutSection", }}); }, []);
  7. Im afraid I have managed to get a solution from this. It seems all the scroll related animations trigger the instant the page loads the more I look. I updated the component to include this: const didAnimate = useRef(false); //Animation useEffect(() => { // if we already ran this once, skip! if (didAnimate.current) { return; } // otherwise, record that we're running it now and continue... didAnimate.current = true; gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: { trigger: "#aboutSection", }}); });
  8. I have a simple scrollTrigger animation in React. It works as expect in development mode but when I switch it too build the scrollTrigger animations start before youve scroll to the trigger. I have seen similar questions about this with the cause being something to do with chromes resizing and the advice was to use ScrollTrigger.refresh() im not sure where to use that as all the examples have been HTMl and not React. I would like to be shown a solution that allows the scrollTrigger animations to work in production mode as well as development mode. I have included all relevant plugins as shown: import * as React from 'react'; import { useEffect } from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Heres the current code for the animation //Animation useEffect(() => { ScrollTrigger.refresh(); gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: { trigger: "#aboutSection", }}); });
×