Animated Gradient Issues

[neworigin]

Hi there,

I've been struggling with animating gradients for SVGs as well as getting them to sequence correctly on the timeline. In the attached pen I'm trying to have the items in the circle fade in from left to right and then fade out from left to right and loop. 

 

I'm animating the offsets, opacity and stop colors of the gradients and its seems to be working but I can't get them to sequence correctly. The '45' comes in at the beginning instead of after the 'pause' buttons despite using a position parameter:

.to("#grad2 stop:nth-child(2)",0.5,{attr:{offset:'1'}},"+3") 

 

Is there another way to get the elements to sequence correctly or perhaps a better approach for animating the gradients to achieve what I'm looking for?

See the Pen KKmeywQ by neworigin (@neworigin) on CodePen

[mikel]

Hey @neworigin,

 

I like such a combination of linearGradient and mask.

 

See the Pen LYyrOOV?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy masking ...

Mikel

 

[Cassie]

(Using transforms to animate an element with a gradient applied will be more performant than animating the actual stop values too)

[neworigin]

Thanks much for the suggestion of animating a gradient mask. Definitely a better approach. See update pen below.

See the Pen VwbBZeG by neworigin (@neworigin) on CodePen

 

Any recommendations on how to do this with more of a cross dissolve? Would like to shorten or overlap between the elements as the gaps are too long currently. I tried using positioning parameters but it was cutting into the animation.

[neworigin]

After looking around a bit more seemed like a better approach is to put elements into into separate timelines looping them individually with repeatDelay. Tried this but because I want the the number (45) to display longer then the bars its starts to get out of sync. Is there a way to use labels and maybe control the loop at specific times? 

 

See the Pen zYwLqmj by neworigin (@neworigin) on CodePen