Simple tween delay or chain

[mulegoat]

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

[Carl]

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/

[mulegoat]

Thank you Carl!

 

Works much better now