Jump to content


Update x in TweenMax after rotating animation trajectory by 20 deg.

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I have a TweenMax that is has x initialized to 1332px. It's a simple animation from left to right along a 1332px long div.

var tl2 = TweenMax.to(document.getElementById('point'), 1.5, {
	y: 0,
	//repeat: 1,
	//onRepeat: playSound,
	yoyo: true,
	repeatDelay: 0,
	ease: Power0.easeNone,
	paused: true

x gets set dynamically based on width of screen.


At some point i'm rotating the div within which it runs by about 20 degrees so it can run from bottom left to upper right corner.

To do than I'm trying to 1424px (just for the sake of argument, that's what I'm getting on one particular laptop):

var pwa = $('.pointWorkArea');
'width' : someCrossLengthInPX /* change the width of div where animation runs */
'transform' : 'rotate(' + eyeBaller.settings.crossAngle + 'deg)'

}).css({'left' : -pwa.position().left});

tl2.updateTo({ x : someCrossLengthInPX });

... however, I'm not seeing the change in DISTANCE the animation runs at. It rotates fine, but keeps running at the old side to side distance and not corner to corner.

Any ideas?


Link to comment
Share on other sites

Done, it was easier than I thought it would be :-)


See the Pen bNZERp by henripablo (@henripablo) on CodePen


So the update i'm struggling with is on line 165 of the JS part of the pen.


Use case would go like this:

1 - click the START button

2 - once the ball is running, click the far right square ( showing a diaagonal line from top left to bottom line corner ) of 'Profile' section

Now the trajectory will rotate a few  degrees.


The issue is most apparent when the pen is running in full screen mode.

Link to comment
Share on other sites

  • Solution

Hi tomekpilot


UpdateTo isn't working because x is a CSS-Plugin value. Don't worry, I got confused by what it does when I first started using GSAP.


So what you need to do is to create another tween with your new x value. I updated your profile2 function showing how to do this while putting everything inside a new timeline. 


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

  • Like 4
Link to comment
Share on other sites

... that's funny, I was coming to the same conclusion that there might have to be a different, brand new tween created to do this :-) Thanks!

PS, just looked over your addition, it makes sense :-)

  • Like 1
Link to comment
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.