frame-by-frame sequence in SVG

[geedix]

My example works fine: I have several frames in SVG that are animated using a 0 duration tween with a .12 stagger.

However, I have a larger project where the same method isn't going so well. On and off states get out of sync upon repeat, there are overlapping visible frames and it's not as simple as I had hoped.

 

Frame-by-frame animation must be a common thing to do. The examples I've found are changing the x position of a spritesheet rather than the visibility of an SVG group.  Is there a smarter way to animate SVG frames?  Maybe the method I'm using is good, and I just need to spend more time debugging my bigger project? thanks

 

See the Pen OJrQNqa by geedix (@geedix) on CodePen

[mvaneijgen]

I'm not sure if it is going to help, but maybe keyframes are what you're looking for? 

 

 

[geedix]

That would be useful for a spritesheet that changes position on each frame, but for  me, hiding and showing frames that are all in the same position, I don't see a way to use Keyframes. thanks though

[geedix]

Watching my above example for a while, I notice that it's a little inconsistent. On some loops, background frames occasionally show when they shouldn't, or there's an instant with no frame showing. Maybe the playhead doesn't always hit the tick at exactly the right time to sync things up the way I have it written.

A spritesheet is foolproof because it's only in one position at a time. Is there a way to make my approach with autoAlpha foolproof? So that one frame is always showing, and the others always hidden?

[Rodrigo]

Hi,

 

This is one option, you can change the speed by changing the space constant:

See the Pen VwqxvoG by GreenSock (@GreenSock) on CodePen

 

Another alternative is using stepped ease:

https://greensock.com/docs/v3/Eases/SteppedEase

 

A third option would be using Advanced Staggers as @Carl shows in this video:

 

Hopefully this helps.

Happy Tweening!

[geedix]

I actually came across Carl's helpful seamless looping staggers via this old thread:

I had fewer glitches once I started syncing my loops accurately. In the end, I ditched my hand-drawn frame-by-frame animated smoke and went with a pile of circles that float up to randomized locations for a cleaner looking smoke on this project.