Jump to content
Search Community

Conditional Tween

danbopes test
Moderator Tag

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'm using a timeline currently like a queue system. Based on events from a server, I'm displaying animations, by just adding them to the timeline.

 

I'd like to add a function to the timeline which control what animations it does next (If it should fade out some image, or tween out some other images). I can't do this outside of the timeline, because variables could be changed, (For instance, if I queue up some open/close animations in between.)

 

I looked to add things to the front of a timeline, but it doesn't affect the other items in the timeline, and can cause some things to overlap. Returning a tween/timeline from a function() also does nothing, and I'm a bit stumped on how to proceed.

 

Any ideas?

Link to comment
Share on other sites

Sorry, but I'm having a difficult time visualizing what needs to be done and understanding the restrictions.

 

A general principle to follow with timelines is that since they take so little time and effort to build, its best to generate the animations the way you want them when you want them as opposed to building a super long timeline and then somehow injecting logic branches at certain intervals or trying to change the values in existing tweens. 

 

The best advice I can give you without seeing any of your code is that you may want use functions that return timelines that have onComplete callbacks that call functions to determine what the next animation should be.

 

I know that can be a bit vague, but the best way for us to help you is to see something that roughly simulates your setup using as little code as possible in a CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 1
Link to comment
Share on other sites

Hi danbopes  :)
 
I'd echo Carl's advise , about making Demo . but if i understood correctly , you can use .shiftChildren() method , like this :
var condition = 1 , tl = new TimelineMax();

tl.to("#redBox",1,{x:500})
  .to("#blueBox",1,{x:500});

if( condition ){
  tl.shiftChildren(2)
  .from("#blueBox",2,{x:100},0);  
}
 

See the Pen YXBeGL by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

 

 

The best advice I can give you without seeing any of your code is that you may want use functions that return timelines that have onComplete callbacks that call functions to determine what the next animation should be.

 

How would I go about doing this. When the onComplete event would fire, I have a main timeline which has things that has animations queued. If I try and inject something at the beginning of the timeline, things get pushed back. If I try and add them to the current timeline (In which the event would be called), it get's run on top of the main timeline. Is there a way to add something to the front of an animation queue, and push the rest of the items down?

Link to comment
Share on other sites

 

Hi danbopes  :)
 
I'd echo Carl's advise , about making Demo . but if i understood correctly , you can use .shiftChildren() method , like this :
var condition = 1 , tl = new TimelineMax();

tl.to("#redBox",1,{x:500})
  .to("#blueBox",1,{x:500});

if( condition ){
  tl.shiftChildren(2)
  .from("#blueBox",2,{x:100},0);  
}
 

See the Pen YXBeGL by MAW (@MAW) on CodePen

 

 

This may just work. Also: (Carl), it would be nice to have the following (For event driven timelines):

 

If I add a function callback that return a tween, should be prepended onto the timeline, and run after the function callback. Another thing that would be helpful, is just a way to prepend an item to the timeline (Which would automatically move children down as necessary).

Link to comment
Share on other sites

If I add a function callback that return a tween, should be prepended onto the timeline, and run after the function callback. 

 

 

Sorry, I'm having trouble following that. I would really need to see some code or have a clearer explanation.

 

---

 

Another thing that would be helpful, is just a way to prepend an item to the timeline (Which would automatically move children down as necessary).

 

 

Yeah, that's sort of what Diaco suggested with  shiftChildren()  (but not automatically). I can see your point about it being convenient, but frankly its quite rare that you need to do it and we are very careful about bloating the API with new methods when the same behavior can already be achieved. Don't get me wrong though, we love hearing these suggestions.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I think this is going to become a much more highly requested feature as mobile quickly takes over the world.

 

I'm making an an animation where on desktop it animates almost exactly the same as it does on mobile. It is a fairly complex animation with many tweens in the time line. The easiest way to make the tiny alterations to the mobile version of the animation is to make a complete copy of the time line and then alter the copy while leaving the original in tact. This is absolutely terrible for maintainability though since it introduces a huge amount of code repetition. Yuck! XP

 

This is how I imagine a conditional tween could be introduced into GSAP:

var a = 1;
var b = 2;

var TL =  new TimelineMax();

TL
    .to('#element', 1, { opacity: 1 })
    .to('#element', 1, { scale: 2, condition: a == b }) //if a = b include this in the timeline, else ignore this step
    .to('#element', 1, { opacity: 0 })
;

This is how I currently do the equivalent of that (note the code repetition in the first and last steps):

var a = 1;
var b = 2;

var TL =  new TimelineMax();

if (a ==  {
    TL
        .to('#element', 1, { opacity: 1 })
        .to('#element', 1, { scale: 2 })
        .to('#element', 1, { opacity: 0 })
    ;
} else {
    TL
        .to('#element', 1, { opacity: 1 })
        .to('#element', 1, { opacity: 0 })
    ;
}

The .shiftChildren() method sounds like it works but it's extremely unintuitive and confusing, especially if you have to do it with a timeline with a huge number of steps in it. We really need a simple out-of-the-box way of doing conditional tweens directly in a GSAP timeline.

  • Like 1
Link to comment
Share on other sites

What's so hard about this?

tl.to('#element', 1, { opacity: 1 });

if (a ==  tl.to('#element', 1, { scale: 2 });

tl.to('#element', 1, { opacity: 0 });

Use labels and you won't have to split the method chaining up like that. That would allow you to add all the conditional tweens at the end of your code block.

  • Like 1
Link to comment
Share on other sites

The problem with using labels is that it doesn't push out the tweens that follow it. so in the example, if you used labels, the scale:2 would happen at the same time as the opacity:0 instead of the opacity:0 happening after the scale:2.

 

Your solution with the little if statement in the middle does work though and it's intuitive. It's not quite as neat and tidy as having a "condition" variable in the animation object though.

  • Like 1
Link to comment
Share on other sites

If you have a lot of conditional stuff, you might want to use an array like that queuing example I made. That would allow you to do stuff like filtering out things you don't need, changing the order, or mapping new values. Here's a very basic example where I run the array through a loop, adding tweens based on a simple condition flag.

 

See the Pen dd7b66afaea0a38c39bc904af7aa06eb?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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