Jump to content
GreenSock

mimeartist

Amplify Tween...

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've got a tween of a flag...

 

TweenMax.fromTo('#flagImage'+ whichFlag, theSpeed, {
    rotationX:20,  transformOrigin:"left top"
},{
    rotationX:-20,
    repeat: -1,
});
 
}
 
 
Which basically flaps backwards and forwards... is there a way of amplifying the rotationX so that the tween still continues... but I can increase it by a factor, e.g. double it when I need to? or intact tween that value of rotation X, so it slowly goes from tweening rotationX=20 to rotationX=60 for example?
 
James
Link to comment
Share on other sites

Hi James,
 
The best way would be to either start a new instance at the previous current time or kill and create the current instance again using a function. Keep in mind that because how GSAP works both options send the previous tween to GC immediately and efficiently.
 
In the first scenario (creating a new tween affecting the same target and properties) GSAP's overwrite manager gives control to the latest tween and send the previous to GC:

TweenMax.fromTo("#flagImage"+whichFlag, theSpeed,
{
  rotationX:20, transformOrigin:"left top"
},
{
  rotationX:-20,repeat:-1
});

//later on your code you create the new tween starting it at the previous current time
function newTween()
{
  var currentTIme = TweenMax.getTweensOf("#flagImage"+whichFlag).pause().time();
  // create new tween
  TweenMax.fromTo("#flagImage"+whichFlag, theSpeed,
  {
    rotationX:20, transformOrigin:"left top"
  },
  {
    rotationX:-20,repeat:-1
  }).time(currentTime);
}

The second choice is somehow similar:

var t;

function createTween(rotationValue)
{
  //check if the tween has been created
  var startTime = t ? t.time() : 0;

  t.kill();
  
  t = new TweenMax.fromTo("#flagImage"+whichFlag, theSpeed,
  {
    rotationX:rotationValue, transformOrigin:"top left"
  },
  {
    rotationX:-20,repeat:-1
  }).time(startTime);
}

// create the first tween
createTween(20);

//later on your code or in an event handler create the new tween 
createTween(60);

Also I'm pretty sure someone else will come up with a better solution for this, there are plenty of mad geniuses hanging around in this forum ;)

 

Hope that helps,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Thanks Rodrigo,

 

Sorry I haven't replied sooner... I thought I was being notified when a reply came in, but just saw this by chance... will have a look and see how I get on

 

James

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.
×