Follow the bouncing ball over text with animation activated at a target word

Hi:

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.

PM

what is your problem in doing this handcrafted in Hype¿ should be straight forward.

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.

PM

a sry, i thought you wanted to recreate it ... but your aim is to embed the thing ...

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:

  1. Add the HTML portion to a text/rectangle element via 'Edit > Edit Element's Inner HTML'
  2. Run the JavaScript portion in an On Scene Load handler
  3. Add jquery to the head HTML, something like:
    <script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
  4. Do not copy the scss, instead view source on the codepen rendered frame and copy the rendered CSS. Then add this to a <style> tag in the head HTML

I've got it hooked up with this sample document:

bouncing-ball.hype.zip (30.3 KB)

As for:

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.

2 Likes

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

1 Like