iDVB

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:

1. Open chrome to https://0w8lzh.csb.app/ (do not have DevTools open or page refresh seems to jump to top?)
2. Scroll the [Blue Square] i too approx 20% of the animation
3. Then hit the browser refresh a few times.
4. 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.

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

@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!

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?

17 minutes ago, ZachSaucier said:

I think your issue is just that you have .paused(0) (which is equivalent to.play() like I said before) instead of .pause(0): https://codesandbox.io/s/elegant-proskuriakova-hfhw1?file=/src/Circle.js

 😳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.

1. The Portal and content are not yet in the DOM.
2. The component that can activate the Portal has already initialized an empty timeline and ref'd it.
3. User clicks button to open Portal.
4. Portal gets placed into the DOM in the body and as well as the content.
5. 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.
6. 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. 
7. 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.
8. Now up to this point everything works as expected.
9. 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: