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'
- Add jquery to the head HTML, something like:
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 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)
Bouncer.prototype.animateBall function or possibly