Jump to content
GreenSock

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

Scroll follow animation

Recommended Posts

Hey there,

 

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

http://www.lespetitesculottees.com/#!en/product/la-blue-monday

 

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

https://webdesign.tutsplus.com/tutorials/what-is-parallax-scrolling--cms-26969
 

Petr Tichy with Skrollr
https://ihatetomatoes.net/get-parallax-scrolling-master-class/

 

Petr Tichy with GSAP Demo:

https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-03/

 

Tutorial:

https://ihatetomatoes.net/a-simple-parallax-template-using-scrollmagic-and-greensock/

 

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