I figured out how to get the animation to activate when scrolled to and reverse when not on screen without using the waypoints.inview, and only waypoints.
Rather than using startTimelineNamed, I use continueTimelineNamed.
$(’#redbox’).waypoint (function(){
hypeDocument.continueTimelineNamed(‘bluebox’);
}, { offset: ‘bottom-in-view’ });
Now, you must add a timeline event to pause bluebox right at the start of bluebox. Then, add another pause after it animates. Now, you must animate the box back into place, and then add another event “start timeline: bluebox”.
Lastly, go to the main timeline and add a timeline event: start timeline bluebox, sometimes doesn’t work if you put it at 0.00 so use 0.02 to be safe.
Another trick if you want the animation to go back to the start if you scroll past it is to add this:
$(’#redbox’).waypoint (function(){
hypeDocument.continueTimelineNamed(‘bluebox’);
}, { offset: ‘0’ });
The offset “0” states that when the top of the element is 0 pixels from the top of the viewport, it activates the function.
Only problem I am having is if you scroll really fast, it doesn’t finish animating that section of timeline so it get’s all backwards.
Try it out, see if you like it! I was unable to get waypoints.inview to work at all so I had to figure out a different method.
waypoints fixed.hype.zip (50.7 KB)