I've been using Rive.app to play with interactivity within animation. Try clicking around in the forest below!
Rive.app animates like After Effects and includes a similar timeline and keyframes. Rive's State Machine is where things get interesting. You can set up different states for individual elements of your artwork.
In this case, clicking with the mouse triggers the transitions between different states. Each tree and bush has its own state and can be triggered individually.
In this case, clicking with the mouse triggers the transitions between different states. Each tree and bush has its own state and can be triggered individually.
Below you can see the bones that drive the swaying trees, adding bones rather than just keying the rotation gives the trees a more natural sway.
The artwork is drawn in Illustrator and imported into Rive as an SVG. All the layers, colours and clipping masks are retained and can be edited further in the app.
The artwork is drawn in Illustrator and imported into Rive as an SVG. All the layers, colours and clipping masks are retained and can be edited further in the app.
Here's another example, instead of clicking the mouse this animation is linked the the mouse position.