TimelineMax: Run animation throughout other animations

[tobiasger]

I'm wondering if it's possible to set a starting point of an animation in TimelineMax at the start of a collection of certain other animations and have that gradually animate to the end point when the same collections of certain other animations stops? I could set the duration to be the same as all the animations, but it would be nice to do this dynamically without having to calculate the total duration of the other animations.

 

I've made a visualisation for this to explain what I mean.

 

[GreenSock]

I'm not sure I totally understand what you're asking here, but if you're struggling with the calculation of the duration of a group of other animations (like if you feel the need to loop through them and calculate things), it should be as easy as just grouping those into their own TimelineLite/Max instance so that you can get the totalDuration() of that one instance. Remember, timelines can be nested within other timelines as deeply as you want. 

//just a sample with pseudo code...
var subTimeline = new TimelineLite();
subTimeline.to(...).to(...);
masterTimeline.add(subTimeline, "yourLabel");
masterTimeline.fromTo(element, subTimeline.totalDuration(), {x:25}, {x:100}, "yourLabel");

 

Or you could get the endTime() of the last animation and subtract the startTime() of the first animation and that'd give you the total duration for your other animation. There are lots of ways to do this. 

 

We wouldn't really want to make durations auto-adjust and "watch" other animations because that'd really hurt performance. If you haven't gathered this already, we're HYPER-concerned about performance because animation is probably the most UX-sensitive part of a site. 

 

Does that help at all? 

 

(by the way, thanks for taking the time to create that image)

[tobiasger]

Thanks for your answer!

This is the code for the Timeline so far:

 

.to([".message"], 1, { className: "+=is-hidden" }, "in1")
.to(["#1 .inner"], 10, { css: { scaleX: 0.65, scaleY: 0.65 } }, "in1")
.to(["#1 .inner .image-caption"], 1, { className: "-=is-hidden", delay: 7 }, "in1")

//FLOWERS
.to(["#1 #flower-top-left"], 10, { x: -100 }, "in1")
.to(["#1 #flower-top-right"], 10, { x: 200, y: -200 }, "in1")
.to(["#1 #flower-bottom-left"], 10, { x: -75, y: 75 }, "in1")
.to(["#1 #flower-bottom-center"], 10, { y: 200 }, "in1")
.to(["#1 #flower-bottom-right"], 10, { y: 50, x: 50 }, "in1")

.to(["#1 .inner"], 10, { css: { scaleX: 1, scaleY: 1 }, delay: 2 }, "out1")
.to(["#1 .inner .image-caption"], 1, { className: "+=is-hidden", delay: 3 }, "out1")

Basically I want the "Flowers"  to start at the label "in1", like they do now, but I want the animation of the flowers to begin with their x and y values at 0, and then end at the values that are set right now in the above code snippet when the animations labeled "out1" are finished. I'm sure that I'm not thinking straight and all suggestions for doing this the correct way would be appreciated.

[GreenSock]

Yeah, there are a bunch of ways to do this, but I generally like to modularize my animations in functions for flexibility, so it might look like this for you (I assumed your timeline variable was "tl", but I have no idea if that's true so edit accordingly):

.to([".message"], 1, { className: "+=is-hidden" }, "in1")
.to(["#1 .inner"], 10, { css: { scaleX: 0.65, scaleY: 0.65 } }, "in1")
.to(["#1 .inner .image-caption"], 1, { className: "-=is-hidden", delay: 7 }, "in1")

//FLOWERS USED TO BE HERE...

.to(["#1 .inner"], 10, { css: { scaleX: 1, scaleY: 1 }, delay: 2 }, "out1")
.to(["#1 .inner .image-caption"], 1, { className: "+=is-hidden", delay: 3 }, "out1")

//BUT I JUST ADDED THEM HERE INSTEAD SO THAT ALL THE OTHER ANIMATIONS ARE IN THERE AND WE CAN QUERY THE DURATION...

  .add(flowersAnimation(tl.duration() - tl.getLabelTime("in1")), "in1")

function flowersAnimation(duration) {
    var tl = new TimelineLite();
    tl.to(["#1 #flower-top-left"], duration, { x: -100 })
    .to(["#1 #flower-top-right"], duration, { x: 200, y: -200 }, 0)
    .to(["#1 #flower-bottom-left"], duration, { x: -75, y: 75 }, 0)
    .to(["#1 #flower-bottom-center"], duration, { y: 200 }, 0)
    .to(["#1 #flower-bottom-right"], duration, { y: 50, x: 50 }, 0);
    return tl;
}

 

I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/

 

The getLabelTime() method is documented here: https://greensock.com/docs/TimelineLite/getLabelTime()

 

Does that help? 

[tobiasger]

Thank you so much for the help! Really helped me understand the way it works.