[Complete Animation before slider]

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]);

[Complete Animation before slider]

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

[Complete Animation before slider]

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})

[Complete Animation before slider]

I've got a basic demo here.. Trying to perform the animation prior to moving the page.

 

See the Pen zvopQR by kram66 (@kram66) on CodePen

[Complete Animation before slider]

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");
    });
});