Daniel Hult

Yeah, I guess the issue is useEffect runs before the DOM is ready, whereas useLayoutEffect runs after. The reason useLayoutEffect works then is because I'm passing the timeline as a prop to the <Loader/> component, populating the timeline and having a duration before the useLayoutEffect runs. The reason I don't populate the timeline in the same component is because I want to have a master timeline in a parent component where I can use the timeline callbacks for other stuff that's supposed to happen (e.g hide a component, fetch new data etc...). I'm just trying to figure out the best way to work with gsap in React, as it's quite different from just a barebone frontend setup, and maybe someone can find some help from this post as well ?? I appreciate all your effort in these forums ??

(also tried with the tl.kill() in the return function of the gsap context — no difference)

Just coming back to this (again) with a question: The issue is the same if I use useEffect instead of useLayoutEffect. Is there a way to solve this using useEffect as well? With useEffect it's 50/50 chance it's working as expected. Using gsap version 3.12.2 and NextJS. Here is all the code essentially for the component. The issue is that the <Hero/> component renders straight away because the onComplete is fired — setting the state to true. const Home = () => { const [loaderFinished, setLoaderFinished] = useState(false); const [timeline, setTimeline] = useState(); useEffect(() => { const context = gsap.context(() => { const tl = gsap.timeline({ onComplete: () => setLoaderFinished(true), }); setTimeline(tl); }); return () => context.revert(); }, []); return ( <main>{loaderFinished ? <Hero /> : <Loader timeline={timeline} />}</main> ); };

Yeah, I suspected something like that, but was unsure what the best approach would be. Your forked demo works as expected! Thank you for looking into it ? When can I expect that to be released? This whole thread has been a pleasant "you're not an idiot" for me ?

I've tried a couple of things as well, but haven't found an elegant solution yet. It's very annoying to work around annoying React problems when you're just trying to do some cool animations ?

Yes, the animation plays fine, but the onComplete callback runs on first render and then again once the child tweens are done unfortunately.

Hey @Rodrigo I'm coming back to this thread because I keep encountering this issue with nested timelines. Just a simple question: How would you play the timeline after all the child instanses are created without the interaction like clicking the button?

This was a silly mistake on my end ?‍♂️?‍♂️?‍♂️ I got the tweened element mixed up with the scrolltrigger's trigger and my brain is fried at the moment. Thank you for the help!

Hey, I'm having an issue with pinning a progress bar for a section that uses ScrollSmoother effects. You can see the issue with uncommenting the pin line. What is happening here?

Hi! I had a read through your post on advanced gsap + react animations and had a question about one of the examples on component communication. In one of your examples you're passing down timeline as a prop and then adding tweens to the timeline in the child component — which works fine! My question is how to properly use/access the callbacks like onComplete e.g in the parent component (or in the child)? For example this onComplete will run on first render (the child component's tweens won't run first): const Intro = () => { const [timeline, setTimeline] = useState(null); useEffect(() => { const gsapContext = gsap.context(() => { const tl = gsap.timeline({ delay: 2, defaults: { duration: 2, ease: 'power3.out' }, onComplete: () => console.log('I run immediately') }); setTimeline(tl); }); return () => gsapContext.revert(); }, []); //Later down I'm passing down the timeline to the child component and adding stuff to it <IntroText timeline={timeline}/> I couldn't find a good solution to this in the forum (at least where I've looked!). Do you have any recommendations for this?

Ah, perfect! That solved my problem as well! Thank you ?

Hi guys, Im trying to achieve the layered pin effect with scrolltrigger, similar to the demos here: https://codepen.io/GreenSock/pen/KKpLdWW Im just trying to add one section in between that is pinned WITH pinSpacing enabled. After the animation is done on that pinned section, I want the next section to overlap that section just like these demos. Does that make sense? In my codepen here, after the logo animation is finished, I want the section below to overlap the finished logo section, and then pin that section with pinspacing. So: 1. Animate logo/svg with normal pinSpacing 2. Once it is finished, the next section overlaps 3. When the overlapping section reaches the top of the viewport, it will be pinned with pinspacing Is that possible? ?

Hi guys, I actually just figured out the solution after some hours trying to figure out what was causing the problem. Wanted to write a topic here in case anybody else has this issue, or if it's relevant to the Greensock team: When you run Laravel Mix (a webpack wrapper) in production mode it treeshakes (I think) plugins from gsap, even if you registered the plugin: import { gsap } from 'gsap'; import Scrolltrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(Scrolltrigger); //animation code It works fine in development mode. The solution is to add this setting in the "terserOptions" in the webpack.mix.js file: .options({ terser: { terserOptions: { keep_fnames: true, }, }, }) Hope this helps somebody some day ?

Hey guys, This is a long shot - but I've found some threads in these forums that have helped me before, so Im trying again! Im trying to do a simple animation like the one in the video, but in an endless loop. The top element fades out, and a new one fades in at the bottom. I also need to place the top element last in the array of elements after it's faded out, so it will be an endless loop. Have you ever answered/seen something like this in the forum? Or if anybody would kindly guide me in the right direction, it would be highly appreciated. I can get it to kind of work, but I get a sudden jump when Im appending the element, so I've been stuck for a while trying to figure out the best solution. animation.mp4

Ah, I see! Makes sense since the image is already inside the inner container. Thank you for the reply @tailbreezy ?

Yes, I want it to go from the state that it's in currently in the codepen (image is positioned absolute in an outer container) and then move/place the image inside an inner container where it would also be positioned absolute. If you uncomment this line in the codepen: //hero.appendChild(image); Then you'll see what I want for the final state. Does that make sense?

Hey guys, Trying out the FLIP plugin on a project and having some issues figuring out what to do. In the codepen here there is just one active function that handles the FLIP animation and I've commented out my DOM structure change so you can see what the initial state should be. So in this example I want to go from a fullwidth image and then position/scale it to the hero container. Im using absolute positioning so it changes it's anchor point. Is this possible?

Yes, that was indeed the issue. I had to change my import logic to have all the timelines available, and then use them accordingly like you said. Thank you for the reply!

Hey, Im making a slideshow with Flickity and animate each slide with gsap. The gsap code is in modules, so I export a timeline from each module like so: export const tl = gsap.timeline({ paused: true, }); tl.to('.some-element', { opacity: 1 }) Then importing them like so and storing them in an array: const one = () => import('./timelines/one'); const two = () => import('./timelines/two'); const three = () => import('./timelines/three'); //..... const modules = [one, two, three, four, five, six, seven, eight, nine, ten]; And then in the flickity slideshow I've used their "change" callback to run the correct timeline when I change slide. Left a comment in the code below to show where Im confused about it not working. change: () => { if (index >= modules.length) { index = 0; } modules[index]().then((module) => { if (module.default) return module.default(); //If I console log something, it console.logs everytime, so it is running //Why isn't this setting the progress to 0 and starting again? module.tl.progress(0).play(); }); index++; }, Im expecting to go from e.g slide1 to slide2, then if I go back to slide1 - the timeline should play again from the beginning. I want that for each slide. See live site here: https://akershusenergi.netlify.app/ (Just click on the page and use left/right arrow keys to trigger change callback) Am I doing something wrong?

This is how I used plugins in nuxt to include Splitting.js in one of my projects. Should be the same for gsap. Try to change this code to relevant gsap code and you should be fine. /plugins/splitting.js let Splitting; if (process.client) { require('splitting/dist/splitting.css'); require('splitting/dist/splitting-cells.css'); Splitting = require('splitting'); } export default Splitting;

Hi! Is it possible to treeshake things from the core that you dont use? Like utility functions and eases e.g.

Ahhh, it's so simple when I see it. Very helpful! Thanks

Hey, Im trying to animate the background color of the whole container smoothly as you scroll. So im trying to make it go like this: Initial color is set on the container, as soon as you start to scroll horizontally the first background color should start animating and stop halfway, then animate to the next color until the end of the container. Im seeing some issues with flickering on the background and not a smooth transition. I know my code is not very performant at the moment either (I guess). Would greatly appreciate some help on how to structure the code to keep it more maintainable. Im guessing making a scrolltrigger to each separate .to is not very performant either

If you open that pen in full screen mode the offset is more noticeable. This is whats been happening to me since im working in the browser and not codepen

Thank you! Makes sense when I see your code. One issues with this is if you have a section above it. You can see it starts too soon: https://codepen.io/daniel-hult/full/QWNZxYY Maybe I can try to make an svg for the whole width like you said instead and just plug it in the whole timeline for the full offset.