Viewport / Waypoint actions in Tumult Hype: Starting an animation when scrolling to an element

Using JavaScript with Hype Function Library
,
1

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: https://tumult.com/hype/documentation/#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.

7 Likes
2

Hey Daniel,
thanks for the tutorial.
It works fine on a computer but animation doesn’t launch on scrolling on mobile device (tried on iPad). Animation is played only when scrolled is stopped and finger removed from screen.
Any clue about it ?

3

Cool tutorial.

When I scroll back up to the top the timeline "bluebox" starts from the beginning. How can I get the timeline to play reverse when scrolling away from the waypoint. This would look even better!

1 Like
4

I would think this is due to the way JavaScript works on mobile devices. Basically, it is paused while you scroll, until you finished scrolling. It’s to save battery power, ultimately.

The only way to get around this behavior that I know is to fake native scrolling through JavaScript animation itself. But that comes with a lot of problems. I don’t find it looks smooth enough. I rather design (simpler) viewpoint behavior that works with native scrolling.

5

You could use the waypoint plugin “inview” and then run this code on scene load:

   var inview = new Waypoint.Inview({
     element: $('YOURTRIGGERELEMENT')[0],
     enter: function(direction) {
       hypeDocument.continueTimelineNamed('YOURTIMELINE', hypeDocument.kDirectionForward)
     },
     exited: function(direction) {
    	hypeDocument.continueTimelineNamed('YOURTIMELINE', hypeDocument.kDirectionReverse)
     }
  })
6

Could this work with this type of scenario in some way?
When I launch the plunger there is a hesitation in the ball physics using just Hype to animate.

plunger_tute.hype.zip (79.8 KB)

7

@nick the delay comes about because you are animating the ball using an elastic timing function. The force at the end of the elastic timing function is pretty much nil since it goes back and forth.

I’d instead not have an animation for the spring back up. You can instead change the ball to be a dynamic body immediately, and then have the plunger simply act on it.

8

Hi Jakob,

I tried your advise. I don't get it to work! I have the document that I practiced on attached. Any advise on what I did wrong would be much appreciated!

waypoint_test.hype.zip (33.5 KB)

9

Hey, @Alfie I just checked your document real quick and failed to see a reference to the “inview” library in your <head>

You need this, along with jquery and waypoints
http://imakewebthings.com/waypoints/shortcuts/inview/`

10

Hi @Alfie, could you please post the document if you manage to have it working ?
thanks in advance

11

@kerguelen
I will post the document if I get it ever to work :wink:

Still experiment with it. I am trying to get the timeline to play reverse when I scroll the waypoint out of the screen. I copied the "inview" code that @jakob advised into the header of the document but it didn't work as is. I guess I have to modify it but don't know how.

1 Like
12

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)

1 Like
13

Hi Ashton,

Cool idea, I need to try that option with including the reverse animation in the animation sequence and then just use the pause and continue time line function.

It sounds quite simple so hopefully I can get it to work. I really love actions and animations triggered by scrolling. It kind of gets a site alive without being required to interact with an element or object.

Thanks for sharing your ideas, much appreciated!

Alfie

14

Yea I didn’t put too much time into figuring out the reverse timeline, I’ll
play around with it some more too!

I love how alive a website feels when we do things like this.

Ashton

1 Like
15

Lovely ! Please, keep us informed of your progress !

16

I moved 6 posts to a new topic: Troubleshooting Embedding a Waypoints Animation

17

Hi Daniel,

is it possible to start several animations with different elements as “triggers” in the same layout with this method?
if yes, how you should proceed?

Thanks in advance!

18

Sorry for the delay in getting back to you -- the new 3.5 feature makes this very easy -- give it a go and let me know if you have issues with it.

20

I think @gab was talking about elements trigering actions (eg: when you scroll to this element then play that timeline, or when this element is at 50% of the scrollview, etc;) instead of the inview behaviour.

I’m interested in this also, if there is any plan of developing those behaviours built-in.

21

Is there a way to keep scroll position and timeline position in sync? Meaning I don’t want to start playing the animation at certain point, but instead want to move the “playhead” along the timeline (there and back) as I scroll. This is often used for various parallax effects on websites etc. Thanks.