Let’s say I want to create a banner ad that runs its primary animation for 15 seconds, and once it’s completed, I want a separate animation to run when the viewer hovers their mouse over the banner (and run in reverse on mouse out).
How can I best achieve this in Hype, given I want the hover animation to:
Be seen only after the primary animation is complete
Reverse from the point that it has completed to, if a viewer quickly hovers on and off
Posting here instead of the Advertising category because this desire provably isn’t exclusive to a banner ad. Also to note, is that I know this behavior won’t be seen on touch devices, which is fine. The hover simply enhanced content.
Is only ‘hover’-able when the primary animation is complete. Put it in place as the last act of the primary animation.
You can use Javascript to run the timeline in reverse during ‘mouse out’ on that same element only if the timeline has gone past a certain number of seconds.
There are Hype api functions to get the current time in a timeline, reverse the timeline, and you can also store those values and run calculations on them.
Yaaas. I was having a hard time getting my mind around this, but this is an elegant solution.
I just tested mine based on your suggestion, and it doesn’t look like I need to concern myself with bullet point #2. On my earlier work, when I hovered off, the animation would reverse, but it would start from the fully completed point so it looked herky-jerky. But this new test is smooth.
Do you happen to have any idea of how ad servers calculate banner runtime? I’m wondering if having my timeline more than 15 seconds (although paused at 15s) is going to trip any alerts and get rejected.
Don’t really know anything about this but if I were them I would take a screenshot every second and compare. I think you’re falling within the spirit of the law.