mk1

January 8, 2017

Should be okay, we have some issues with our hosting. As the provider claims whole network were under DDoS attack ^^

Please let me know if the issue still occurs after refreshing cache.

January 8, 2017

I will set up a codepen asap, but do you guys have an idea what might causing such weird behaviour?

I am making simple slider for Wordpress, and everything is fine expect the Typer Writer effect. I want to do as much as possible using GSAP, not some 3rd parties.

some letters are left behind and not deleted.

EDIT: Codepen provided

See the Pen mRedXR by Nikolaus91 (@Nikolaus91) on CodePen

January 8, 2017

Point taken, I will prolong it a little bit. Thanks!

January 8, 2017

Setting up a codepen would quite time consuming in this case. Let me know if you can take a look using dev link:

http://barb.beectrl.a2hosted.com/

January 7, 2017

Hey guys, thanks for the tips!

I have solved this: just take a look at the contact form (last .dot). I've mixed there php + ajax+ thankYou timeline and tell me what you think.

http://barb.beectrl.a2hosted.com/

Cheers, mk

Here I will paste code for the future generations to use.

<div class="br-form br-form--contact">

            <div id="form-messages" class="former"></div>

            <form id="contactForm" method="post" action="mailhandler.php">
                <div class="contact-col">
                    <div id="contactName" class="br-row br-name">
                        <label for="name">Name:</label>
                        <input id="name" type="text" name="name" required><br>
                    </div>
                    <div id="contactLocation" class="br-row br-location">
                        <label for="email">Email:</label>
                        <input id="email" type="email" name="email">
                    </div>
                </div>
                <div class="contact-col-2">
                    <div id="sendImage" class="br-row--image">
                        <svg class="linePLANE" version="1.1" id="Layer_1"
                             x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40"
                             style="enable-background:new 0 0 40 40;">


                            <path class="st16" d="M10.9,27.3c0.1,0,0.2,0,0.3-0.1c0.2-0.2,0.3-0.5,0.1-0.7c-1.5-2-2.3-4.3-2.3-6.7c0-3.9,2-7.5,5.4-9.6
        c0.2-0.1,0.3-0.5,0.2-0.7c-0.1-0.2-0.5-0.3-0.7-0.2C10.2,11.5,8,15.4,8,19.7c0,2.7,0.9,5.2,2.5,7.4C10.6,27.2,10.8,27.3,10.9,27.3z
        "/>
                            <path id="circle" d="M20,0C9,0,0,9,0,20s9,20,20,20c11,0,20-9,20-20S31,0,20,0z M20,39C9.5,39,1,30.5,1,20S9.5,1,20,1
        c10.5,0,19,8.5,19,19S30.5,39,20,39z"/>
                            <path class="st16" d="M26.4,9.2c-0.2-0.1-0.6-0.1-0.7,0.2c-0.1,0.2-0.1,0.6,0.2,0.7c3.4,2.1,5.4,5.6,5.4,9.6c0,2.5-0.8,4.8-2.3,6.7
        c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2c1.6-2.1,2.5-4.7,2.5-7.4C32.3,15.4,30.1,11.5,26.4,9.2z"
                            />
                            <path class="st16" d="M22.8,30.6c-1.7,0.4-3.5,0.4-5.2,0c-0.3-0.1-0.6,0.1-0.6,0.4c-0.1,0.3,0.1,0.6,0.4,0.6
        c0.9,0.2,1.9,0.3,2.8,0.3s1.9-0.1,2.8-0.3c0.3-0.1,0.4-0.3,0.4-0.6C23.4,30.7,23.1,30.5,22.8,30.6z"/>
                            <path id="plane" class="st16" d="M20.8,9.6c0-0.2-0.1-0.3-0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.2,0.1-0.3,0.2-0.3,0.3l-9.2,22.1
        c-0.1,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l9-5.9l7.5,4.9c1.6,1,1.6,1,1.7,1c0.2,0,0.3-0.1,0.4-0.2
        c0.1-0.1,0.1-0.3,0-0.5L20.8,9.6z M19.7,25.6l-7.6,5l7.6-18.2V25.6z M20.7,25.6V12.2l7.6,18.3C26.1,29.1,21.8,26.2,20.7,25.6z"/>


                        </svg>
                        <svg class="lineSVG">
                            <path class="tick" fill="none" stroke-width="3" stroke-linecap="round"
                                  stroke-linejoin="round" stroke-miterlimit="10" d="M53.5 11.4l-24 32.1-14-9"/>
                        </svg>
                    </div>
                </div>

                <div id="contactText" class="br-row">
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" required></textarea>
                </div>
                <div id="contactSubmit" class="br-row">
                    <button type="submit">Send</button>
                </div>

            </form>
        </div>

GSAP Thank you timeline:

var ticker = document.querySelector('.tick');

TweenMax.set([ticker], {
    drawSVG:'0% 0%',
    alpha:0
});

var tllol = new TimelineMax({paused: true});

tllol
    .staggerTo('.linePLANE .st16', 0.5, {autoAlpha: 0, display: "none"})
    .staggerFrom('#form-messages', 0.4, {autoAlpha: 0, y: -40}, "Same time")
    .to('#circle', 0.4, {scale: 0.6, transformOrigin: "50% 50%"}, "Same time")
    .to([ ticker], 1, {
    drawSVG:'95% 0%',
    alpha: 1
}, "Same time");

Javascript validator + AJAX

jQuery(document).ready(function ($) {
    $(function() {

        // Get the form.
        var form = $('#contactForm');

        // Get the messages div.
        var formMessages = $('#form-messages');

        // Set up an event listener for the contact form.
        $(form).submit(function(e) {
            // Stop the browser from submitting the form.
            e.preventDefault();

            // Serialize the form data.
            var formData = $(form).serialize();

            // Submit the form using AJAX.
            $.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: formData
            })
                .done(function(response) {
                    // Make sure that the formMessages div has the 'success' class.
                    $(formMessages).removeClass('error');
                    $(formMessages).addClass('success');

                    // Set the message text.
                    $(formMessages).text(response);
                    // Run the GSAP thankyou timeline
                    tllol.play();
                    setInterval(function(){
                        // Clear the form.
                        $('#name').val('');
                        $('#email').val('');
                        $('#message').val('');
                        //Reverse the timeline after cleaning up the form
                        tllol.reverse();
                    },3000);

                })
                .fail(function(data) {
                    // Make sure that the formMessages div has the 'error' class.
                    $(formMessages).removeClass('success');
                    $(formMessages).addClass('error');

                    // Set the message text.
                    if (data.responseText !== '') {
                        $(formMessages).text(data.responseText);

                    } else {
                        $(formMessages).text('Oops! An error occured and your message could not be sent.');
                    }
                });

        });

    });


});

PHP mail handler

<?php
/**
 * Created by PhpStorm.
 * User: mkbeectrl
 * Date: 06/01/2017
 * Time: 20:56
 */

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $message = trim($_POST["message"]);

    // Check that data was sent to the mailer.
    if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    // FIXME: Update this to your desired email address.
    $recipient = "you@example.com";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);
        echo "Thank You! Your message has been sent.";
    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }

} else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

January 7, 2017

Okay, problem solved, it's still hard for me to picture how the code is executed on reverse actions , need more exp

Here's my solution:

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
            console.log("Trying to play");
        }}, "S22")
        .add("S2end")
        .addPause()

        .to('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px", onComplete: function () {
            imessage_tl.pause(0);
            console.log("Pause");
        }, onReverseComplete: function () {
            imessage_tl.play();
            console.log("Trying to play on reverse");
        }}, "S3")

If someone was so nice and explain to me why my previous solution refused to work I will much appreciate it.

January 7, 2017

Update, but still not working

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
            console.log("Trying to play");
        }, onReverseComplete: function () {
            imessage_tl.play();
            console.log("Trying to play on reverse");
        }}, "S22")

Here I found something about onREverse call https://greensock.com/forums/topic/9499-onreverse/?hl=onreverse#entry38487

but it's not listed here:

https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet-2.pdf

January 7, 2017

Hey, quick question.

How can I make this onComplete part work on main timeline reverse?

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
        }}, "S22")

I don't want to launch this timeline in .add() or as a tween, as this will ruin my timeline behaviour.

January 6, 2017

Hey guys, first quick question before I will start coding in this thread.

How can I connect this animation: (in example)

to php function which will submit the form so I can show the real progress?

I know how to build a working form or an animation ( not every animation ) but I am learning fast ), in fact I didnt try to connect animation and form yet, will try in coming hours but it looks to me a little bit tricky.

See the Pen PwMbbv by chrisgannon (@chrisgannon) on CodePen

January 2, 2017

I want to move the black dot from the start of the motion path to it's end and than back. However my test case behave not as expected. Can you guys take a look?

As I can see when selecting the dot element in the console it moving over a path with same shape but misplaced

See the Pen MJgdaX by Nikolaus91 (@Nikolaus91) on CodePen

January 1, 2017

So obvious solution... Thanks OSUblake! Fresh look usually provides a solution in times like this )

January 1, 2017

Here's the codepen with core functions. However I am unable to recreate this bug on codepen.

See the Pen bgbojM by Nikolaus91 (@Nikolaus91) on CodePen

December 31, 2016

Can you scroll multiple time up and down and advise me why the nav dots in the right top corner are not loosing their "isactive" classes on reverse? Mostly concern sections 4 and 5, sometime it's working well sometimes not, there is no visible pattern. Maybe there is a better way to tween classes the using .to with immediateRender.

Thanks in advance & Happy New Year!!!

function mainTimeline() {
    timeline_s1.add("start")
        .to("#S0", 0, {className: "+=isactive", immediateRender: false})


        .add("End S0")
        //.add("S1start")
        .addPause()

        .to($section_one, .4, {y: '+=40', autoAlpha: 0, ease: Power4.easeInOut})

        .add("S1start")

        .to("#S0", 0, {className: "-=isactive", immediateRender: false})
        .to("#S1", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom($section_two, .4, {y: '+=50', autoAlpha: 0, ease: Power4.easeInOut})

        .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", immediateRender: false})
        .to("#S2", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S22")
        .staggerFrom($section_three, .4, {y: '+=50', autoAlpha: 0, 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", immediateRender: false})
        .to("#S3", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom($section_four, .4, {
            y: '+=50',
            autoAlpha: 0, ease: Power4.easeInOut, onComplete: function () {

                timeline_s3.play();

            }
        }, "S33")

        .add("S3end")

        .addPause()


        .to($section_four, .4, {autoAlpha: 0, ease: Power4.easeInOut})

        .add("S4")
        .to('#showQuote', 0.35, {y: '-=40px', autoAlpha: 0, ease: Power4.easeInOut})
        .to("#S3", 0, {className: "-=isactive", immediateRender: false})
        .to("#S4", 0, {className: "+=isactive", immediateRender: false})

        .staggerFrom($section_five, .4, {
            y: '+=50', autoAlpha: 0, ease: Power4.easeInOut, onComplete: function () {
                timeline_s4.play();
            }
        }, "Change class4")


        .add("end");
}

mainTimeline();

See the Pen by (@) on CodePen

December 29, 2016

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

December 29, 2016

Hey,

do we have some working layer slider's little bit more advanced than this one: http://nil4you.github.io/Multi-Layer-Slider/

??

December 29, 2016

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

December 29, 2016

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.

December 29, 2016

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

December 29, 2016

I have probably answered myself when speaking out loud while writing

Would the best solution be to call a function with Tween inside in certain moment on the timeline?

December 29, 2016

Thanks for reply @PointC.

I think I understand "the label" technique a bit and I should be more specific. The most important part of my question is how to make part of my timeline playable in only one direction. Like a normal TweenMax.to which runs separately.

So a better stated question would probably be: How to call an exterior Tween from within the timeline.

December 28, 2016

Hey, I have a quick question, I have build a website with hijacked scroll (I know it's bad but it was requested...) and I can't find a solution how to play parts of the timeline only once (in one way).

Here's my timeline:

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("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()

in ex. when users scrolls top, this parts is reversed too:

.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("S1start")

How can I avoid it?

P.S. This is my first gsap only website so I will much appreciate any suggestions about improving the JS code. Thanks in advance!

See the Pen by (@) on CodePen

Notifications

Messages

mk1

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by mk1

How to play onComplete on timeline reverse

Buggy Typewriter effect with SplitText

Success screen after sending a message

How to play onComplete on timeline reverse

Success screen after sending a message

How to play onComplete on timeline reverse

How to play onComplete on timeline reverse

How to play onComplete on timeline reverse

Success screen after sending a message

Morph + Bezier

Buggy className tweening

Buggy className tweening

Buggy className tweening

Resetting timeline and tween on resize not working as expected

GSAP based Layer slider

Resetting timeline and tween on resize not working as expected

Resetting timeline and tween on resize not working as expected

Resetting timeline and tween on resize not working as expected

Run part of the timeline only once

Run part of the timeline only once

Run part of the timeline only once