Triggering CSS3 animation when user sees the content

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!

Here's how to do that:

2 Likes

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

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

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

2 Likes

Okay, will try it. Thanks!