Scale and Scroll help

[Damian]

Hi,

 

I'm trying to create a similar website to http://www.nouvelleoctavia.fr whereby as you scroll the content and imagery increase in size, fade in and fade out as if you are passing through it. I'm a newbie to GreenSock and I am having trouble understanding how it works. I'm currently trying to get a simple coloured div rectangle that is in the centre of the screen to increase and "pass through" as I scroll but it is not working. Any help would be most appreciated in getting me started.

 

Thanks

[Carl]

Hi and welcome to the GreenSock forums.

 

I really wouldn't recommend trying to simulate the effects of an award-winning website as your first GSAP project. 

 

A majority of what that site is doing has to do with matters a bit beyond what GSAP handles.

 

In general terms there are 2 basic tasks you need to accomplish

 

1: Generate a Timeline of tweens that handles all of your animations

2: When the user scrolls calculate how far they have scrolled and use that value to alter the progress() of the timeline (a value between 0 and 1).

 

Although not a perfect implementation: http://codepen.io/adrianparr/pen/mbrqt this example illustrates the basic mechanics

 

Although we do not officially support SuperScrollorama, lots of users have used this jQuery and GSAP-driven plugin with great success in creating many award-winning sites:

 

http://johnpolacek.github.io/superscrollorama/

 

I would probably recommend going the SuperScrollorama route ONCE you have a good understanding of using TimelineLite/Max.

 

http://www.greensock.com/sequence-video/

 

---

 

As for the animation, I don't think they are scaling the elements as much as they are creating tweens that moves them along the z-axis in 3D space sort of like this:

 

http://codepen.io/GreenSock/pen/LlsoF

[Damian]

Hi Carl,

 

Thanks for the reply. I am using SuperScrollorama and I grasp the concept of needing/using a timeline but what I can't get my head around/know how to write the code within TweenMax.fromTo{} is what essentially translates to this:

 

Having an image and or content increase in X,Y scale as you scroll down to give the illusion of the user passing through the content, the next lot of content will fade in appearing small, as the user scrolls it increases until it scales very large and fades out to again give the illusion you are passing through it. That is what I can't get my head around, actually writing the code for that action.

[Carl]

Something like this can be created with a loop but here is the basic Timeline code:

 

http://codepen.io/GreenSock/pen/kLniz

 

Here is a more advanced approach:

 

http://codepen.io/GreenSock/pen/sxdfe

[Damian]

That first codepen linked you provided in your last response has the gist of what I need thanks, coupled with the calculation of scroll I think I should be able to get something working.