Here’s a solution:
(i used the word “container” semantically; NOT in reference to the “webflow” element. it just means div block)
This could work with many types of animations, and hopefully yours.
Create a container for your html embed which has your animations. Let’s call it “animationContainer” It should include a style tag with the name of the image, height, width, and animation attributes. Note the class assigned to this div. Let’s call it “animationDiv”
Give “animationContainer” an absolute position in relation to whatever parent element it sits in. surrounding elements should be placed so their position is not affected by the container in any way.
Now, create an identical container. Let’s call this one “animationContainer-static”. inside this div add an image element (or add a background image) that matches what you want your “animation” to look like in it’s dormant, static, or non-animated state. (you can even include an image of what you want it to look like standing still… [sorry that guy in youtube is wearing off on me] ) Lets call that image a class name “animationStill”. This will serve as the starting position. Make sure this container also has absolute position and overlaps “animationContainer” exactly. Both elements will be right on top of each other.
(if you want your animation to have any additional frames, like hover state or an inactive state, add additional containers in your “stack” but skip this for now)
Finally, set “animationContainer” to display:none.
To create interactions, select the desired trigger and in the interactions panel, just be sure to add the following. to start the animation, add the containers to the interactions and use the Hide/Show function. when you Hide or Show each div simultaneously, it will appear the static image is now animated–when actually, it’s getting swapped for the animated spritesheet.
If it’s set to “loop”, simply stop the animation by swapping it back for the static image. This part mayyyy not be as seamless because you’ll likely skip frames in the process, but you can smooth it out with a transition in opacity, a transform, or even a “spin” that swaps the image state when its perpendicular to the viewport. (rotating on the y axis)
This should totally work. my original thought was to control the scale in the transform feature or the size of the animationContainer, but it would be looping or finished looping outside of your control until the desired interaction on the page. setting the element to view:none as the initial state, then switching it to view:flex (or whatever) should cause the browser to only then start rendering, which should begin thr spritesheet at the first frame, making it seamless.
it’s the same principle users use to animate the “sticky” nav bar. Two elements that trade places. Like a magician with a secret twin. One takes the place of the other for a specialized function while the original drops through the stage trapdoor: Ever see the Prestige?
I wonder what other solutions would work too. The goal in by April is to be .js certified and be able to write whatever For now, this is all I got!