Triggering CSS3 animation when user sees the content

[wwu]

Hello, I purchased Hype 3 Pro mainly for web design, but I couldn’t figure out how to trigger CSS3 animation when the user is viewing the content instead of everything at once.

Here’s a sample: http://www.creativebloq.com/css3/getting-css-animations-trigger-1132906
Is there any way to integrate that feature in Hype 3? and where should I put those CSS code in?

Sorry, I’m very new to web design… Didn’t want to take the coding route, so I came to Hype.

Thanks!

[Daniel]

Here's how to do that:

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

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 …

[wwu]

Thanks!

Here are two scenarios:

1. Is there a way I could reverse the animation when the user swipe/scroll down?
2. Can I stop the animation once it had been played, so that the animation won’t keep repeating after the user keep scrolling back and forth?

wwu

[Daniel]

@wwu

1. Is there a way I could reverse the animation when the user swipe/scroll down?

You can use the JavaScript API to start the timeline and set the direction to 'reverse'

hypeDocument.continueTimelineNamed("Main Timeline", hypeDocument.kDirectionReverse);

Here's more: Tumult Hype Documentation

@wwu

2. Can I stop the animation once it had been played, so that the animation won't keep repeating after the user keep scrolling back and forth?

Here's one way to do this: Function in JavaScript that can be called only once - Stack Overflow

[wwu]

Okay, will try it. Thanks!