Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mulegoat

Simple tween delay or chain

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
Share on other sites

  • Solution

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
Link to comment
Share on other sites

Thank you Carl!

 

Works much better now 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×