Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Crowleks

Easing move content with scrolling

Recommended Posts

Hey Crowleks and welcome to the GreenSock forums.

 

What part of the page are you referencing? There's a lot of animation happening...

 

Also what have you tried? How can we help? 

Share this post


Link to post
Share on other sites

Hi, ZachSaucier.

 

the part where while scrolling the elements are pulling from the bottom of the page and then like pull up tighter to each other and then kind of bounce when you stop scrolling

Share this post


Link to post
Share on other sites

I'm guessing that they detached the elements from the normal scroll of the page and then animate each one to a new position using a staggered offset (starting with the top most elements on the page and then going downwards). GSAP could do that bit quite easily with its staggers. You'll have to keep track of the scroll position and inside of the scroll event animate to the new position with some ease. 


A thread that can help with the basic mechanics I link to below but you'd need to add the functionality to stagger the movement of each individual element yourself:

More information about GSAP's staggers:

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

Share this post


Link to post
Share on other sites

ZachSaucier thank you so much for helpful advice. will read through the documentation

Share this post


Link to post
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.

×