Jump to content
GreenSock

Suislide

Timeline & Label

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 everybody. I'm having some trouble using labels in Timeline.

 

Here is my code : 

var tl45 = new TimelineMax({repeat: -1, repeatDelay:4});

tl45.add("myLabel1", 0);
tl45.add("myLabel2", 5);
tl45.add("myLabel3", 10);
tl45.add("myLabel4", 15);

//Clique point1
var btnPoint1 = document.getElementById("num1");
btnPoint1.onclick = function() {
tl45.play("myLabel1");
}

//Clique point2
var btnPoint2 = document.getElementById("num2");
btnPoint2.onclick = function() {
 tl45.play("myLabel2");
}

//Clique point3
var btnPoint3 = document.getElementById("num3");
btnPoint3.onclick = function() {
 tl45.play("myLabel3");
}

//Clique point4
var btnPoint4 = document.getElementById("num4");
btnPoint4.onclick = function() {
 tl45.play("myLabel4");
}


tl45.to("#screenshot2", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"});
tl45.to("#num2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");
tl45.to("#point2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

tl45.to("#screenshot3", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"});
tl45.to("#num3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");
tl45.to("#point3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

tl45.to("#screenshot4", 1, {css:{opacity:1}, delay: 4,ease:Back.easeInOut,overwrite:"all"});
tl45.to("#num4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");
tl45.to("#point4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

So, the Timeline works well, the probleme come from the labels. When I click on my points ( point1, point2 etc ...) it's supposed to jump to the corresponding label, but it works only when has already went trough this label. For exemple if my timeline is at 10 sec and I want to jump to 15sec, I can't, but If I'm at 15 sec and I want to jump at 10 sec or less, it's working ! 

I don't know if I'am very clear. I'v seen few subjects similar to mine, but none on them resolved my problem :-(

 

Edit : I just figured out that until the timeline has not been through the labels, my "points" are kind of unactive, so, unclickable. Seems that lbael are working fine finally, the probleme now is : why does it unactive my buttons :-(

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.
 
I believe that the issue could be in the way you're building your sequence.
 
My recommendation would be to create a individual timeline for each part of your sequence (according to the code you posted there are 4) and add each of those timelines at a particular label.

var masterTl = new TimelineMax(),//the parent timeline
    tlPoint1 = new TimelineMax(),
    tlPoint2 = new TimelineMax(),
    tlPoint3 = new TimelineMax(),
    tlPoint4 = new TimelineMax();

//Create the individual timelines
tlPoint1
.to("#screenshot1", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"})
.to("#num1", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1")
.to("#point1", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

tlPoint2
.to("#screenshot2", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"})
.to("#num2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1")
.to("#point2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

tlPoint3
.to("#screenshot3", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"})
.to("#num3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1")
.to("#point3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

tlPoint4
.to("#screenshot4", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"})
.to("#num4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1")
.to("#point4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1");

//we add the timelines and labels to the master parent timeline
masterTl
.add('myLabel1')
.add(tlPoint1)
.add(tlPoint2, 'myLabel2')
.add(tlPoint3, 'myLabel3')
.add(tlPoint4, 'myLabel4');

//finally the controls
//Clique point1
var btnPoint1 = document.getElementById("num1");
btnPoint1.onclick = function() {
masterTl.play("myLabel1");
}

//Clique point2
var btnPoint2 = document.getElementById("num2");
btnPoint2.onclick = function() {
masterTl.play("myLabel2");
}

//Clique point3
var btnPoint3 = document.getElementById("num3");
btnPoint3.onclick = function() {
 tl45.play("myLabel3");
}

//Clique point4
var btnPoint4 = document.getElementById("num4");
btnPoint4.onclick = function() {
masterTl.play("myLabel4");
}

That also you'll help you a lot, if you want to change just one tween or one var you can do it in the particular timeline, it saves a lot of time doing it like this.
 
You can check a very good example of this here:
http://www.greensock.com/jump-start-js/#timelinelite-labels
 
Also look at the detailed code here:

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


 
The timelnie is builded in line 67.

 

Take a look also to this video, is a very good resource:

http://www.greensock.com/sequence-video/

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi, thanks a lot for the quick answer. Don't know yet if it will help, but I'm working on it and try to have a different approach, as you suggest.

Link to comment
Share on other sites

Hi,

 

I see that I didn't elaborated enough in my answer, sorry about that.

 

As you can see in the Greensock collection codepen, the behaviour you're after can be achieved in a simple way and the fact that in your case you have to play the timeline before the play('label') method can work is quite odd. Therefore my assumption is that something could be happening in your code and more specifically with the creation of the timeline.

 

I believe that last week another user posted a question. He was adding instances to a single timeline in order to animate several different objects with mouse click events. When he created individual timelines the issue was gone.

 

If you create as much code modules as possible, in this case child timelines,is very helpful to isolate possible errors and serves you very well if you want to change anything, whether is the animation, time, etc., also if you look Carl's video you'll see that using nested timelines also allows to quickly test the part of the animation you're working without waiting for the rest of the timeline to play.

 

If the issues continue after you created individual timelines, please provide a simple codepen or fiddle with the isolated code that's giving you trouble in order to get a better look at it.

 

Best,

Rodrigo.

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