Sprite Sheet Animation

Design help Animations & Interactions
1

Hello,

I’m trying to animate a sequence of images in webflow. I’d like the animated sequence to start on an event (i.e. when I scroll to a certain part of the page, start my animation).

I thought about using gifs, but A) there’s no way to queue up a gif so it starts playing on the first frame and B) the quality isn’t that great.

Instead, I much rather use a png sprite sheet to animate. In theory, this would grant me playback control and image quality.

I know there is css support for spritesheet animation. I’ve been able to get a simple looping animation to work in my web flow project by adding some css in the “custom code” section. Using this method though, i cannot take advantage of webflow’s interaction panel to start my animation when I scroll to a certain part of my page.

On the other hand, I can nest an image in a div and move the image frame by frame within the div using webflows interaction panel. This takes a lot of manual labor though – a 50+ frame animation means 50+ move states in the interaction panel.

My question is, is there any support for sprite sheet animation within webflow. What would be the easiest and most efficient way to start an image sequence animation when I scroll to a certain part of my webpage.

Thanks

2

I’m not sure this would work, BUT, it actually could.

I noticed that classes embedded in html embed widgets take on the same properties when an element of an identically named class is maniupated in the editor.

Taking advantage of the “affect all elements(or siblings or children) of this class” option in the animator, it’s possible to target a class that’s actually also embedded in your custom html/code div containing your sprite sheet.

I tried to make a sprite animation work with an animated svg before but it got sidelined. I was able to get a nice although blurry animation because I didn’t yet figure out how to duplicate the “stop” part of the stop motion animation.

The key part of the whole show is the CSS style called “STEPS()”

Do you have anything set up? Perhaps the trigger would change a div set to view:none as the initial state, then toggle to grid which may automatically trigger the STEPS(). You “could” just animate everything you can, and copy and paste the published code back into the embed with the spritesheet to complete it. I don’t code but it’s worth getting info on how to better mesh the two.

How do we upvote feature requests? Haha Nevermind. wait until e-commerce 1.0 is officially released first haha

3

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 :slight_smile: For now, this is all I got!