Jump to content
Search Community

Scrolltrigger.observe return bouncing values on scroll

AnimatiCSS test
Moderator Tag

Recommended Posts

Hello, first of all congratulations for GSAP, it's amazing!

 

I want to make an infinite scroll menu like on this website: https://heycusp.com/

 

I want to make it smooth. So I thought maybe Scrolltrigger.observe would be the way to go.

 

The first step I wanted to do was to apply a transformY based on the scroll performed.

 

In the codepen that I created, for some reason, self.deltaY returns a value that later returns to the initial point (doing a bounce and returning to the initial value)

 

I don't understand what I'm doing wrong.

 

Thank you very much!

See the Pen zYpLZOb by animaticss (@animaticss) on CodePen

Link to comment
Share on other sites

Sorry for the last post! Replied without looking properly.

 

Here's a little tweak. It's far from perfect, there's a little logic error somewhere because there's a gap after number 10. But hopefully it gives you a starting point.

At the moment your demo is tweening constantly, you need to increment bit by bit and pause any further animations while the previous is still occurring.

See the Pen BaJOOeY?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

47 minutes ago, Cassie said:

Sorry for the last post! Replied without looking properly.

 

Here's a little tweak. It's far from perfect, there's a little logic error somewhere because there's a gap after number 10. But hopefully it gives you a starting point.

At the moment your demo is tweening constantly, you need to increment bit by bit and pause any further animations while the previous is still occurring.
 

 

 

Hello, thanks for answering!

Your example moves further away from this, which is the goal:
https://heycusp.com/

Thanks anyway, you give me more perspective with your code

 

Link to comment
Share on other sites

Hello,

 

I come back to leave here the codepen with the solution!

 

See the Pen ExoedQg by animaticss (@animaticss) on CodePen

 

I relied on this code to finally give me the correct address.


https://showcased.webflow.io/projects/gsap-infinite-scroll-onmousewheel-grab

 

Actually, I ended up using ticker to make the .set of the Y position, it was necessary. But in this case applying a lerp animation.

 

Anything to improve the code will be well received.

 

The animation isn't exactly the same right now as it is in heycusp, aside from the rotations being exaggerated right now (not my concern),

in heycusp's it seems that the nodes move a bit more in their Y if the node is in view, right?

 

Any idea how to deal with this?

 

Thank you!

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