Jump to content
GreenSock

kram66

Complete Animation before slider

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×