Resetting timeline and tween on resize not working as expected

[mk1]

Hello,

 

How can I properly recalculate all .set tweens and timeline on resize?

 

Currently I am doing it like this: 

function oneTimeTweens(){
    TweenMax.set($section_two, {y: '+=40', autoAlpha: 0});
    TweenMax.set($section_four, {autoAlpha: 0});
    TweenMax.set($section_three, {autoAlpha: 0});
    TweenMax.set($section_five, {y: '+=100', autoAlpha: 0});

    TweenMax.set($quoteForm, {y: '+=40', autoAlpha: 0});
    TweenMax.set(imessagewrapper, {autoAlpha: 0});
    TweenMax.set($boxes_s1, {y: '-=40', autoAlpha: 0});
    TweenMax.set($section_one, {y: '+=40', autoAlpha: 0});

    //TweenMax
    imessage_tl.to($imessage_ind, 1.5, {
        y: "+=20px",
        yoyo: true,
        repeat: -1,
        ease: Power2.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });

    TweenMax.to('#plane', 1.4, {
        y: "+=2px",
        transformOrigin: "50% -100% 50%",
        yoyo: true,
        repeat: -1,
        ease: Power0.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });

    TweenMax.to('#circle', 1.4, {
        scale: 0.95,
        transformOrigin: "50% 50% 50%",
        yoyo: true,
        delay: 1.4,
        repeat: -1,
        ease: Power0.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });
// END OF TURNING OFF
}

function resetOnResize(){
    timeline_feedback.pause(0);
    timeline_s1.pause("S1start");
    showQuoteTl.pause(0);

    console.log("Kill them all!");

}
oneTimeTweens();
jQuery(window).resize(oneTimeTweens);
jQuery(window).resize(resetOnResize);

It's not behaving same way like after reloading the page. I would love to hear some advise. 

Cheers!

See the Pen by (@) on CodePen

[Carl]

It would be great if you could create a reduced test case in CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I can't tell how the snippet of code you provided relates to all the animation on the site you linked to.

 

Also, please clarify if the issue is happening with reloading or resizing as you mention both.

 

One thing that jumps out as potentially problematic with your code is your use of relative values in your set()s.

 

TweenMax.set($section_two, {y: '+=40', autoAlpha: 0});

TweenMax.set($section_four, {autoAlpha: 0});

TweenMax.set($section_three, {autoAlpha: 0});

TweenMax.set($section_five, {y: '+=100', autoAlpha: 0});

 

TweenMax.set($quoteForm, {y: '+=40', autoAlpha: 0});

TweenMax.set(imessagewrapper, {autoAlpha: 0});

TweenMax.set($boxes_s1, {y: '-=40', autoAlpha: 0});

TweenMax.set($section_one, {y: '+=40', autoAlpha: 0});

 

Every time you resize and call the function that runs those sets you are going to be increasing the CURRENT y value by 40 (or 100) each time. I'm doubtful that is going to give the desired result.

 

Please provide a very simple demo with just a few elements and tweens so that we can focus on a solution that you can later apply to your full project.

 

Here is a very basic demo that shows how a timeline can be killed and re-created on resize:

http://codepen.io/PointC/pen/zBybXz/?editors=0010

[mk1]

Thanks a lot, I think your answer will be the solution. I will try to introduce it to my code later this day.

 

On the website I have one main timeline (timeline_s1) which displays all the content, timeline is divided into sections with .addPause(), so on scroll down / up event you are playing only one timeline forward or backward. Animations are working well, as desired, not yet final version but I dont have any troubles here.

 

Single tweens provided in function oneTimeTweens() just preps all the html elements which I need in the right position before animating them (as the elements on this site are mostly positioned in absolute)

 

The issue I am trying to solve is the following:

 

How it should look after resize: https://drive.google.com/file/d/0B6rtKHZbbzVTMENuNndLY29RZjg/view?usp=sharing

 

How ot looks now (not wanted): https://drive.google.com/file/d/0B6rtKHZbbzVTX2VZbzhXMVdsTFk/view?usp=sharing

 

 

In summary I want to have same effect I am having after reloading the page without reloading it. I should be at the begining of the timeline or on certain label, ready to roll. 

[mk1]

Hmm.... I did the following

/*
 *
 *
 * Set tweens
 *
 *
 */
function oneTimeTweens(){
    TweenMax.set($section_two, {y: '+=40', autoAlpha: 0});
    TweenMax.set($section_four, {autoAlpha: 0});
    TweenMax.set($section_three, {autoAlpha: 0});
    TweenMax.set($section_five, {y: '+=100', autoAlpha: 0});

    TweenMax.set($quoteForm, {y: '+=40', autoAlpha: 0});
    TweenMax.set(imessagewrapper, {autoAlpha: 0});
    TweenMax.set($boxes_s1, {y: '-=40', autoAlpha: 0});
    TweenMax.set($section_one, {y: '+=40', autoAlpha: 0});

    //TweenMax
    imessage_tl.to($imessage_ind, 1.5, {
        y: "+=20px",
        yoyo: true,
        repeat: -1,
        ease: Power2.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });

    TweenMax.to('#plane', 1.4, {
        y: "+=2px",
        transformOrigin: "50% -100% 50%",
        yoyo: true,
        repeat: -1,
        ease: Power0.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });

    TweenMax.to('#circle', 1.4, {
        scale: 0.95,
        transformOrigin: "50% 50% 50%",
        yoyo: true,
        delay: 1.4,
        repeat: -1,
        ease: Power0.easeOut//,
        //onCompleteParams:[elementItem],
        //onComplete: elementMoveUp
    });
// END OF TURNING OFF
}


/*
 *
 * Main timeline
 *
 * */

function mainTimeline() {
    timeline_s1.add("start")
        .add(TweenMax.to($boxes_s1, 1, {y: '+=40', autoAlpha: 1, ease: Power4.easeInOut}))
        .add(TweenMax.to($section_one, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}))
        .add("End S0")
        //.add("S1start")
        .addPause()

        .to($section_one, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut, className: "+=bonzo"}, "S1")
        .add("S1start")
        .to("#S0", 0, {className: "-=isactive"}, "Change class")
        .to("#S1", 0, {className: "+=isactive"}, "Change class")
        .to($section_two, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}, "S1")
        .add("S1end")
        .addPause()

        //.add("S2start")

        .to(leftGif, .4, {x: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
        .to(rightGif, .4, {x: '+=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
        .to($section_two, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
        .add("S2start")

        .to("#S1", 0, {className: "-=isactive"}, "Change class2")
        .to("#S2", 0, {className: "+=isactive"}, "Change class2")
        .staggerFrom('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S22")
        .to($section_three, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}, "S22")
        .to(imessagewrapper, .4, {autoAlpha: 1, ease: Back.easeOut.config(1.7)}, "S22")
        .add("S2end")
        .addPause()

        .to('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S3")
        .to(imessagewrapper, .4, {autoAlpha: 0, ease: Back.easeOut.config(1.7)}, "S3")
        .to($section_three, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S3")
        .add("S3start")
        .to("#S2", 0, {className: "-=isactive"}, "Change class3")
        .to("#S3", 0, {className: "+=isactive"}, "Change class3")
        .to($section_four, .4, {autoAlpha: 1, ease: Power4.easeInOut}, "S33")
        .staggerFrom("#specialEvent", 0.4, {
            autoAlpha: 0,
            x: "-=50",
            ease: Back.easeOut.config(1.7)
        }, 0.1, "Special event")
        .staggerFrom("#specialEventDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Special event")
        .staggerFrom("#styleAdvice", 0.4, {
            autoAlpha: 0,
            x: "-=50",
            ease: Back.easeOut.config(1.7)
        }, 0.1, "Advice event")
        .staggerFrom("#styleAdviceDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Advice event")
        .staggerFrom("#convenience", 0.4, {
            autoAlpha: 0,
            x: "-=50",
            ease: Back.easeOut.config(1.7)
        }, 0.1, "Convenience event")
        .staggerFrom("#convenienceDecr", 0.4, {
            autoAlpha: 0,
            y: "+=50",
            ease: Power4.easeInOut
        }, 0.1, "Convenience event")
        .staggerFrom("#quality", 0.4, {autoAlpha: 0, x: "-=50", ease: Back.easeOut.config(1.7)}, 0.1, "Quality event")
        .staggerFrom("#qualityDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Quality event")
        .add("S3end")
        .addPause()


        .to($section_four, .4, {autoAlpha: 0, ease: Power4.easeInOut})
        .to('#showQuote', 0.35, {y: '-=40px', autoAlpha: 0, ease: Power4.easeInOut})
        .add("S4")
        .to("#S3", 0, {className: "-=isactive"}, "Change class4")
        .to("#S4", 0, {className: "+=isactive"}, "Change class4")
        .to($section_five, .4, {y: '-=100', autoAlpha: 1, ease: Power4.easeInOut}, "Change class4")

        .staggerFrom("#contactSubmit", 0.55, {x: '+=40', autoAlpha: 0, ease: Power4.easeInOut}, 0.1, "Contact form")
        .staggerFrom("#contactText", 0.55, {y: '+=40', autoAlpha: 0, ease: Power4.easeInOut}, 0.1, "Contact form")
        .staggerFrom("#sendImage", 0.55, {scale: 0.5, ease: Power4.easeInOut}, 0.1, "Contact form")
        .staggerFrom("#contactLocation", 0.55, {y: '+=40', autoAlpha: 0, ease: Power4.easeInOut})
        .staggerFrom("#contactName", 0.55, {y: '+=40', autoAlpha: 0, ease: Power4.easeInOut})


        .add("end");
}

mainTimeline();

/*
 *
 * Triggers timeline
 *
 * */

function resetOnResize(){

    timeline_s1.kill();

    oneTimeTweens();

    mainTimeline();
    //timeline_feedback.pause(0);

    //showQuoteTl.pause(0);

    console.log("Kill them all!");

}
oneTimeTweens();
jQuery(window).resize(resetOnResize);

And result is still the same, I have tried to call these functions manually and the Chrome console result is "undefined"

Now I am suprised on first load it works well

[mk1]

Some progress, after changing kill() to restart() timeline works properly, but .set() still remains in old position

[OSUblake]

Here's a post about creating a timeline on window resize...

https://greensock.com/forums/topic/15214-animating-object-to-center-of-window-scale-based-on-window-size-percentage/?p=65926

 

The values you set, like progress, totalProgress, reversed, etc, are going to depend on what your timeline is doing. Here's a simple demo using totalProgress for a repeating timeline, and requestAnimationFrame to throttle the resize calls.

See the Pen 41012e2812f501cca2d5c1298a74e2e6?editors=0010 by osublake (@osublake) on CodePen

 

.