[animating symbols transformed with matrices]

In illustrator, when a symbol is reflected, the transform changes to a matrix. Animating symbols transformed with matrices produces something very different than animating the same symbol with transform attributes such as scale, rotate, translate, etc. 

 

Any way around this?

 

Edit: Ok, I just read the SVG gotcha post and see that my problem is not using the attr plugin to animate elements in <defs> tags.

See the Pen grXKRa by dwyermt (@dwyermt) on CodePen

[SCSS color variables]

Can't figure out how to use color variables within GSAP. Tried with and without quotes, single quotes, etc. 

See the Pen VerbmQ by dwyermt (@dwyermt) on CodePen

[SteppedEase with SVG?]

Not sure what it's supposed to look like...

See the Pen yegJyL?editors=101 by osublake (@osublake) on CodePen

 

To do a sprite sheet animation with SVGs, separate your frames into individual elements, stack them on top of each other, and then set their autoAlpha to 0. To animate them you just toggle the autoAlpha of frames.

Awesome, thanks.

[SteppedEase with SVG?]

Not sure how to implement SteppedEase with an SVG image.

 

I made a fireball graphic with 5 different states, each image is separated by 120px width, total 600px. I can scroll through them with backgroundPosition, but how do I do the same thing with SVG?

 

First off, I modified the viewBox's width to 120 from 600. This only shows one of the fireball images.  Then i used the same code as the PNG, but it just scrolled through the same graphic. I tried something different, like using the same idea for the viewBox, but that didn't work out. 

 

tl.to($fireball, 0.2, {attr:{viewBox: "0 0 -480 174"}, ease:SteppedEase.config(4), repeat:10})

 

 

 

 

 

See the Pen YwNwNo by dwyermt (@dwyermt) on CodePen

[Centering an animation on a selected element]

Is this what you are after?

 

See the Pen rxxPJY by sgorneau (@sgorneau) on CodePen

Awesome, thanks!

[Centering an animation on a selected element]

PointC, almost, but for example, I want to click on the first box, then click my animate button. The animation will then play on the first box. But if I click on the second box, the animation will play in the second box instead of the first.

[Centering an animation on a selected element]

This is my first post, so excuse the newb question. I want to select a div element (box), and when I click on my animate button, I want the animation to play on top of that element. Until now, I've just been animating static animations and have almost no experience with javascript. Is there a simple solution for this?

 

 

 

See the Pen EPPvyP by dwyermt (@dwyermt) on CodePen