iDVB

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 act

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: () => ex

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 mo

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?

😳Oh wow. I can't believe that was it. a single character. When you first suggested it I even missed the spelling difference. I was also not familiar with there being those two similarly named functions. It fixed it! Thanks @ZachSaucier!

I've added a codesandbox for this issue here... https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js

Trying to reset/clear the timeline animations and any of the styles on the elements in those animations but also to leave the empty timeline so it can be reused each time. i suspect the Portal and the fact that the animation is popping in fresh each time is at the heart of the problem. Is it possible to clear all tweens from timeline and styles on elements but keep the actual empty timeline to be reused?

We have an animation that is only working as expected the first time. I'll try to describe and then provide a video and code sample. https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js We have a button that pops up a React Portal modal with a bunch of content (image, copy, close btn). For this reproduction we'll focus on the CloseButton only. The Portal and content are not yet in the DOM. The component that can activate the Portal has already initialized an empty timeline and ref'd it. User clicks button to open Portal. Portal ge