Jump to content
GreenSock

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

Scale and Scroll help

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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