dwyermt

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.

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

Awesome, thanks.

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})

Awesome, thanks!

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.

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?