mk1

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.

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

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

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/

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

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.

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

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.

Hey guys, first quick question before I will start coding in this thread. How can I connect this animation: http://codepen.io/chrisgannon/pen/PwMbbv (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.

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

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

Here's the codepen with core functions. However I am unable to recreate this bug on codepen. http://codepen.io/Nikolaus91/pen/bgbojM

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

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

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

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

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.

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!

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?

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.

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!