Jump to content
mulegoat

Simple tween delay or chain

Recommended Posts

Hi there

 

I'm using tweenlite for a few simple UI elements and am trying to chain two animations together. I have tried using the delay parameter but this only seems to work sporadically and Timeline seems like it would be overkill. Example below

 

http://www.onceupononline.com/boats/racing-boats/carbon-3

 

The first animation occurs when clicking the 'i' icon (top right of page) which animates an off canvas panel ($copyContainer) in and the second, the reduced opcaity of the fullscreen image container ($rsContent) - which i want to run after the panel has animation has finished. 

 

It seems to work fine on first go when animating in, but when going in reverse it can get a little janky so i'm wondering how to improve this.

 

I can put something on codepen if needs be. Just thought i'd see if there is anything obviously lacking first incase my syntax is wrong since i get a console message of 'invalid delay tween value: 0.5 '

 

My code is below:

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


          (function animateInOutCopy() {

              var $openCopy        =   $('.openContent'),
                  $closeCopy       =   $('.closeContent'),
                  $copyContainer   =   $('#copyContainer'),
                  $rsContent       =   $('.rsContent');


              $openCopy.click(function(e) {
                  e.preventDefault();
                      $(".openContent").addClass("is--hidden");
                      $(".openContent").removeClass("is--active");
                      $(".closeContent").addClass("is--active");
                      $(".closeContent").removeClass("is--hidden");
                      // slide copy in
                      TweenLite.to($copyContainer, 0.4, {css: {right:"0%"}, ease:Power2.easeOut});
                      TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10", delay:0.5}, ease:Power2.easeOut});
                      console.log("Copy Inview");

              });

              $closeCopy.click(function(e) {
                  e.preventDefault();
                      $(".closeContent").addClass("is--hidden");
                      $(".closeContent").removeClass("is--active");
                      $(".openContent").addClass("is--active");
                      $(".openContent").removeClass("is--hidden");

                      // slide copy out
                      TweenLite.to($copyContainer, 0.4, {css: {right:"-50%"}, ease:Power2.easeOut});
                      TweenLite.to($rsContent, 0.4, {css: {opacity:"1", delay:0.5}, ease:Power2.easeOut});
                      console.log("Copy Hidden");

              });


          })();


}); 

Many thanks for any and all help or suggestions

 

M

Share this post


Link to post
Share on other sites

Simple syntax error. You are nesting delay in the css object.

 

bad:

TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10", delay:0.5}, ease:Power2.easeOut});

good:

TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10"}, delay:0.5, ease:Power2.easeOut});

FWIW you really don't need the CSS object at all. If the target of your tween is a DOM element and you are tweening css properties, that object gets created automatically behind the scenes.

 

You can just do:

TweenLite.to($rsContent, 0.4, {opacity:"0.10", delay:0.5, ease:Power2.easeOut});

http://codepen.io/GreenSock/pen/zgsof

 

More info on the CSS object read the intro to the CSSPlugin docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

More basic demos: http://codepen.io/collection/ifybJ/

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.