Help to fix when scroll is faster, it bug the cards.

[Adriano Resende]

Hello there,
I'm so happy that it is my first code with GSAP, and I would like to share it with the community.

I was inspired to build the cards, moving to the left while scrolling, and finally, I finished it.

 

It works perfectly when it scrolls normally (ssometimes) or slower, but the animation may not deliver the expected experience when it scrolls faster.

 

Scroll slower, the result:

 

Scroll faster, the result:

 

What is the best way to avoid mess when it scrolls faster?

 

See the Pen MWZwEXX by adrianorbs (@adrianorbs) on CodePen

[Toso]

a small tip till you fix the animation, try to loop on the cards It will be much easier for anyone  to read  and will save more than 50% of the code 

[mvaneijgen]

Hi @Adriano Resende welcome to the forum!

 

If you have animations that are dependent on other animations I find it better to use a timeline. I've did a quick hack in your code and used one timeline and ScrollTrigger to control all tweens. I've also set scrub: true so that the whole timeline gets stretched over the scroll duration, maybe that is not what you want. (see another solution below)

 

See the Pen bGOpXmm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

ScrollTrigger uses the native scroll, maybe that is not what you're looking for, have you seen the Observer plugin https://greensock.com/docs/v3/Plugins/Observer, this can watch for scroll events and do something based on that logic, as you can see below you can scroll as much as you like, but it will only ever go to the next slide if you scroll after the first 'section' is done animating. 

 

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

 

These are some routes to go it is up to you what solution fits best with your requirements, but these are two routes I could think of on the top of my head. Hope it helps and happy tweening! 

[Adriano Resende]

@Toso It's the example that @mvaneijgen used above?

 

@mvaneijgen Thank you! I'm learning the code that you made.
Your example works very well; I see that you removed the function `onLeaveBack()`, which stops organizing the cards when the scroll is back.

I'm trying to back this function, and it's possible to work for all cards? something this code:

onLeaveBack: () => {
  { clearProps: "left" }
}

 

Screenshot when the scroll is back:

[Rodrigo]

Hi,

 

Clear props works on a gsap instance, normally a set() instance. You can change cards for an array with all the cards that you can get using the toArray utility method:

 

gsap.set(cards, { clearProps: "left"});

Now it seems odd that you have/need to do that, maybe try to animate X or xPercent instead. Also is more performant.

 

Hopefully this helps

Happy Tweening!

[mvaneijgen]

I agree with @Rodrigo. I did just a quick fix, but the rest of your code was a mystery to me and I don't see an easy fix.

 

It seemed like a cool effect, so I spend some time building my own, but kinda forgot the whole ScrollTrigger part, so that isn't working at the moment, but maybe it inspires you to create your own version, by know means is this a finished effect, but I think it shows some ways how to use GSAP.

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. 

 

See the Pen ExGyRaK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Adriano Resende]

4 hours ago, Rodrigo said:

Now it seems odd that you have/need to do that, maybe try to animate X or xPercent instead. Also is more performant.

I avoided animation with X or xPercent because the `transform` is focused on the element self.

The `position` works on the parent area; It helps to work better with responsive design.
Removing `left` propriety doesn't need to animate back into the shadow or all to the right.

Does it make sense?

 

Thanks for the tip, I'll refactor to use `toArray`.

@mvaneijgen
I loved the example you did. From now on, I will code the functions to read better.

As I'm learning GSAP, with your example, how do I reverse to the same initial?
Note: I explained above why I don't use x or xPercent; I don't know what the best way to animate with the same `position` behavior

[mvaneijgen]

To me my example seems pretty responsive. It isn't that animating properties like left are inherently bad, so if you know what you're doing go all out! But my instinct is to gravitate to the transform properties. 

 

15 hours ago, Adriano Resende said:

how do I reverse to the same initial?

Welp, that is was what I also tried to figure out, here is my new version. Again as stated before it takes me around 10 versions to work out all the bugs and I'm not trying to implement this in to my own project at the moment, so I don't know what else you're going to find when implementing this in a 'real' project, but that is what Codepen is great for. Just keep forking and at some point you'll find a way to fix all the bugs. 

 

Hope it helps and happy tweening! 

 

See the Pen RwERBdP?editors=0101 by mvaneijgen (@mvaneijgen) on CodePen

[Adriano Resende]

@mvaneijgen
Oh my god, thank you a bunch for your time to teach me, gratefully. 😃

The code is simpler; It will teach me a lot about the structure for future projects.