Triggering CSS3 animation when user sees the content


#1

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!


#2

Here’s how to do that:


#3

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


#4

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

Here’s one way to do this: http://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once


#5

Okay, will try it. Thanks!