Add logic at half animation

[NicolasJ 2 Likes (Newbie)]

Hello,

 

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});

best.

 

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

My first choice for this would be a timeline:

var tl = new TimelineLite();

tl
  .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,
  {
    rotationY:180
    onUpdate:upFN
  });

function upFN()
{
  var time = Math.round( t.time() * 10 ) / 10;
  $("#div1").html(time);
  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

 

Rodrigo.

[Carl 9,066 Likes (Superhero)]

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.

 

http://codepen.io/GreenSock/pen/KLeHk?editors=101

 

 

-- 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});

[NicolasJ 2 Likes (Newbie)]

Hello Rodrigo, Carl,

 

Many many thanks for these examples.

This was exactly what I was looking for.

 

Now, we do not know what to choose

 

Nicolas