Skip to content

[FEATURE] nesting animate function #2140

@sukjae

Description

@sukjae

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 duration

Additional 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 A should start and an animation B should 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 second

https://greensock.com/docs/v3/GSAP/Timeline

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or requestwontfixThis will not be worked on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions