Tumult Hype 3.5 introduces the concept of viewport actions: You can run any action when an element has been scrolled into the visible area of the browser or device. You can also run an action when an element exits the viewport. (Or both, of course)
For documentation on viewport actions, please visit: http://tumult.com/hype/documentation/3.0/#viewport-actions (This is a Pro feature).
Waypoints with jQuery:
The technique below outlines a technique that uses jQuery and a plugin to handle this same behavior:
A neat affect you can do with very little code is to start an animation when an element is visible. This ensures that animations occur only when you want them to (and you have the user's attention).
If you're looking for a tutorial on creating an animation controlled by scrolling, visit this tutorial on our blog.
To run a timeline when you scroll down to an element, you would first need to reference Jquery and Waypoints (a JavaScript library and a plugin) in the <head> of your document:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
(I recommend getting the latest version of jQuery possible).
Next, you would need to set a Unique Element ID for the element you wish to trigger the animation.
In the example downloadable at the bottom of this article, we’ve set a box to have a Unique Element ID of ‘redbox’. Next, we run this script ‘on scene load’ for its scene:
$('#redbox').waypoint (function(){
hypeDocument.startTimelineNamed('bluebox');
}, { offset: 'bottom-in-view' });
This starts the ‘blue box’ timeline when the entire ‘red box’ element is in view.
For more options, please view the Waypoints Website.
To see this in action, download the document attached: WaypointsExample.zip (124.8 KB)
Reverse Control?
To reverse the timeline when you scroll back to the element trigger point, please see this example below by @Ashton.
