analyticaprojects.com How the heck?

[rivertim]

Hi there

 

This analyticaprojects.com site kicked off my interest in WebGL and canvas ; been crash reading a lot of stuff over the past few days that has led me to GreenSock but I'm not understanding how the heck it's all working – especially how the scroll bar is controlling the state of the text animation? Could someone kindly enlighten me?

 

Many thanks

 

Tim

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

The trick to scroll-driven animations is first to understand that every tween or timeline has a progress() which returns or sets a number between 0 and 1 that represents how complete the animation is.

 

progress:0 = not complete at all

progress: 0.5 = half

progress:1 = totally complete

 

You can set the progress of an animation using

 

myAnimation.progress(0.5) // make animation jump its halfway point.

 

You can pass in any value between 0 and 1 that you want and take it from anywhere: the mouse position, a slider component, scroll position or anything you can think of

 

this demo shows how you can set the progress() of an animation using an HTML5 input slider:

 

See the Pen JGeagb?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

Here's an old demo using a lot of jQuery to change the progress based on scroll position

 

 

 

See the Pen mbrqt?editors=0010 by adrianparr (@adrianparr) on CodePen

 

 

Here's a demo from @OSUblake

 

 

See the Pen 46295694a457cc0c61f32a8153e26639 by osublake (@osublake) on CodePen

 

Using canvas the same concepts can apply. Create a timeline full of a bunch of animations. As the user scrolls generate a number that gets normalized and passed into that animation's progress()

 

 

[OSUblake]

Here's an example that actually uses canvas. Nothing too exciting. I was just showing somebody how to do it. If you inspect the canvas in your dev tools, you'll see that it isn't scrolling. Its position is fixed, and is the size of the screen. There's another element that I set the height on to give it scrollbars, which will also allow it to work with touch.

 

See the Pen xEaRpr by osublake (@osublake) on CodePen

 

 

 

[rivertim]

Thanks for the welcome @Carl @OSUblake and great info with examples.  So, I start to understand that the scrollbar sends its position to the timeline to control its animation, but where does the timeline/tween live? On my example site where does that large block text 'live'? I can't see it in any of the source. And how is it authored? Is there a tool like Flash (old school) with a timeline that you export to code? I think I'm not grasping something basic…

 

Thanks.

[rivertim]

Answered my own question by watching some of the great tutorials. Thanks again guys – great to have discovered this tool!