iDVB

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!

Ok, Got it! This shows the issue... actually even worse, as it seems to even jump WAY down the page after the animation as well. https://codesandbox.io/s/admiring-lalande-qftns?file=/src/RedefinedAnimation.js

Thanks @ZachSaucier, Ya working on an example now... but unable to replicate the issue so far.

Is there an obvious reason why this scrollTrigger animation JUMPS down into its initial location? I thought it might be the immediateRender.... but I've even tried setting it to true but it only fixes the scrolling into the start trigger.... when you scroll OUT of the start trigger it still jumps. Essentially, we placed an item in the ideal location with css. Then we want to setup a scrollTrigger animation that moves that item from just above its initial Y to just below its initial Y. gsap .timeline({ scrollTrigger: { trigger: container, scrub: true, start: 'top bottom', end: 'bottom top', markers: true, }, }) .fromTo( circle, { y: '+=100px', }, { y: '-100px', ease: 'none' }, 0 ) .fromTo( bubble, { y: '-=150px', }, { y: '+150px', ease: 'none' }, 0 );

Is there any way to smooth-out/tween scrolltrigger animations when people are using an external wheel mouse? It seems like using a touch pad or even a magic mouse the animations are super smooth. However, using a wheel mouse causes the scroll positions to jump large amounts of pixels and therefore cause the animations to jump too.

It appears that animation of images that are loading in at the same time creates unwanted effects. https://codesandbox.io/s/funny-leftpad-g4qi8?file=/src/App.js:1346-1367 If you toggle commenting out/in that last line where I'm setting a hardcoded width on the image it changes the animation. With the width is the desired animation where its centers the center of the image at the abs 25% mark of the parent div. However, our images are loading just as the animation is applied and the images are responsive based on 95vh. Furthermore, in my actual case, I'm even using a 1x3px img placeholder that scales to honor and hold the aspect ratio before the image loads. So no idea why gsap/browser still reports the position as translate(0,0);

I knew that would be the next question. However, its pretty tough with this example..... a lot of moving parts. I'll see what I can do.

Here is a very weird one. We have an animation that seems to break when the browser is resized. Only a single circle of the 6 we loop thru to create the animation breaks. Here's the kicker. The fix was to simply add an EMPTY `onUpdate` function: const explosionMovementAmount = Math.min(windowWidth, windowHeight) * 0.28; const explosionAngle = MathUtils.degToRad(60); metaballs.forEach((metaball, i) => { explosionTl.fromTo( metaball.position, { x: () => metaballTarget.x, y: () => metaballTarget.y }, { x: () => explosionMovementAmount * Math.sin(i * explosionAngle) + metaballTarget.x, y: () => explosionMovementAmount * Math.cos(i * explosionAngle) + metaballTarget.y, immediateRender: false, onUpdate: function () {}, ease: 'back.inOut', duration: 2, yoyo: true, repeat: 1, repeatDelay: 1, }, 1 ); }); Just simply adding that fixes the issue. Here is what is looks like broken: And here is with the empty onUpdate that fixes things:

Right. Ya, I think we are having issues because having a scroll mouse (vs trackpad/magic mouse) causes browsers to show a scrollbar. And so the result between the two is different. With scrollmouse, disabling scroll is changing the width of the screen as the browser pops in and out the visual scrollbar (inside the flow) which is causing all the animations to recalculate and thus generating all new scrolltriggers. Let me see about getting a demo/codepen for this. It's a bit of an oddball.

We have a long scroll page with a bunch of animations setup using scrollTrigger. We also have modals that we popup and we disable the body scroll when they are up. The issue we are seeing is that when we do this.... scrollTrigger thinks we're back at the top of the page (since scroll height is now 0) and for a split section before the modal comes up... our animation JUMPS back to the top of the page animation and then when you close the modal is JUMPS back to where it should be. Is there a good way we could somehow disable scrollTrigger just before popping up a modal that would not have this type of effect?

Its a dynamic number of words... so not sure how I can do that. I really just want the first word to be on the screen a bit longer than when things loop.

@Carl Thanks for the help with this. Any idea how I can have it sit/pause/delay on the first word for a bit before a more steady rate at continuously rotating between them all over and over? Even more ideal would be to find a way to animate in the first word WITH the other text "Wick, amount of words" before cycling through the words as it does now.

@Carl Any particular reason the timeline repeats only 20 times? Not sure how the tweens keep repeating then?

Great. Thanks! I'll give this a go.

Is there a nice compact way to have an animation stagger and overlapping repeat? I'm trying do to this with a negative repeat value which does not seem to work. https://codesandbox.io/s/admiring-bhabha-zdx7y?file=/src/App.js The ideal solution would have the initial word up there to start (no animation) then this animation would run continuously, flipping through the words and overlapping at the repeat so you can't really tell where the start and end are. Using a negative repeatDelay does not seem to work. Ideas?