Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tween delay'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. 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
×