kram66

Something like this? var tween= new TimelineMax({paused:true,onComplete: startSlide}), tw1= new TimelineMax(), tw2= new TimelineMax(), tw3= new TimelineMax(); tw1.to(".box",1, {x: -460}); tw2.to(".box1",1, {x: 100}); tw3.to(".box3",1, {bottom: 100}); tween.add([tw1, tw2, tw3]);

I have a number of elements on the page I would like to animate off before moving to the next page.

That's awesome.. Since I'm really new to this.. How do I amend this code to include additional elements? var tween = TweenLite.to(".hire", 1, {x: -460, paused: true, onComplete: startSlide})

I've got a basic demo here.. Trying to perform the animation prior to moving the page. http://codepen.io/kram66/pen/zvopQR

I'm really new to javascript and TweenMax and I'm not really sure if my question is a javascript or tweenmax question, but happy if somebody can put me on the right track. <a href="#" id="info" class="info" onclick="myFunction()"> <span class="plus"></span> About Me </a> $(document).ready(function(){ $(".begin").on("click",function(){ TweenMax.to("#logo",1,{bottom:1200,opacity:0, ease:Back.easeIn},0.5); TweenMax.to(".hire",0.6,{left:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to(".info",1.3,{right:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("hr",0.4,{bottom:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("#nav-icon1",0.5,{top:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("#topright",0.5,{left:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to(".social",0.5,{left:1000,opacity:0, ease:Back.easeIn},0.2); //Complete this animation before moving into the slider???? $(".sec-A").addClass("showing"); $(".head").hide(); }); $(".down").on("click",function(){ $(".head").addClass("head-hide"); }); $(".home").on("click",function(){ $(".side").removeClass("showing"); }); $(".code-btn").on("click",function(){ $(".sec-B").addClass("showing"); }); $(".back-btn").on("click",function(){ $(".sec-B").removeClass("showing"); }); });