Complete Animation before slider

[kram66 0 Likes (Newbie)]

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

[Diaco 1,999 Likes (Superhero)]

Hi kram66 

 

pls make a Codepen Demo available : How to Create a CodePen Demo

[kram66 0 Likes (Newbie)]

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

[OSUblake 18,538 Likes (Superhero)]

You can use the onComplete callback to start the page animation. I removed the CSS transitions.

 

See the Pen ojYERX by osublake (@osublake) on CodePen

[kram66 0 Likes (Newbie)]

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

[OSUblake 18,538 Likes (Superhero)]

What is the end result supposed to be? Are you trying to add additional pages or have an animation on each page that plays before sliding? Or both? Describe what you are trying to do because right now I'm just guessing.

[kram66 0 Likes (Newbie)]

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

[OSUblake 18,538 Likes (Superhero)]

Instead of the var tween being a normal tween, make it a timeline with the animations you want to play before moving to the next page. You can add the same onComplete callback to the timelineline. 

[kram66 0 Likes (Newbie)]

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

[OSUblake 18,538 Likes (Superhero)]

Perhaps. Using a timeline with nested timelines might not be necessary if it's just a simple animation for each box.

 

See the Pen JYbVRJ by osublake (@osublake) on CodePen