patrk

Thanks @Carl. I've taken a look at this and can see where it's definitely useful. In my example I used buttons to try to simply the pen, hoping someone would help me with an onComplete method or a better written function. What I'm really trying to do is have scroll trigger my events. And the key behavior I'm going after is to have an intro timeline reverse and play another timeline after that. I'm new to GSAP and still learning JS, so I'm sure there's an elegant way to solve this. The problem I'm having is with the window.onload event. I want my intro animation to play in, but if I place an onload event after the following code it messes up the ScrollMagic timeline. var intro = intro(), scroll = scroll(), controller = new ScrollMagic.Controller(); function intro() { var tl = new TimelineMax(); tl.from($heroTitle, .5, {y:"-30", autoAlpha: 0, ease: Power4.easeInOut}, "herotext") .from($heroByline, .5, {y:"30", autoAlpha: 0, ease: Power4.easeInOut}, "herotext") .from($heroSubtext, .75, {y:"60", autoAlpha: 0, ease: Power4.easeInOut}, "herotext+=0.75") .from($heroSidecontainer, 1.5, {height:"500px", ease: Power4.easeInOut}, "herotext-=.75") .from($heroSidehash, .75, {height: "100%", y:"1000", autoAlpha: 0, ease: Power4.easeInOut}, "herotext-=.5") .from($heroSidetitle, .75, {x:"50%", autoAlpha: 0, ease: Power4.easeInOut}, "sidetext-=0.25") .from($heroSidecity, .75, {x:"-50%", autoAlpha: 0, ease: Power4.easeInOut}, "sidetext-=0.25") .from($mouseIcon, 1.5, {autoAlpha: 0, y:"100px"}); return tl; } function curtain() { var tl = new TimelineMax(); tl.to($heroCurtain, 1, {y:"-100%", ease: Power4.easeInOut}) .to($burgerColor, 0.25, {backgroundColor: "#494949", ease: Power2.easeIn}, "-=.5"); return tl; } function scroll() { var tl = new TimelineMax({paused:true}); tl.add(intro.reverse()) .add(curtain()) return tl; } var scene = new ScrollMagic.Scene({triggerHook:0, offset:1}) .setPin("#h") .addIndicators() .on("enter", function(event) { console.log("leaving hero"); scroll.play(); }) .on("leave", function(event) { console.log("entering hero"); scroll.reverse(); }) .addTo(controller); window.onload = function() { intro.play(); }; Any help would be awesome.

Thanks @Sahil! I think I may have spoke too soon when I said I was all set I'm still struggling to get multiple timelines to reverse and then play. Here's a pen I forked from yours. The goal with each button press is to reverse the previous timeline, then play that function's timeline. Any ideas?

Thanks @Sahil your example really helped. I ended up making two timelines and the issue I add was with how I broke things up using vars. Here's the working js FWIW. function intro() { var tl = new TimelineMax(); tl.from($heroTitle, .5, {y:"-30", autoAlpha: 0, ease: Power4.easeInOut}, "herotext") .from($heroByline, .5, {y:"30", autoAlpha: 0, ease: Power4.easeInOut}, "herotext") .from($heroSubtext, .75, {y:"60", autoAlpha: 0, ease: Power4.easeInOut}, "herotext+=0.75") .from($heroSidecontainer, 1.5, {height:"500px", ease: Power4.easeInOut}, "herotext-=.75") .from($heroSidehash, .75, {height: "100%", y:"1000", autoAlpha: 0, ease: Power4.easeInOut}, "herotext-=.5") .from($heroSidetitle, .75, {x:"50%", autoAlpha: 0, ease: Power4.easeInOut}, "sidetext-=0.25") .from($heroSidecity, .75, {x:"-50%", autoAlpha: 0, ease: Power4.easeInOut}, "sidetext-=0.25") .from($mouseIcon, 1.5, {autoAlpha: 0, y:"100px"}); return tl; } function curtain() { var tl = new TimelineMax(); tl.to($heroCurtain, 1, {y:"-100%", ease: Power4.easeInOut}) .to($burgerColor, 0.25, {backgroundColor: "#494949", ease: Power2.easeIn}, "-=.5"); return tl; } function borders() { var tl = new TimelineMax(); tl.from($borderT, .5, {width: "0%"}, "unison") .from($borderL, .5, {height: "0%"}, "unison") .from($borderR, .5, {height: "0%"}, "unison") .from($borderB, .5, {width: "0%"}, "unison"); return tl; } var init = intro(); var curt = curtain(); var bord = borders(); var hello = new TimelineMax({paused:true}); hello.add(init.play()); hello.eventCallback("onComplete", null); var engage = new TimelineMax({paused:true}); engage.add("start"); engage.add(init.reverse()); engage.add(curt.play()); engage.add(bord.play()); engage.add("end"); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerHook:0, offset:1}) .setPin("#h") .addIndicators() .on("enter", function(event) { console.log("leaving hero area"); engage.tweenFromTo("start", "end"); }) .on("leave", function(event) { console.log("entering hero area"); engage.tweenFromTo("end", "start"); }) .addTo(controller); // Play only intro timeline when page loads hello.play(); + And if you have any ideas on how I could further make this more concise... I'm all ears. Thanks for the great support. This forum is awesome!

Hi guys, I'm still having a bit of difficulty wrapping my head around how to control the playhead with a function. I love the approach @Sahil shared of chaining multiple timelines. It's really modular and, I think, what I should be focusing on. In the case of this project: 1. I have three timelines which I'm compiling into a master timeline. I've also added some labels just to make things easy. var master = new TimelineMax(); master.add("start"); master.add(intro()); master.add("curtain"); master.add(curtain()); master.add("borders"); master.add(borders()); master.add("end"); 2. I am using ScrollMagic to control their behavior. var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerHook:0, offset:1}) .setPin("#h") .addIndicators() .on("enter", function(event) { console.log("leaving hero area"); master.reverse("curtain"); }) .on("leave", function(event) { console.log("entering hero area"); master.reverse("end"); }) .addTo(controller); 3. On page load, I only play the intro segment of the timeline so I'm using the tweenFromTo method. // Play only intro timeline when page loads master.tweenFromTo("start", "curtain"); 4. On scroll, I want the intro segment to play in reverse, then play the remaining timeline from the curtain. This is where I get stuck. I'm trying to write... .on("enter", function(event) { console.log("leaving hero area"); master.reverse("curtain"); // Play this after... master.tweenFromTo("curtain", "end"); }) But of course it only runs the tweenFromTo first and doesn't run the master.reverse("curtain"); I hope I'm explaining this well. Any help controlling these timeline sequences would be most appreciated.

Thanks @Jonathan for the detailed explanation and fork. You answered my question perfectly. One caveat, I would like to keep onComplete outside of tl1 timeline constructor in order to use tl1 elsewhere (without the tl2 firing). I think the videos @Sahil provided might have insight into this. I'm sort of just getting started so forgive my ignorance. Thanks guys!

I'm new to GSAP but trying out TimelineMax and am having difficulty getting the onComplete function to work properly. Basically I want to trigger another timeline after one is finished playing. Here's the pen. Backstory: I encountered this issue with a more complex snippet inside ScrollMagic. So... wondering if I ran into a bug? Thanks for your help hive!