Simultaneous transform tweens on an object

[Em Karimifar]

Hi all,

 

I have one transform tween being applied to an object on mousmove event: 

 

TweenMax.to("#colon", 0.1, {attr:{transform: "matrix(0,1,-1,0, "+(100+moveX) +","+ (50+moveY)+")"}})})

 

and one infinite timeline that tweens the scaleX (kinda like a blinking animation):

 

var tl = new TimelineMax({repeat: -1});
tl.to("#colon", 0.1, {scaleX:0, transformOrigin: "50% 50%"}, "+=2")
.to("#colon", 0.1, {scaleX:1, transformOrigin: "50% 50%"})

 

Now the problem is whenever the scaleX tween happens it resets the matrix transform of the object (causing a glitch I don't want!).

Is there any way to solve it so that the infinite timeline factors all the movements happening from mouse move event?

 

Thanks,

See the Pen bmomqb by EmAustin (@EmAustin) on CodePen

[OSUblake]

Hi @Em Karimifar

 

You should always let GSAP handle transformations you plan to animate. When you change the transform attribute, it's going to conflict with the matrix GSAP is going to set with the blinking. It's also going to mess up the transform origin.

 

Is there a particular reason you're using text for circles? The alignment is a little funky. I would use regular circles, and wrap them in a <g> element.

 

See the Pen PyJyMq by osublake (@osublake) on CodePen

 

 

 

There's a problem with that animation. Depending on the screen dimensions, the eyes might move only a little bit, or too much. Assuming your SVG maintains the same aspect ratio, this version will clamp the eye movement on the x-axis to the width of the SVG, and the movement on the y-axis from 10% to 50% of the SVG height.

 

See the Pen EdwOor by osublake (@osublake) on CodePen

 

 

 

And here's a good thread that shows how to work with mouse coordinates inside an SVG.

 

 

 

 

 

 

 

 

 

[Em Karimifar]

Thank you @OSUblake

It's actually part of a bigger svg and yes the circles MUST be a text element. The tracking movement is a bit funky in my pen because I cut out some code to make it more concise. 

 

Is there any way to fix it with the same html? 

 

[OSUblake]

Yeah, just rotate the text. 

 

See the Pen yRzZqg by osublake (@osublake) on CodePen

 

 

[Em Karimifar]

@OSUblake Awesome! exactly what I was looking for! Thanks a lot

[beau_dev]

On 10/14/2018 at 11:34 PM, OSUblake said:

Yeah, just rotate the text. 

this is a bit of genius

 

See the Pen yRzZqg by osublake (@osublake) on CodePen