OSUblake

I'm not exactly sure why your example doesn't work, but you can see in the source code that it's doing the same thing. When the animation ends, it will call the self._prom. https://github.com/greensock/GSAP/blob/e7fc9b782bc1d27db52807ac095c6727211cd95e/src/gsap-core.js#L1404 Is there any reason in particular you are trying to understand how it works, like is something not working for you, or are you just curious?

Just give it a shot. I'm sure you can modify the demo I did to do exactly what you want. If you need a long the way, just post a minimal demo, and we can nudge in the right direction, but we aren't going to do all the work for you.

I'm not sure what you mean. If the circle is a DOM element, you can select it inside the loop and add its animation to the timeline.

Welcome to the forums @Jaak I'm not quite sure I understand your question. A Timeline/Tween will always return itself. Just log it out to see. If you want to do async code, it will wait on it to finish because JavaScript thinks it's a promiseable object because it has a then method, but it will still resolve with the animation. A Pen by GreenSock (codepen.io)

This might be one approach. I'm just moving the container instead of each individual text block. A Pen by GreenSock (codepen.io)

I will look at it tonight.

Yes, thank you. It makes sense now.

Welcome to the forums @Habib Hadjar If you're talking about the initial animation, that's just a new feature of React 18. 😉 I would suggest either getting of strict mode, or using fromTo animations instead of from.

Where's the video?

Not at the moment, but it's something we can explore for a future version. If the size of the page is indeed causing issues, I would try setting the visibility of sections that are out of view to hidden to see if that might help.

Thank you @akapowl My brain is foggy too and I was about to test out something much more complicated with clip paths.

Hi Michael, I don't think that is possible because the sticky header isn't going to reach it's sticky point. You will probably have to rework your headers, maybe to be sticky outside of the section, kind of like this. ScrollTrigger with Nested Persistent Headers (codepen.io) Or use ScrollTrigger to pin those headers with pinSpacing: false. And of course for that to work you will also need to have the headers outside of the section.

Welcome to the forums @Abdul136 I read your post many times and I'm totally lost, sorry. I just don't understand what you're asking. 🤷‍♂️ Please keep in mind that these forums are meant for GSAP-specific questions, not general logic troubleshooting or "here are my list of requirements, please make my project work for me" requests. Please see the forum guidelines.

Hi wobwobwob, It's hard to tell what's going on with a live site, but maybe you are experiencing this issue.

Can you provide a minimal demo that shows the issue you are experiencing so we can figure out the issue? You can use Nuxt on CodeSandbox if you'd like. Here's a starter template. https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

Hi Benjamin, You have to pass in the target and property you want to get the velocity. Try GSAP 3 on CodePen (including Club GreenSock files)

Since the toggleMenu timeline is created outside of the matchMedia and is not part of a ScrollTrigger, you should use a cleanup function as shown in the matchMedia docs to revert and clear the timeline. Also, you should use ScrollTrigger.saveStyles() to help when the media changes. GSAP - Responsive menu (codepen.io)

Hi Michael, I'm not exactly sure how you are expecting this to look, but your probably going to need to nest stuff differently, so maybe like this? ScrollTrigger Section Wiper (codepen.io)

Hi Jordanruan, As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. To do an effect like that, you would first need to create the bottle with something like three.js. Once you have that done, animating is pretty straightforward.

We can look into it, but I doubt that will possible as the browser doesn't provide a way to listen for find events.

Can you make a simple demo on CodeSandbox of what you're trying to do? It's very hard to answer UI/animation questions without a demo.

That shows how to use Club GreenSock plugins on CodeSandbox. You can fork this demo. https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-2zgxyo?file=/pages/index.vue

Are the fixed elements going to change for every page?

What Framer Motion is doing would be the same as a fromTo animation, which of will course will work as expected because we are explicitly telling the animation what values to use. And this React issue is not unique to GSAP, and will happen with any animation library that does something similar to a GSAP from animation, for example, an anime.js "reverse" animation. Notice how the fromTo animation works just like Framer Motion, but the anime.js reverse animation is running into the same issue as the from animation. https://codesandbox.io/s/confident-leaf-ih2zmw?file=/src/App.js

Hi Jackob, That sure is a lot of code to go through that isn't related to GSAP. The only thing I really noticed is that removing the scaleY animation in your minimize timeline seems to fix it, but I don't know why that would cause an issue. It doesn't look like it's anything related to GSAP, just some weird Firefox behavior. 🤷‍♂️