Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fastraxpos

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

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Hello fastraxpos and Welcome to teh GreenSock forum!

 

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

 

 

:)

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.
×