iDVB

Also, not sure what setting are needed to get Lottie + GSAP ScrollTrigger to work nicely in all browsers as mentioned in the above thread and below, however, it doesn't appear to be working with the svg renderer in Firefox for us. All other browsers and devices seem to work 100% but FF continues to flicker. Even though we can see that the images has already loaded in the network panel; they still seem to flicker-in "the first time" and then everything works 100% until refresh.

See thread:

First: I think the docs around Lottie + ScrollerTrigger could/might use a refresh. The LottieHelper appears to be written before the advent of useGSAP which would simplify things. Primarily: We have gotten things working perfectly in all but Firefox. Firefox, sadly, continues to have that flicker problem described in the below two threads. In the below code example, you can see we are implementing things using the helper and in line with the below thread's recommended implementation. (we think) but this still does not work in FF. All other browsers and devices seem to work 100% but FF continues to flicker. Even though we can see that all images have already loaded in the network panel; they still seem to flicker-in "the first time" in FF and then everything works 100% until refresh. If we, toss the svg renderer in favor of the canvas one, then things work... ....but then the images load in a blocking way which we definitely do not want either. Reproduction Example: (load in Firefox) https://codesandbox.io/p/devbox/pghzk3?file=%2Fsrc%2FApp.jsx%3A9%2C1 We wonder if something from scratch (no lottie file, no lottie-web) like the following would work better?

Thanks @Sahilwould REALLY love to see a working example, maybe with a fork of what I provided. We've been playing with this all day and made little progress.

Thanks @Sahilbut does that progress represent the overall progress or the individual one? I think the issue is then that if there is easing on the motionPath animation the scaling could be off?

I've looked at a number of threads asking this similar affect. None quite capture what I'm hoping to do. I have a motionPath set using an svg <ellipse> that is animating a number orbs around the circle. When the orbs are near the back of the circle (top of ellipse looks farther away) they should be smaller and at the front bigger. I was hoping to use a modifier that would simply take the progress along the path to set the scale. But I'm not sure how to get the progress inside a modifier. The other challenge I have is that the start and end points on the <ellipse> don't quick net to the initial alignment I want for the orbs so it just means that the closest to the screen part of the path is actually an odd number like 0.03 .... so anything lower or higher in progress should be smaller in scale. Also, the animation is a bit more complex in that, while it always needs to maintain that depth as far as the orbs scale go. Also, there is a planet (circle) in the middle and the z-index of planet and orbs should be swapped during the animation the make it look like the orbs are going in front and then behind the planet. the overall animation should: - spin, fade,scale into view on the path where Orb1 is front and center - wait 2s and then progress the orbs along path so that Orb2 is front and center do this until Orb3. - then cross-fade the colors of the orbs to green - then proceed to progress the orbs along the path same as above for 3 more orbs (pausing for 2s on each) - then stop all animation I think I could just use a hand with the motionPath + scale part and the rest I can do. But I thought it important to describe the overall to understand we can't just loop infinitly.

Thanks @Rodrigo! I agree that it absolutely is a react-specific challenge. In the same way `useGSAP` has mitigated a number of other ones, I was hoping there might be at least a recommended approach for this. GSAP has at least acknowledged the need to pass timelines or callbacks down, it only a small step from there that seems to occur in most of our production sites that are heavily animated. https://www.klick.com https://careers.klick.com https://transformation.klick.com we want to avoid: - magic/manual position number shared around - putting all timelines in the parent and lifting up refs out of all children into parent - we can't avoid the need to have out of sequence tweens being placed into the timeline before others need to be placed. (ideally things should shift to make room)

In a complex react application using the passing down a timeline prop outline here, what is the best / correct way to orchestrate animations that are on the main timeline and nested in components. You can see in the example we have some animations that are defined at the top level and some animations that are defined in a deeper component. How do I ensure that the second animation defined at the top level occurs AFTER the nested components animation. https://codesandbox.io/p/sandbox/gsap-animation-test-lnzldq?layout=%7B%22sidebar[…]ebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D The scenario is easier if all animations are in the child components (none directly on the timeline) and the components are ordered top-to-bottom in JSX in the order we want the animations to sequence. But if you try to inject the child components into the main timeline expecting all other animations to occur after them ... things break down. We're trying to avoid setting hard-coded position times for everything. Surely there is a recommended way to handle this.

Expected: We have two animations we want to happen. 1) [Blue Square] One that is scrubbable with scroll 2) [Red Square] One that is not scrubbable and instead plays or reverses when a certain position in that same scroll is hit. (0.5) Issue: When you scroll and then hit page refresh, sometimes the "progress" is correct and sometimes its incorrect and showing either "0" or "1". However, the [Blue Square] is correctly at the proper position. So even though it reporting to us incorrectly (causing the [Red Square] to jump to the wrong position) it seems to be able to place the [Blue Square] at the proper progress location. Reproduction steps: Open chrome to https://0w8lzh.csb.app/ (do not have DevTools open or page refresh seems to jump to top?) Scroll the [Blue Square] i too approx 20% of the animation Then hit the browser refresh a few times. You should see that sometimes it works and sometimes it reads as "0" even though the [Blue Square] stays put at that 20%. Perhaps there is a way to get what we're trying to do to work another way? We simply want that [Red Square] animation to jump to 0 or 1 ONLY on page refresh depending on the scroll progress at that time of the refresh. Full code here: https://codesandbox.io/s/quiet-microservice-0w8lzh?file=/src/App.js

Thanks. We’ve definitely got a number of examples already. We’ve read the docs fully and understand the options. I think all of the examples, and our understanding of the options all seem to not quite match the inertia of that blobmixer. If you try it out, you likely will see what I’m talking about. Just interested if there is someone that would be able to guess at the settings needed to get that same inertia that is: A) very subtle b) very natural inertia when it’s moving forward or back to the next snap point. All examples are VERY obvious inertia tapers off… comes to complete stop then all of a sudden, starts moving again to move it forward or backward to snap point. The blobmixer site does not have this.

Looking for a way to replicate exactly the same velocity + snapping that is on this blobmixer site. I've waded through a number of forum examples for snapping but most of them "feel" like there is quite a bit of delay and then a whole new momentum to move to the next snap. Where as this blobmixer site seems to feel more natural. Maybe its taking into account more the original velocity and trying its best to decelerate to the next snap. It will even pull it back if the user slightly overscrolls the nearest snap point. The attached codepen is just a sample of the type of velocity scrolling we're doing, now we're just looking to implement buttery-smooth snapping like in that blobmixer site.

@aka, Is there a way to use `gsap.context()` with React Three Fiber when it comes to being able to reference all the classnames under the current context vs creating refs for reach item? Seems like since fiber isnt using classnames you are stuck creating refs for each object?

We figured out the answer. We just needed to make sure all the gsap references in our custom ui lib are made to the UMD version of gsap. Now everything compiles fine. import { gsap } from 'gsap/dist/gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

Our issue sounds very similar to the NextJS one except we are using Remix (Client+SSR) erroring out on child modules like EasePack. /node_modules/.pnpm/gsap@3.6.0/node_modules/gsap/EasePack.js:190 export var SlowMo = _createSlowMo(0.7); Unexpected token 'export' somehow the internal modules are not respecting the formats that the parent modules are being bundled with. Part of what makes this more complex for us is that we have a custom react ui lib that has gsap as a peerDep, and then the consuming app brings in that custom lib as a dep and gsap in as a dep. It also import gsap locally in that project. This all works when our consuming project is Gatsby (webpack) but for some reason gets the above error when the consuming project is a Remix one. We have fiddled with trying to: have Remix app imports like import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' --- import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' --- import { gsap } from 'gsap/dist/gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' --- import { EasePack, gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' --- import { gsap } from 'gsap' import { EasePack } from 'gsap/EasePack' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger, EasePack) nothing seems to work

Thought it was needed... but on closer inspection it appears not. We got it working this way now.... https://codesandbox.io/s/elegant-sammet-3dk9x?file=/src/RedefinedAnimation.js Thanks!