Timeline with fixed duration

[BlackPixel]

Hi guys,

 

im very new to the timelineLite lib. I build a stage with a ui slider, where i can check the animation of the placed elements in the stage (it`s a part for a slider editor.). Now each slide had an fixed duration, a duration in and a duration out. The layers on this slide can have their own duration time. At the end this get this time based configuration, for example:

 

1s slide duration in

6s for layer animation

1s for slide out

 

layer 1 fade in duration 3s

layer 2 fade in duration 10s

 

The result on the slider is, that layer 2 is faded in for 6 seconds, an then it gets faded out, before the visibility is 100%.

 

Now on my animation stage, the root timeline has to run for 6 seconds. the child timeline has to run for 10 seconds, important for me are only the first 6 second. How can i adjust the root timeline for running only 6 seconds and stop after the time, and layer 2 is only visible for 60%?

 

Another example:

layer 2 runs for 3 seconds. The slide is visible for 30 seconds. Now my timeline is only 3 seconds in time. When i set the duration to 30 seconds, layer 2 fade in is for 30 seconds, instead of 3.

 

How can i separate the root timeline duration and the layers duration? Hope my question is clear...

 

Many many thanks for some tips!

[PointC]

Hi BlackPixel ,

 

Welcome to the forums. 

 

I'm having a little difficulty understanding all aspects of your question. If you could make a CodePen that would be great. Everyone can then see your code in action and give you the best answers. It can just be a simplified version of your actual project using plain colored divs etc...

 

Here are instructions on how to make a CodePen:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

In the meantime, I think this thread can help you:

http://greensock.com/forums/topic/13303-slides-animation-for-bootstrap-carousel/

 

For sliders, you'll find a great pen from Blake here:

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

Diaco has some really cool examples here:

See the Pen XmozON by MAW (@MAW) on CodePen

See the Pen yYradO by MAW (@MAW) on CodePen

 

Hopefully that gets you started, but as I mentioned, a CodePen would be very helpful in getting you the best answers.

 

Happy tweening.  

[Tahir Ahmed]

Hi @BlackPixel, Welcome to the forums!

 

This is a lot to comprehend, at least for me personally, and I would strongly recommend you to create a demo for us to better understand your problem so that we are able to propose a solution to it. By the sounds of it, the solution could be simple but we need an example to work with.

 

Take a look at this post on how to create a Codepen demo with GSAP loaded in it. You can then include your minimalist code example of what you are trying achieve.

 

Let us know.

[Carl]

Hi and welcome to the GreenSock forums,

 

Just like PointC above, I'm really struggling to understand this. Not sure what a layer is or how it relates to a slide.

With no code to see, its literally impossible to suggest an alternate approach.

 

However, I can offer the following:

 

1. Changing the duration (or timeScale) of a parent timeline will absolutely impact the duration of all its child tweens and timelines. 
2. After seeing a reduced test case that clearly illustrates what you are trying to do I'm confident we will be able to suggest some alternative approaches that yield the desired results.