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:
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.


Here’s how to do that:



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?


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:

Here’s one way to do this:


Okay, will try it. Thanks!