Jump to content
Search Community

how Add relative time, and new label

Rollrodrigz test
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

Hi everyone i have this

 
delayEntreEscenas=2// THIS WAY I MADE A DELAY

tl_EscenasControl=new TimelineMax(//IT IS MY PARENT TIMELINE.
{
paused:false,
onStart:onStart_escenas,
onUpdate:onUpdate_escenas,
onComplete:onComplete_escenas
//align:'start', // WHY IT DONT WORK??
//stagger :5, WHY IT DONT WORK??
//delay :1 WHY IT DONT WORK??

});
tl_EscenasControl.add(control_escena1(),0)//I ADD THIS TIME LINE 
tl_EscenasControl.add(control_escena2(),'+='+delayEntreEscenas) //HERE IS MY VARIABLE DELAY

.
.
.

function control_escena2(){HERE IS MY SON TIMELINE}
.
.
.

i wanna .add a new time line with relative delay and add a new laber at time

tl_EscenasControl.add(control_escena7(),'myFocusLabel', '+='+delayEntreEscenas)

 to do this

tl_EscenasControl.play('myFocusLabel')

i tryed this

tl_EscenasControl.add(control_escena7(),'myFocusLabel+='+delayEntreEscenas) // DONT WORK

i have 10 buttons to jump in

tl_EscenasControl.play('myFocusEscena').

any idea?? 

 

Thank you

 

 

 

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

Sorry to hear you are having a little trouble. I'll do my best to help you through it.

First regarding why "align" and "stagger" don't work in your timeline constructor. Those values only apply to tweens that add inside your constructor as well.

The docs make note of that in the special properties section ie:

 

stagger : Number - Only used in conjunction with the tweens special property when multiple tweens are to be inserted immediately.

An example of using the tweens special property would be:
var tween1 = TweenLite.to(something, 1, {opacity:0});
var tl = new TimelineLite({tween:[tween1, TweenLite.to(elem, 1, {left:200}], align:start, stagger:5}

notice the array of tweens.

I do not know why setting the delay in the constructor did not work. That is not expected. If you still think delay isn't working after reading all this, please provide an example and we will help you sort it out.

For the next part of your question, regarding adding a timeline relative to a label that doesn't yet exist, yes you can do that if you want the label at the end of the timeline



tl.add(getTimeline(), "someLabel+=" + myDelayVar);

I can't tell exactly what you are trying to do from the code fragments you provided, but I created a small demo that should illustrate most of the techniques you want to use:



var blue = $(".blue"),
      red = $(".red"),
      myDelay = 1,
      mainTimeline = new TimelineLite({delay:1});

//main timeline has 1 second delay
//add blue timeline

//add red timeline 1 second after redLabel using myDelay variable

mainTimeline.add(getBlueTimeline())
   .add(getRedTimeline(), "redLabel+=" + myDelay);

function getBlueTimeline() {
  var blueTimeline = new TimelineLite();
  blueTimeline.to(blue, 0.5, {left:100})
  .to(blue, 0.5, {rotation:360});
  return blueTimeline;
}

function getRedTimeline() {
  var redTimeline = new TimelineLite();
  redTimeline.to(red, 0.5, {left:100})
  .to(red, 0.5, {rotation:360});
  return redTimeline;
}

Here is a live demo:

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



Let us know if you have any more questions.

Link to comment
Share on other sites

[edit] for clarification the second paragraph should read:

 

First regarding why "align" and "stagger" don't work in your timeline constructor. Those values only apply to tweens that are inside your constructor as well.

Link to comment
Share on other sites

Thank you for your help, this is a short version of my code.

 

this is how i need to work, i'm reading the doc and dont find the way to do.

(sorry.my english is not so good)




tl=new TimelineMax({paused:false});
//add 3 animations with a 2 seconds relative delay each one
tl.add(control_escena1(),0)//start at second 0
tl.add(control_escena2(),'+=2')//start at second 2
tl.add(control_escena3(),'+=2')// start at second 4


//when the animation finish i have 3 buttons to jump in each animation, those work but no so well
$(click_1).click(function(){
tl.seek(0) // or tl.play(0), it say to jump the second 1 and play 
})
$(click_2).click(function(){
tl.seek(2) // or tl.play(2), it say to jump the second 2 and play 
})
$(click_3).click(function(){
tl.seek(3) // or tl.play(3), it say to jump the second 3 and play 
})


// i wan to do it
$(click_1).click(function(){
tl.seek('escena_1') // or tl.play('escena_1'), it say to jump until de escena_1 and play 
})


$(click_1).click(function(){
tl.seek('escena_2') // or tl.play('escena_2'), it say to jump until de escena_1 and play 
})
// but i dont know how add a label to say my button where to jump,it should be something like:
tl.add(control_escena1(),'escena_1',0)//start at second 0
tl.add(control_escena2(),'escena_2','+=2')//start at second 2, and have his label to call with buttons and start here
tl.add(control_escena3(),'escena_3','+=2')// start at second 4, and have his label to call  with buttons and start here


// i have tree animations added to the big time line
function control_escena1()
{
animation= new TimelineMax()
animations_escena_1_here
return animation
}
function control_escena2()
{
animation= new TimelineMax()
animations_escena_2_here
return animation
}
function contro3_escena1()
{
animation= new TimelineMax()
animations_escena_3_here
return animation
}

Link to comment
Share on other sites

exist the way to do it?

tl=new TimelineMax({paused:false, stagger:'delay_each_escena_2second'});
//add 3 animations with a 2 seconds relative delay each one
tl.add(control_escena1())//start at second 0
tl.add(control_escena2())//start at second 2
tl.add(control_escena3())// start at second 4
Link to comment
Share on other sites

oh, ok, you need to add the label first and then add the timeline at the label:

tl.add("escena1");
tl.add(control_escena1(),0)


tl.add("escena2", 2) // 2 seconds into timeline
tl.add(control_escena2(), "escena2");


tl.add("escena3", 4)// 4 seconds into timeline
tl.add(control_escena3(),'escenea3')
Link to comment
Share on other sites

thnak you !!! it works !!! : D

this is the code

 

 

tl_EscenasControl.add('escena_1',0)
tl_EscenasControl.add(control_escena1(),'escena_1')
tl_EscenasControl.add('escena_2','+='+delayEntreEscenas)// this way always  is relative delay : D that is what i want  
tl_EscenasControl.add(control_escena2(),'escena_2')
tl_EscenasControl.add('escena_3','+='+delayEntreEscenas)
tl_EscenasControl.add(control_escena3(),'escena_3')

i was tryd this way but i dont remenber why did not wonrk xD

 

thank you again

 

 

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.
×
×
  • Create New...