Search the Community
Showing results for tags 'oncomplete pause'.
Found 1 result
-
Hey, guys. Continuing to work with my can rotation project. Here is the code: project.canAnimation = function() { var element = $(".text-element"); var tl = new TimelineMax({paused: true}); var $bottle = $('.bottle-block'); var $sub_title = $('.sub-title'); var $ready_status = $('.ready-status'); var $share_block = $('.share-section'); var $share_block_element = $('.share-section li'); tl.to(element, 0.75, {y: -200,rotationX: -90, scale: .75, ease:Expo.easeOut}) .fromTo(element, 0.75, {y: 200,rotationX: 90, scale: .75}, {onComplete: project.statusGenerator(), y: 0, rotationX: 0, scale: 1, ease:Expo.easeOut, immediateRender:false}) .to($bottle, 1, {y: '-=70'}, 1.75) .to($sub_title, 0.75, {opacity: 0}, 1.75) .from($ready_status, 1, {opacity: 0, y: 30}) .staggerFrom($share_block_element, 2, {y: 30, rotationX: 45, transformOrigin:"left 50% -50", opacity: 0, ease: Elastic.easeOut}, 0.25); function step_1() { tl.play(); } function step_2() { tl.to(element, 0.75, {y: -200,rotationX: -90, scale: .75, ease:Expo.easeOut}) .fromTo(element, 0.75, {y: 200,rotationX: 90, scale: .75}, {onComplete: project.statusGenerator(), y: 0, rotationX: 0, scale: 1, ease:Expo.easeOut, immediateRender:false}) } $('#generate-status').on('click', function(){ if(!$(this).hasClass('step-2')){ step_1(); $(this).addClass('step-2'); } else { step_2(); } }); } The problem that onComplete: project.statusGenerator() inits on page load with its related tasks despite the fact that timeline is paused. But I want to make it happen as I want - on complete. What am I missing?