elegantseagulls

Hi @Saad Anjum, I think that you're over complicating this: You should just need to use stepped ease and no need for a for loop: https://greensock.com/docs/v3/Eases/SteppedEase

When you use a function with () in your onComplete (foo('test'))it will fire right away. You'll want to use onCompleteParams to add your parameters. gsap.to('div', { x: 120, duration: 4, rotation: 270, onComplete: foo, onCompleteParams: ['test'], stagger: .2 }) function foo(val) { console.log(val); }

You can have an onComplete for both staggers, and for the whole tween. https://codepen.io/ryan_labar/pen/KKzbJPm

Hi @fitzmode, I can't seem to get your example to work/quite figure out what you're asking. Also, it'd be good practice (and easier for us to read/debug) to make sure you're using the GSAP3 gsap.timeline() syntax instead of the old TimelineMax

Hi @FarhanSU, The useEffects you have don't have any way to know which element they are referencing, so there may be issues with them acting up. I think for your use case, using useCallback May be better: const TL = useRef(); const myRef = useCallback((node) => { if (!node) return; // check if ref (node) is rendered const childEl = node.querySelector('.child-el'); TL.current = gsap.timeline() .to(node, { autoAlpha: 1 }) .to(childEl, { x: 55 }) },[]) useEffect(() => () => { // all garbage cleanup all goes in a single useEffect for when component leaves if (TL.current) { TL.current.kill(); } }); return() { <div ref={myRef} /> } Also for Transitions, you may consider React's own React Transition Group (https://reactcommunity.org/react-transition-group/). This is what we use for most of our page/component transitions with GSAP or CSS transitions. There may be a few tricks you may need to do with CSS/state for managing page scroll location, very much depending on your setup, but that's a more in-depth deep-dive.

Hi @FarhanSU, Looking at your sandbox again, and you've got a lot going on. What I believe is happening is that your page transitions are interfering with ScrollTrigger. ScrollTrigger is being initialized when both the incoming and outgoing pages are live, so it cannot get the proper height of the page. One fix would be to call ScrollTrigger.update() at the end of your page transition. Or make sure that the outgoing page isn't affecting the height or the page with ScrollTriggers on it (via position: absolute, and set a transformY to it avoid a jump). And (imo) you're still using way to many refs/useEffects. You may consider breaking these into separate components, or use a single dom element ref, and query selectors based on that. Also, you're loading a few animation libraries (React Spring, Framer Motion (this looks maybe unused?), and GSAP). Why not use GSAP for everything? It seems like a lot of extra bloat to use Spring for page transitions and GSAP for on-page animations in this scenario.

Hi @Tarik khatry, There's a few things with your demo that are throwing ScrollTrigger off. First, when using it in the timeline you want to camelCase scrollTrigger. Also, the way your code (html and css) is setup, it won't want to scrub your animation using bottom bottom, try end: "+=100%" and finally, your trigger is looking for the class .first-section, not the id.

Hi @FarhanSU, Looking at this I'm seeing a few things. I, like Rodrigo, don't see a need for using 4 useEffects. I'd use one with a return statement to kill the ScrollTriggers and all Timelines. Another thing I saw is that you aren't setting an ID for your ScrollTriggers, so I'm not sure if those inherit the Tween's var as the id or not. I've found it best to kill the scroll trigger then the tween. const tl = useRef(); cont elRef = useRef(null) useEffect(() => { tl.current = gsap.timeline({ scrollTrigger: { id: 'st-id' ... } }) .to(elRef.current, {...}) return () => { if (ScrollTrigger.getById('st-id')) { ScrollTrigger.getById('st-id').kill(); } tl.current.kill(); }; }, []);

Hi @Bimal, It looks to me like you're not doing any garbage cleanup on componentWillUnmount() { } . I'm guessing that's what's causing the issues. If you navigate away from the page, then go back to it another scrollTrigger gets added on top of the original one (same with gsap animations), and I think it's conflicting with itself. Basically you'll want to set an id to your scrollTriggers and use the .kill() method on them (and your tweens/timelines) when the component is unmounted.

I should have done a console.log(document.querySelectorAll(`[cx="9"]`).length);, but my pre-coffee brain counted each row. 😂

Hi @jnhltmn, Also, your grid is 45x80, not 44x79. 😀

Hi @jnhltmn, I didn't have a chance to deep dive yet, but setting your stagger object to grid: 'auto', fixes it for me

Has anyone filed a bug report for this with the Chrome team?

Hi @OneManLaptop, I think that this may be an edge case. (I'm pretty sure) ScrollTrigger's markers are not built to understand unit conversions with the config, but, it appears, they are still getting those units appended to them in your example. ScrollTrigger's Markers are only intended to be a helper tool, and not for production, so adding extra conditionals for them is likely not worth the extra code bloat.

Hi @ShesADev, I've worked a fair bit in Vue, but (strangely) haven't done much animating in it. This may be of help though: https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle Also worth looking at is Sarah Drasner's Intro to Animations in Vue Article: https://css-tricks.com/intro-to-vue-5-animations/