Jump to content
Search Community

Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?

artyor test
Moderator Tag

Recommended Posts

Hi all,
Here is codepen with example of what Im trying to do. Basically I want to append elements into another grid, and trigger it with onScrubComplete (in codepen im using onLeave so you can re-trigger Flip.from to see the glitch(?))

Basically there is just this small stutter that's happening when Flip.from gets triggered, it is happening with or without absoulute: true prop. 

Im also using SmoothScroller, but it happens without it too. However its more appearent with SmoothScroller, as page scroll moves slower...

Is there anything I can do to smooth this out? 
PS
If you dont see it at first, trying scroll a bit faster over the trigger..Its there I promise, tested it on more browsers and devices


Thanks in advance!

See the Pen ZEMBQdq by artyor (@artyor) on CodePen

Link to comment
Share on other sites

I'm afraid I can't see it,

But you are doing several Flips at the same time and animating most of the visible area on the screen, which is going to be reasonably resource intensive, Flip has to do some layout calculations and move stuff around in the DOM before the animation starts. - Possibly simple:true may help?

 

Quote
simple Boolean - if true, Flip will skip the extra calculations that would be necessary to accommodate rotation/scale/skew in determining positions. It's like telling Flip "I promise that there aren't any rotated/scaled/skewed containers for the Flipping elements" which makes things faster. In most cases, the performance difference isn't noticeable, but if you're flipping a lot of elements it can help keep things snappy.


Possibly also try popping will-change: transform on those elements?

Link to comment
Share on other sites

1 hour ago, Cassie said:

I'm afraid I can't see it,

If top edge of grey divs that are animated are not in viewport when trigger happens, it's easy to miss it. 
If you make viewport more portrait like, (or just lower width container of codepen preview) it will be easy to see top edge of animated grey box jumping a bit. 

Also you can scroll up and down over trigger point since it tigers each time because of "onLeave". I added markers: true so trigger is visible

simple: true didnt help. Thanks

Edit:
change css a bit so top edge of animated element is in viewport during the trigger

Link to comment
Share on other sites

Yeah, I've tried it like 20 times and it's buttery smooth for me every time. I can't see any issue at all, but then I dug in and saw that you commented out some lines that were moving/rotating things and when I uncommented those, I saw things jump. That led me to see several problems: 

 

  1. You're looping through every image and for EACH one you're creating pretty much an identical ScrollTrigger with the trigger being ".images"...and for every one of those you're animating ALL the images with a Flip animation! That's extremely wasteful and problematic. If you've got 9 images, that means as soon as you hit the onLeave (9 times), you're doing the calculations for all 9 images and creating 9 (conflicting) animations. So 81 animations total (72 of which are completely unnecessary). 
  2. You've got scrub: 1 on those rotation/xPercent animations which means it takes a full second for the animation's playhead to "catch up" to the scroll position, but you've got an onLeave() that's trying to do a Flip animation on all those images, so those animations would fight. In other words, your scrubbing xPercent/rotation one would keep going for a second, while you've ALSO got a Flip animation that's trying to control the rotation/position on the very same element(s). No bueno. It's probably best to set scrub: true so there's no delay/overlap.
  3. The way you set things up leaves the ScrollTriggered animations active, so let's say the user scrolls down and all your images go to their slots...if the user scrolls back up again, you'd see the images rotate/move because that scrub animation is intact. I imagine you'd want to set once: true on those ScrollTriggers so they evaporate as soon as that onLeave gets triggered. 

I really wasn't sure what effect you wanted, like if each image was supposed to have its own Flip that might get triggered at a different spot or if you just wanted them all to happen at once, so I forked your CodePen and it has code for both (the latter is commented out...and if you enable that you'd obviously delete the onLeave() stuff in the image ScrollTriggers): 

 

See the Pen JjabJRN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Since you've got all the cards lined up initially, there's really no benefit to having an onLeave for each and every one since they'll all trigger at exactly the same time (so use solution 2) but I left solution 1 intact because I figured in your "real" version maybe you've got them lined up differently. 

 

Is that any better? Seems to work as I'd expect.

  • Like 2
Link to comment
Share on other sites

Hi Jack @GreenSock

Thanks, I did screen record on your codepen where stuttering is also visible for me, in your commented example, while much less visible in initial example. Also for some reason, cards dont get aligned right (check video or play your codepen with commented example) at end of animation, and  then jump to right place? 
Link to streamable video

You were right to assume that I might want to not have all my cards lined initially, but wanted to simplify the demo. 
Basically initial start of cards wont be lined up, but I want to trigger their Flip animation with common trigger, not to have trigger for each card.

I made new codepen, where I mixed your code with mine and made it work (but couldnt get your commented example to work)
Basically I changed getState value, and changed scrub to true...But I kept '.images' as end trigger. It seems to be working without stuttering now...:
I am not making 88 animations here, or am I?

See the Pen ZEMBQdq?editors=0010 by artyor (@artyor) on CodePen


 

18 hours ago, GreenSock said:

".images"...and for every one of those you're animating ALL the images with a Flip animation! That's extremely wasteful

But .images is single element, container of other elements? So basically I wanted to use independent trigger, so animation gets triggered regardless of how are cards lined up. Why would this create 88 animations?
 

18 hours ago, GreenSock said:

you'd want to set once: true

Yes you are right, but I left it like this on purpose for codepen, so someone who checks my problem can retrigger animation and see stuttering easier.

Hi Cassie @Cassie, thanks, performance might be a problem, but it's not because Im animating 9 elements, since this thing doesn't happen at all if I use different trigger instead of ScrollTrigger. If I use "click" event listener to trigger Flip animation, it doesnt happen. It must be something in ScrollTriger am doing wrong. 

Link to comment
Share on other sites

9 minutes ago, artyor said:

Also for some reason, cards dont get aligned right (check video or play your codepen with commented example) at end of animation, and  then jump to right place? 

I cannot reproduce that at all, and it's hard for me to troubleshoot because you didn't provide a fork of the CodePen showing that issue. Would you mind doing that? I can't see what the code looks like exactly in your video. My guess is that you either have an old/cached version of a GSAP file (please clear your cache) or you've got something changed from my original demo. Once I see the problem reproduced, I'm sure I'll be able to tell you more. And what browser/OS are you using? 

 

12 minutes ago, artyor said:

But .images is single element, container of other elements? So basically I wanted to use independent trigger, so animation gets triggered regardless of how are cards lined up. Why would this create 88 animations?

Right, but you were creating a ScrollTriggered animation every time in your loop (9 times). So you end up with 9 of them firing their onLeave at the same time (because they're all using the same trigger element). And every one of those onLeave calls were getting the state of ALL images and trying to animate them. 9 onLeave calls, each animating 9 elements. 9x9 = 81. See what I mean? 

 

Once I see the problem reproduced in a minimal demo, I'll have more to say I'm sure. 

  • Like 1
Link to comment
Share on other sites

2 hours ago, GreenSock said:

Once I see the problem reproduced in a minimal demo, I'll have more to say I'm sure. 

Hi Jack @GreenSock, I didn't provide demo because it's your codepen I screen record, but here is forked version of it:
What I notice just now that it only happens if your Editor view has code panels on the side. It doesnt happen if code panels are on top, which is weird.

See the Pen dyqNpzw?editors=0010 by artyor (@artyor) on CodePen

 

2 hours ago, GreenSock said:

81. See what I mean? 

Yes, I got it now! Thank you

I tested code on Windows 10, Chrome and Firefox, as well as on MacOS Big Sur, on Chrome. The problem looks more visible when using mouse instead of touchpad

 

Link to comment
Share on other sites

Hi,

 

I've been fiddling with your codepen example for a bit and this seems to do the trick:

ScrollTrigger.create({
  trigger: ".images",
  start: "center top",
  markers: true,
  onEnter: self => {
    let state = Flip.getState(images);
    
    images.forEach((image, i) => slots[i].appendChild(image));
    gsap.set(images, {xPercent: 0, rotation: 0});
    
    Flip.from(state, {
      duration: 6,
      overwrite: true, // <- HERE
      ease: "power1.inOut"
    })
  }
})

Since the first ScrollTrigger instance you're creating for the images has once: true, it doesn't really matter if the Flip animation overwrites those. In the tests that I've ran seems to work as expected:

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...