Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NicolasJ

Add logic at half animation

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

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.

 
Link to comment
Share on other sites

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.

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

 

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});
  • Like 4
Link to comment
Share on other sites

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

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.

×