Jump to content

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

Scroll follow animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey there,


I came across this site from awwwards, quite like the animation. wondering if this can be done in gsap library.



The way i was thinking to achieve this is to animate each of the element based on scroll position, but this will result a blank space at the bottom of the page, as the whole element shift up to its y position. Most element in example site will remain it position. Any help to point me to the right direction would be appreciated.


  TweenMax.to ("#text1", 1.2, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} );
  TweenMax.to ("#text2", 1.4, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} );




Many thanks

Link to comment
Share on other sites

I believe the effect you are referring to is Parallax Scrolling where foreground elements move quicker than background elements to achieve a sense of depth.


Watch the video here for a basic overview of the concept


Petr Tichy with Skrollr


Petr Tichy with GSAP Demo:






GSAP can be used to animate virtually anything, so using GSAP in a parallax site is totally possible. We just need to keep our support focused on the core features of the GSAP API and can't really get into all the technical implementation details of a scroll-triggered parallax animation, but hopefully the resources above provide some help.

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