a timeline control another tl

[Guest almex]

hi there,

 

is it possible to control a timeline from another one? i got two tl - the first is the hole animation, the second one is a loop but this should appear 7sec after the first tl started. when i say "+7" at the first line of tl2 it will wait 7 seconds every loop, but it should do this just the first time and then loop without any interruption.

so i want to set the tl2 invisible till tl1 is on its seventh second and the switch tl2 to visible so it can loop as long as it want to.

 

i hope someone will have an easy sollution for me

 

 

window.onload=function(){
              document.getElementById("container").style.display = "block";
        
            var mc1 = new TimelineMax();
            var mc2 = new TimelineMax({repeat:-1});
                    
            var koffer1=document.getElementById("koffer1");
            var koffer2=document.getElementById("koffer2");
            var footerbar=document.getElementById("footerbar");
            var cta=document.getElementById("cta");
            var cursor=document.getElementById("cursor");
            var white=document.getElementById("white");
            var h1=document.getElementById("h1");
            var h2=document.getElementById("h2");
            var txt1=document.getElementById("txt1");
            var txt2=document.getElementById("txt2");
            var txt3=document.getElementById("txt3");
            var txt4=document.getElementById("txt4");
            var txt5=document.getElementById("txt5");
            var txt6=document.getElementById("txt6");
            var wasser=document.getElementById("wasser");
            var flasche=document.getElementById("flasche");
            var wolke1=document.getElementById("wolke1");
            var wolke2=document.getElementById("wolke2");
            
            
            mc1.set(white,{opacity:0})
                .set(koffer2,{opacity:0})
                .set(wasser,{opacity:0})
                                
            .to(koffer1,1,{top: 0, ease: Expo.easeOut}, "+=1")
                .to(footerbar,1,{top: 467, ease: Expo.easeOut}, "-=1")
                .from(cta,0.6,{opacity:0, scale:0.5, ease:Back.easeOut}, "-=0.8")
                .from(cursor,1,{top:600, left:150, ease:Expo.easeOut})
                    .to(cursor,0.05,{scale:0.95})
                    .to(cta,0.05,{scale:0.95})
                    .to(koffer1,0.7,{scale:1.03, ease:Expo.easeOut})
                    .to(cursor,0.1,{scale:1})
                    .to(cta,0.1,{scale:1})
                    .to(koffer1,0.5,{scale:1, ease:Expo.easeOut})
                        .to(cursor,0.05,{scale:0.95})
                        .to(cta,0.05,{scale:0.95})
                        .to(koffer1,0.7,{scale:1.03, ease:Expo.easeOut})
                        .to(cursor,0.1,{scale:1.2})
                        .to(cta,0.1,{scale:1.2})
                        .to(koffer1,1,{scale:2, ease:Expo.easeOut})
                        .to(cursor,0.5,{opacity:0},"-=1.3")
                        .to(cta,0.5,{opacity:0},"-=1.3")
                    .to(white,1,{opacity:1},"-=1")
                    .set(koffer2,{opacity:1, scale:1.5}, "-=0.2")
                    .to(koffer2,0.8,{scale:1, ease:Expo.easeOut})
                    .to(wasser,0.1,{opacity:1}, "-=0.4")
                    .to(white,1,{opacity:0}, "-=0.8")
                    .to(footerbar,1,{top:569, ease:Expo.easeOut}, "-=2.1")
                    
                    .from(h1,1,{left:-450, opacity:0, ease:Back.easeOut})
                    .from(h2,1,{left:-450, opacity:0, ease:Back.easeOut}, "-=0.5")
                    .from(txt1,0.7,{left:-20, opacity:0, ease:Expo.easeOut})
                    .from(txt2,0.7,{left:-20, opacity:0, ease:Expo.easeOut}, "-=0.5")
                    .from(txt3,0.7,{left:-20, opacity:0, ease:Expo.easeOut}, "-=0.5")
                    .from(txt4,0.7,{left:-20, opacity:0, ease:Expo.easeOut}, "-=0.5")
                    .from(txt5,0.7,{left:-20, opacity:0, ease:Expo.easeOut}, "-=0.5")
                    .from(txt6,0.7,{left:-20, opacity:0, ease:Expo.easeOut}, "-=0.5")
                                        
                    .set(cta,{left:32, scale:0.5}, "-=0.5")
                    .set(cursor,{top:600, left:0, opacity:1}, "-=0.5")
                    .to(cta,0.6,{opacity:1, scale:1, ease:Back.easeOut}, "-=0.5")
                    .to(cursor,0.6,{top:520, left:35, ease:Back.easeOut}, "-=0.5")
                    .to(cursor,0.05,{scale:0.95})
                    .to(cta,0.05,{scale:0.95})
                    .to(cursor,0.1,{scale:1})
                    .to(cta,0.1,{scale:1})
                    .to(cursor,0.05,{scale:0.95})
                    .to(cta,0.05,{scale:0.95})
                    .to(cursor,0.1,{scale:1})
                    .to(cta,0.1,{scale:1})
            
            
            mc2.to(flasche,7,{left:430, top:310, rotation:-25})
                .to(flasche,7,{left:500, top:300, rotation:0})

 

[Oliver16Years]

You can invoke functions from timeline:

 

mc1.add( function(){ mc2.play(); },  7 )

Set up some variable and check it from the function if it is the first run or not.

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/play/

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/

 

If You are in a banner's iFrame, You can delete the getElementById(); lines because IDs are present as global references to the DOM elements.

[Guest almex]

thx a lot, i´ll try this later

[Carl]

I'm having a very hard time understanding the description of your animation, especially since tl1 and tl2 don't exist anywhere. Perhaps you meant mc1 and mc2, but those are timelines and don't have a visible property. 

 

Regardless, you can control one timeline from another a few different ways.

 

As Oliver suggested you can just invoke play() using function or callback.

 

You can also use use add() with tweenTo(), tweenFrom(), tweenFromTo() on TimelineMax instances:

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

 

 

For ultimate flexibility you can tween the time() or progress() of another timeline like:

 

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