Jump to content


Nested Timeline Class idea question

Moderator Tag

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 have an app where SVGs can be dropped onto the stage and animated in various ways to build a complete animation. I'll want to give the user ability to chain together Tweens on each SVG and play them all together. There will, of course, be a main Timeline.


My thought is that for each SVG that gets dropped onto the stage, create a new NestedTimeline class that would contain the Timeline, the element to be tweened on that timeline and then push tweens into it. I would add each of those Timelines to the main one. When the play button is clicked, the main timeline would play. 


I'm just trying to keep from painting myself into a corner. I know I've seen custom one-off timelines where various elements are tweened within the same timeline. I just don't know of a way to automated that without things getting pretty messy.




btw, I plan to try to build something like the Timeline Visualizer lot's of folks are wishing you guys would turn into a control tool - hint, hint   ;-) When a new item is dropped onto the stage, a new track would be added to the visualizer.

Link to comment
Share on other sites

I would build the actual animations on demand. I think it will be hard to visually edit an animation if you try building your timelines/tweens in real-time. It's going to be much easier changing properties or grouping different animations into child timelines by using objects/classes to represent your animations. GSAP follows a set of rules, so constructing a visual timeline without an actual timeline is possible.

Link to comment
Share on other sites

Here's a timeline controller I made when I first started using GSAP. It was only meant to be demo, so I didn't go all out and and show all the child animations. It's written in Angular, but you might be able get some ideas from it. Most of the timeline code can be found in the playback.service.js file on the left panel.


Link to comment
Share on other sites

Wow, Blake. The timeline controller is awesome! Gonna study that for ideas for sure! This is strictly an SVG animator. We'll probably add text later.


As for animations, there will be 3 tabs - "In animations", "On stage animations" and "Out animations". (there can be multiple SVGs on the stage and each independent of the others) Clicking any of the 3 tabs will reveal a set of preset buttons with options to add various tweens to that timeline (in, on stage, out) for any selected SVG on the stage like:


In animations:

  • Duration (using a form field or slider element)
  • "In from" (top/left, bottom/right, appear in place, etc)
  • Other add-on "In" animations (rotate, scale-up, scale-down, etc)
  • Ease options, etc

On stage animations:

  • Duration
  • DrawSVG (would make most sense if the in animation was 'appear in place')
  • Any other options we can think of while the item is 'on the stage'

Out animations:

  • Duration
  • Draw out
  • Fade out
  • Exit right, exit left, etc
  • Other add-on "Out" animations (rotate, scale-up, scale-down, etc)

So, the user will have a set of options limited to whatever presets are available. The idea is to keep it simple and offer as many combinations as we can. Feature creep could become a nightmare with this though, if I don't assemble things in the right way.

Link to comment
Share on other sites

I'm brand new here, just joined last month. I want to animate entire web pages...rotate-in, flip,..slide up/down. I suspect It's possible, but how? using TweenMax?

I don't even know how to start. I'm ok with SplitText now. Works great. But the entire page animation? No clue. ANY suggestions would be most appreciated. Is this the right forum for this question?



Link to comment
Share on other sites

Hi Theo :)


Welcome to the forums and thank you for joining Club GreenSock. You're gonna love it.


Everything you're describing is certainly doable. As far as where to start - I'd recommend the GSAP Jump Start Guide:




Also take a look at the GSAP Jump Start collection on CodePen:




Other than that, start hanging out in the forums to learn from other questions/topics and code some practice animations of your own. Create a few plain divs and start making them move. When you have a specific question or problem, create a CodePen for us and post your question. We'll be happy to assist you.


It's always best to start a new topic when you have question. That will get you the most attention and quickest answers rather than posting on someone else's thread.


Happy tweening and welcome aboard.


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