-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Closed
Labels
featureNew feature or requestNew feature or requestwontfixThis will not be worked onThis will not be worked on
Description
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
not a problem
Describe the solution you'd like
A clear and concise description of what you want to happen.
The API I'm imagining
const animation1 = animate(sequence)
const animation2 = animate(sequence)
const animation3 = animate(sequence)
const mergedAnimation1 = animate([{animation: animation1, repeat:3}, {animation: animation2, repeat:3, at:0}])
const mergedAnimation2 = animate([{animation: animation3, repeat:2}, {animation: mergedAnimation1, repeat:2, at:1}])
mergedAnimation2.time = SOME_TIME
mergedAnimation2.duration // total durationAdditional context
Add any other context or screenshots about the feature request here.
a necessary reason
- If you want to manage the whole animations as single controller (ex: setting time or speed) in a complex animation
- If you want to give a different repeat option in a complex animation
- If you want to interdependently change the play point between complex animations (if you want to specify at the sequence level) (For example, an animation
Ashould start and an animationBshould run after 1s (like a stagger))
Similar examples: nesting timeline in gsap
Nesting
Nest timelines within timelines as deeply as you want. This lets you modularize your code and make it more maintainable. For example, you could build your animation in sections and stitch them together in a master timeline like:
function intro() {
var tl = gsap.timeline();
//...add animations here...
return tl;
}
function middle() {
var tl = gsap.timeline();
//...add animations here...
return tl;
}
function conclusion() {
var tl = gsap.timeline();
//...add animations here...
return tl;
}
// stitch them together in a master timeline...
var master = gsap.timeline();
master.add(intro())
.add(middle(), "+=2") //with a gap of 2 seconds
.add(conclusion(), "-=1") //overlap by 1 secondReactions are currently unavailable
Metadata
Metadata
Assignees
Labels
featureNew feature or requestNew feature or requestwontfixThis will not be worked onThis will not be worked on