Jump to content
Search Community

Animation problem when scrolling fast

KST test
Moderator Tag

Recommended Posts

Hi,

 

I want to make the same effect(horizontal scrolling and wave animation) like this site.

The wave is big when scrolling fast. The wave is small when scrolling slowly.

 

Now I'm faced with a problem of wave animation.

If using gsap.set(), the animation looks not smooth.

If using gsap.to(), the wave is not at the center of the viewport when scroll fast.

Is there any advice on how to solve the problem?

 

In addition, I also want to know is there any way(like stagger property) to make the code clean or improve performance.

 

Thanks!

 

See the Pen VwbXJam by tiffk935 (@tiffk935) on CodePen

Link to comment
Share on other sites

Hey there - this may be a good starting point to improve performance

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



I imagine you would have to write some logic to work out the distance from the center and size the cards according to both that distance and velocity. I'm away from my laptop right now but I'm sure some other forum folks would love to help on this one, it's a really fun problem to solve

Link to comment
Share on other sites

Yeah, it's a fun challenge. Very doable, but I don't have time to build it all for you. One general idea is to treat the horizontal movement as one animation (wired to the scroll with a scrub number to smooth it out), Then...

  • Create an individual tween for each element that handles the skew and scale to the maximum values. Let's say that's a scale of 1.5 and a skewY of 15 (or whatever).
  • Now create a generic object with a property that'll handle the "power" (doesn't matter what you call it), like {power: 0}. This is just a value between 0 and 1 that controls how much of the zoom/skewY gets applied. The faster you scroll, the closer to 1 it gets. When you're not scrolling, it goes back to 0. 
  • In an onUpdate on your ScrollTrigger, animate that "power" value based on the velocity. So it'll always lag a little behind, depending how long your duration is on that tween. This gives it a nice smooth feel. Don't forget to overwrite: true on that tween so it doesn't stack up.
  • In an onUpdate of that tween, loop through each of the scale/skewY tweens and adjust their progress based on the power and the proximity to the center. So if power is 1, the progress of the tween of the element at exactly center is 1. The tween that's a little further from the center may be 0.6, for example. You just use a multiplier. 

This is relatively efficient because you're just reusing one tween for each element and adjusting the progress accordingly. And there's a single tween doing all of the horizontal movement.

 

I hope that helps! If you'd like our help to actually build it, contact us for a paid consulting estimate. 

  • Like 1
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...