TimelineMax - Specify timeline in MS for each animation, regardless of Tween durations

[fastraxpos]

Hello,

 

I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework.

 

Background Details

I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide.

 

I have a JSON object below which represents how I format my object before passing it to my functions to animate.

{
   "entrance":{
      "900":[
         {
            "layerId":"HLS2-3033-N25V",
            "animation":"bounceInLeft",
            "speed":0.49,
            "time":900,
            "easing":"Power1.easeIn"
         }
      ],
      "1700":[
         {
            "layerId":"5MBE-0R7G-65NK",
            "animation":"zoomInDownRotate",
            "speed":0.9,
            "time":1700,
            "easing":"Power4.easeOut"
         }
      ]
   },
   "exit":{
      "4800":[
         {
            "layerId":"HLS2-3033-N25V",
            "animation":"slideOutLeft",
            "speed":0.49,
            "time":4800,
            "easing":"Power1.easeIn"
         }
      ],
      "6900":[
         {
            "layerId":"5MBE-0R7G-65NK",
            "animation":"slideOutLeft",
            "speed":0.9,
            "time":6900,
            "easing":"Back.easeInOut"
         }
      ]
   }
}

This array above is sorted by Entrance and Exit animations, and in each of these I have indexes by MS timings from 0 - 10000 (0-10s)

 

I obtain the animation details using the name, and it returns in a structure like below, which I use to produce my single animation on one element nicely.

{
   "name":"bounceInLeft",
   "type":"Bouncing",
   "stageType":"entrance",
   "defaultDuration":0.35,
   "defaultEasing":"Power1.easeOut",
   "series":[
      {
         "x":"{elementOuterStartLeft}",
         "opacity":0,
         "duration":0.8,
         "ease":"Elastic.easeOut.config(.85, 0.4)"
      }
   ]
}

So with these 2 pieces, I run my animation for a single layer using TimelineMax and then I loop through the series of the animation keeping the first index using timeline.from() with my parameters, while any other index in the series array is using timeline.to()

 

My question is this:

 

Knowing when each of the animations are going to begin, using the MS indexes in my above format, can I "schedule" the tweens to play when the MS is reached in the 0-10s interval?

 

How would I implement this using purely your framework? I would essentially add a from/to for each animation series item, whenever the animation is called and it's timing matches the current point in the 0-10s interval.

 

I'm trying to utilize this similar to the example on your CodePen : so that I can control pause, play, and the timing range for the animation as a whole (for all my elements being animated)

 

Let me know if you need further clarification.

 

Thanks,

Justin

See the Pen zinsg by GreenSock (@GreenSock) on CodePen

[OSUblake]

Make a demo. And what is that the speed value for? I think I understand what you're asking, but it's hard to advice without seeing how you're calling or consuming it. Make it simple. I'm not interested in the details of how this works, just a broad overview.

 

Overall, I would say that it's just a matter of getting your MS object keys, dividing them by a 1000, and then using those for the position parameter on a root timeline.

[fastraxpos]

I think you actually answered my question in your last sentence. I saw the position page in search but I assumed it was positioning in terms of x, y, z, and not timing. I just watched your video and I see the 4th parameter (position) lets me define a start time for each animation I want to run.

 

I'll let you know when I've implemented and have the result.

 

Sorry for not providing a code pen, I have too many functions I don't want shared in this case, so let me get back to you.

Thanks,

Justin

[Jonathan]

Hello fastraxpos and Welcome to teh GreenSock forum!

 

Here is a video to on how to use the position parameter