iDVB

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!

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?

😳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 gets placed into the DOM in the body and as well as the content. This action in React fires the useLayoutEffect that for the first time applies all the animations to timeline and plays it animating in the CloseButton with a fade and slide in. When you click that CloseButton the animation is reversed and onReverseComplete this.paused(0).clear(); is called to clear out all animations and then the Portal and content are removed from the DOM. The reason this is done is that the animation in of the modal needs to be calculated each time the portal is opened as the animation is a circle that aligns to the button being clicked. Now up to this point everything works as expected. However, now when you click to open the Portal again... all elements of the animations just immediately appear and then they fade/slide in after, causing a blink effect. The #1 most unexpected part is that the timeline is being cleared AND the DOM elements being animated are being completely removed from the DOM (See div in video) however you can see in the console that just before the second initialization the CloseButton "starts" as opacity: 1 as inline style. This appears like even though the element was removed from the DOM and the timeline.... somehow it retains its previous animation styles?! Component Code: https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js Video:

Yup... just wanted to be sure there isn't a simple built in way that lets me use the same timeline. Since its the exact same.... just needs to be recalculated.

We have this animation that turns animates a PURPLE circle with respect to a RED circle to feel the full screen. Then when you close that (close button) it should animate back to the other circle. This currently works ONLY if you do not change the position of the RED circle by scrolling the page while the purple one is open. https://codesandbox.io/s/vigilant-snow-yhf5q?file=/src/Circle.js Is there some way to "recalculate" the props (location) of the circle when reversing? Cheers!

Thanks @ZachSaucier so here is what we got working. https://codesandbox.io/s/young-dust-900hv?file=/src/MetaballSwarm.js This is nearly there to what we want. Are you able to comment on perf/efficiency of our approach here? Seems like there is a bit of jitter if you play with it up and down a bit.

https://codesandbox.io/s/heuristic-dew-84ys4?file=/src/MetaballSwarm.js We have the "effect" that we want working..... but the problem we're struggling with is how to get it to work in our usecase. In the example above, you can see that moving the grouped balls causes them to separate the faster you move. However, in our case, we want the separation to be fixed to the center-center of the screen, so that as you scroll fast down... the balls start to separate from the center upwards. Then when you stop scrolling the balls reposition themselves center-center again. This allows us to only have a canvas the size of the viewport and NOT the size of the page. So we are faking that the circle is traveling down the page with this same effect of spreading. Our Thoughts: Maybe the solution is something like tracking the direction the ball is moving in the viewport and then using it with the velocity of the scroll animation in order to create that spread, while still keeping the origin of the balls in the center. Is there some way to create a loop that constantly is giving an element a NEW tween destination that is constantly changing? Seems like maybe a perf anti-pattern though? Maybe that could be used somehow? I hope that makes some sense. It was even confusing to write.