Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Em Karimifar

Simultaneous transform tweens on an object

Recommended Posts

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?



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

Link to post
Share on other sites

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.










  • Like 5
Link to post
Share on other sites

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? 


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.