Scroll follow animation

[SA5 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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.