geedix Posted September 22, 2023 Share Posted September 22, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 22, 2023 Share Posted September 22, 2023 I'm not sure if it is going to help, but maybe keyframes are what you're looking for? Link to comment Share on other sites More sharing options...
geedix Posted September 22, 2023 Author Share Posted September 22, 2023 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 Link to comment Share on other sites More sharing options...
geedix Posted September 22, 2023 Author Share Posted September 22, 2023 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? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 26, 2023 Solution Share Posted September 26, 2023 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! 1 Link to comment Share on other sites More sharing options...
geedix Posted September 28, 2023 Author Share Posted September 28, 2023 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now