Using and synchronizing Anime.js with Tumult Hype 4

The synchronization is key for letting Tumult Hype 4 know where things are

Have you ever run into a dead end when trying to animate a property not supported by the Hype API? The need for another animation engine arises when setElemenProperty doesn't support a property or you need built in callbacks or features like staggering. The thing we need to do if we use another animation engine is to let Hype know that we did so (at least on the values reachable by us). The following function does just that:

This function would be called when a anime.js call completes:

Also, left and top are translateX and translateY if you haven't enabled the left/top legacy setting in the document panel. If your anime.js targets include only other things then Hype elements the syncing step is not needed! But don’t worry if you call the syncHypeToAnime on non Hype elements as the sync function ignores non Hype elements.

Have fun with anime.js

Simple animation done in Hype to test the functionality (only tip of the iceberg)

Download Example:
Anime-Example.hype.zip (25,3 KB)