Trying to create a stop motion with stagger + ease:steps

[Drexel]

I'm trying to create a stop-motion effect with some <g> tags in an SVG. I created a CodePen to show you how I set things up, but I don't seem to have a "stop motion" type of animation (more like a flicker of sorts). I'm sure I'm missing something simple, but I just can't seem to figure it out. The goal is to have an animation of the football spinning.

See the Pen JjErOaj by icekomo (@icekomo) on CodePen

[PointC]

Hi @Drexel

 

Welcome to the forum and thanks for being a Club member.

 

Looks like @Shaun Gorneau is working on an answer too, but I'll throw my two cents out here for you. In this case I think I'd toggle the visibility of the groups like this.

 

See the Pen f150722c50fe745710d2de64f610aa36 by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

 

[Shaun Gorneau]

Hi @Drexel,

 

For stop motion, you really don't want to tween any values between 0 and 1 (which autoAlpha will), you want to use more binary properties like `visible` or `display`. Here is an example

 

See the Pen mdRBpzK?editors=1010 by sgorneau (@sgorneau) on CodePen