Suislide
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Suislide
-
-
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
Timeline & Label
in GSAP
Posted
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.