Share Posted February 24, 2014 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 More sharing options...
Share Posted February 24, 2014 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 More sharing options...
Author Share Posted February 24, 2014 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 More sharing options...
Share Posted February 24, 2014 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now