I decided to share a Hype project I am trying to figure out. Definitely need your help.
Part 1: I found a Codepen example that shows how to get a bouncing ball to move along a sentence with word highlighting. Need help to convert example into Hype format without the light bulb helper feature. Not sure exactly how to convert the example into a Hype project.
[https://codepen.io/kindofone/pen/scuwD]
Part 2: As the ball bounces along the sentence with word highlights, I want to trigger a hype animation based on a target word.
Looking to first get help putting the various pieces from the Codepen example into the correct places in Hype format so that the equivalent is defined and working.
If you're looking to recreate this all with Hype constructs, then there's not much in an automated way that could help you (unless you were to write code) -- I would just make this with keyframe animations that use motion paths to animate. Then you can do timeline actions for the specific words.
However if you're looking to import the exact code into a Hype document and work with it from there, the basic steps would be:
Add the HTML portion to a text/rectangle element via 'Edit > Edit Element's Inner HTML'
Run the JavaScript portion in an On Scene Load handler
I think I'd need more details to advise, such as if it is one specific word, multiple ones, how you want to hook up the animation, etc. But in general I'd just modify their javascript code in the Bouncer.prototype.animateBall function or possibly Bouncer.prototype.bounce.
Hi Jonathan:
Your conversion of the sample code into the Hype format is exactly what I was hoping to see for this example. Still learning what goes where and there are so many cool Codepen projects to learn how they tick. I will try to do part 2 and see what happens. I'll post updates next week. Thank you! Patrick McLean