Jump to content
Search Community

Suislide

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by Suislide

  1. 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 :-(

×
×
  • Create New...