Jump to content
Search Community

Add logic at half animation

NicolasJ test
Moderator Tag

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 would like to know if there is way to execute any logic at half animation.

For example :

TweenLite.to($(item), 3, {rotationY: 180});

and at 1.5 s. execute :

TweenLite.set($(otherItem), {alpha: 0});


Link to comment
Share on other sites



My first choice for this would be a timeline:

var tl = new TimelineLite();

  .to($(item), 3, {rotationY:180})
  .set($(otherItem), {alpha:0}, 1.5);

Now if for some reason using a Timeline is not an option you could attach some conditional logic to an onUpdate callback:

t = TweenLite.to($(element), 3,

function upFN()
  var time = Math.round( t.time() * 10 ) / 10;
  if(time === 1.5)
      TweenLite.set("#div2", {autoAlpha:0});

I've set up a simple codepen:


See the Pen shvkI by rhernando (@rhernando) on CodePen



  • Like 3
Link to comment
Share on other sites

Ah, Rodrigo slides in right before me again! ;)


I'll offer a little twist to his first option and make the insertion halfway point dynamic


var tl = new TimelineLite()

tl.to("#redBox", 4, {x:550, ease:Linear.easeNone})
.set("#redBox", {opacity:0.4, rotation:45}, tl.duration() * 0.5) //insert this set() at half duration()

The set above works on redBox but it could be any other element, of course.





-- or if you don't need to control this little sequence (play, pause, reverse)


You could just do this:

var duration = 3;
TweenLite.to($(item), duration, {rotationY: 180});
TweenLite.set($(otherItem), {alpha: 0, delay:duration/2});
  • Like 4
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.
  • Create New...