Search the Community

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