Search the Community

I'm loading my SVG files into different elements on my website. I'm trying to animate it with TimelineMax and it's didn't animated. I think it's because SVGs loaded dynamically and TweenMax didn't see them. How to animate them with TweenMax?

Hello, I'm new user of GSAP, and I try to make a webapp projet, with animation created with GSAP. I have not really problem for create and animate, it's a hard process to know all posibility of this tool but, is not the problem.. My approach is to try to launch SVG animation without hover (obviously in ipad) and without click: - My webapp content section (fullpage.js) like : #section1 : "home" - #section 2 : "my first animation" etc... I see the examples : http://www.publicis90.com/#/publicis90, or that one http://www.cryptarismission.com/ on this site and it's awesome but i dont understand how can i do that.. I want said : When I change section -> my animation start. If i launch my app now.. All animation start in background and when i change #section, animation is ended.. I sorry for my english and my incomprehension :'( Thanks a lot B.

Hi! I have a lot of tweens I want to start and complete at the same time. Is there an easier way to do that than this code?: TweenMax.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'}); TweenMax.to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'}); TweenMax.to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'}); TweenMax.to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'}); TweenMax.to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'}); TweenMax.to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'}); TweenMax.to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'}); TweenMax.to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'}); TweenMax.to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'}); TweenMax.to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'}); TweenMax.to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'}); TweenMax.to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'}); TweenMax.to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'}); I know you can make a timeline, but then all the tweens will happen after each other. Also, how would i repeat all those tweens without copying myself? Thanks

Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2 t2.play(); In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with t1.play() before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.

I am trying to use tweenTo to skip panels if user clicks on it, but when i use oncomplete: resume , it goes back to panel where it was clicked rather than continuing. I apologize as I could not make a codepen. $(document).on("click", "h1", function(e) { var label = $(this).attr("panel"); e.preventDefault(); var t=timeline.getLabelTime(label); timeline.tweenTo(t,{onComplete:resume, onCompleteParams:[], ease:Strong.easeOut}); function resume() { timeline.resume(label); //it does not resume from label or time t } });

Hi everyone, I am completely new to both GSAP and Gulp and I'm having troubles to run gulp after gsap installation. Don't know what to do. I have installed gsap this way: "npm install --save-dev gsap" and after that I add to my gulpfile.js gsap = require('gsap'); after that, i run gulp on my cmd and this shows up: C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535:11) at check (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5858:61) at new Definition (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5875:10) at window._gsDefine (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5880:12) at Array.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2488:11) at C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7634:9 at Object.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7645:3) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) What did I do wrong?!? Am I missing something? Thanks in advance.

I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!

Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.

Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.

Hi Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height? in this pen - http://codepen.io/beamish/pen/LNXYGN - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom? Thanks, Elior

I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true }); The css for the popup is as follows: #attribution { position: fixed; width: 80%; top: 10%; margin-top: 7%; margin-left: 7%; margin-right: 7%; padding: 3%; text-align: center; z-index: 200; background-color: rgba(255, 246, 233, 0.9); border-radius: 25px; border: solid; border-width: thin; box-shadow: 4px 4px 4px #777; -webkit-box-shadow: 4px 4px 4px #777; } Any ideas what could cause the delay in drawing, which sometimes occurs? When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll. Thanks for any help.

Hi everyone First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful. My WIP http://goo.gl/RWzDCK the js in the site is not yet optimized. I'm optimizing it on my local server. And here are the questions. 1) I'm animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline. The problem is, there are some objects that are being generated based on conditions (for example, ".pencils") . Meaning some objects are only implemented in to the page in some cases. But when they do, they are animated within these timelines. So, when I define them before hand and call them in timeline later on, I receive "Uncaught Cannot tween a null target" if they are not present in the page. Is there a way to if(pencil) in timelinemax ? IF not, should I leave them as ".pencil" instead of pencil 2) Im currently animating several timelines and all time lines are animating sprites. In some cases, some timelines are either fired simultaneously or within few frames from eachother. In pcs and laptops onviously animations runs smootly but I start to see some lags (not cutout lags but like stutters ) in tablets and phones. I'm now trying to optimize the script but if there are any general tip on animating for mobile devices would be welcome. 3) I'm creating cookies and checking them in document.ready. This way, I would like to fire animations once every few day (since they are basicly small animation movies). Based on whether the cookie exist or not, I'm loading one of the two style sheets. They both have same elements but different images. StylesheetA has sprite images where else StylesheetB has static (and waay smaller), one frame images. So if cookies exist. No animation is fired, and only the static image is loaded. However, this approach causes more than half of the images to fail loading with errors stating the images are corrupt. After 2 week of trying to solve (changing ftp client since I'm thinking, the ftp client is corrupting images while uploading them) this problem, I've found out that the error is not due to images being corrupt but browsers are over encumbered loading styles and trying to get all the images.at the same time.Since, I dont receive the same problem when I leave stylesheets intact in the head. Is there a better way to overcome this problem? Any suggestion on the matter is welcome. Thank you

Hello, First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn . I am trying to rotate a image and control the animation, very similar to the Ferris example: http://codepen.io/GreenSock/pen/wBbKs?editors=1010 The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance? The problem is that, related with this rotation, I am drawing a sine wave based on the tween progress. However, when TimelineMax reaches onReverseComplete or onComplete, a small lag can be checked in the sine wave drawing, distorting the result. I do not find this lag if I use only TweenMax, but I am not able to do a reverse infinite loop only with TweenMax... Thank you in advance!!

I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen. Following is my code for reference. Please someone help & let me understand the reason behind it. CSS @import url(http://fonts.googleapis.com/css?family=Nunito); html { height: 100%; /* OVERFLOW HIDDEN NOT ALLOWING JAVASCRIPT SCROLL */ overflow: hidden; } body { margin:0; padding:0; /* perspective: 1px; transform-style: preserve-3d; */ height: 100%; overflow-x: hidden; font-family: Nunito; } h1 { font-size: 250%; margin: 0; padding: 0; } p { font-size: 140%; line-height: 150%; color: #333; } .slide { position: relative; min-height: 100vh; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; } .slide:before { content: ""; position: absolute; top: 0; bottom: 0; left:0; right:0; } .title { width: 50%; padding: 5%; border-radius: 5px; background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); } .slide:nth-child(2n) .title { margin-left: 0; margin-right: auto; } .slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0; } .slide, .slide:before { background: 50% 50% / cover; } .header { text-align: center; /*font-size: 175%;*/ color: #fff; text-shadow: 0 2px 2px #000; } #title { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg"); background-attachment: fixed; } #title h1 { padding-top: 80px; } #slide1:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide2 { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"); background-attachment: fixed; } #slide3:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide4 { background: #222; } .fixed-header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1; text-align: center; color: #fff; } HTML BODY <body> <div id="scroll" class="fixed-header">CLICK HERE TO SCROLL</div> <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide3" class="slide"> <div class="title"> <h1>Slide 3</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide4" class="slide header"> <h1>The End</h1> </div> </body> JavaScript <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/plugins/ScrollToPlugin.min.js"></script> <script> (function() { var $ = function(selector, el) { if (!el) {el = document;} return el.querySelector(selector); }, $$ = function(selector, el) { if (!el) {el = document;} return el.querySelectorAll(selector); }; $('#scroll').addEventListener('click', function(e) { // GSAP CODE var posTop = $('#slide1').offsetTop; TweenLite.to(window, 2, {scrollTo: posTop}); }); }()); </script> Kindly help.

Hello, Yes - I'm still using GSAP for Flash (It's awesome) - so I'll post my question here, even though it's very relevant to the Javascript version too. I'm sure some of you (especially the GreenSock folk) know about google's UI experience guidelines. Here's a link: https://www.google.com/design/spec/animation/authentic-motion.html Specifically, the authentic motion ones are very critical. It makes a night and day feeling when it comes to using apps and games. I'm wondering, to the Tween experts at Greensock, is it possible to do asymmetric deceleration like in the Mass and Weight section in this example, feels like the EaseIn and EaseOut are different numbers / factors? Thanks!

Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement. I've got it behaving correctly via taps but I really need it work with dragging as well. any thoughts? Thanks! Jason http://codepen.io/OrganicPixels/pen/VaXbVV

Hi! Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes. Example: Want to add a class by name: "hover" My div has classes: <div class="btn animate-hover color-green">My Button</div> The result will be: <div class="btn animate- color-green hover">My Button</div> It shouldnt behave like that am I right? If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div> Possible to solve this? Many thanks!

I have a very simple setup with two elements tweening right and left. One is using 'x' and 'force3D:true' while the other is simply using 'left'. Both seem to 'stick' as they move across the page, looking almost laggy. I'm running Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0. I even recorded the browser with quicktime and you can see it in the video, too. Is anyone else getting the same result?

Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

I've created some morphing icons that morph back and forth with different easing functions on .mouseenter() and .mouseleave() (using jQuery .hover method) I'd like to force the Tween in my hoverOver functions to complete before the hoverOff function is allowed to start. I'm a little stumped on how to achieve this. Can anyone point me in the right direction of how to do this?

Hi, I want to collapse a <hr /> and then open it again, please see the codepen. First problem is that setting the width to 'auto' is not quite working. Next Problem is that the hr collapses towards the left and not to the center. Any suggestions? Thanks in advance!

Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.

Hey everyone, Image you have a cartoony chess game. And you're sliding the queen from one end of the board to the other. I want to add a teetering effect, with the piece pivots on it's base a bit to begin it's slide, and then teeters in the other direction when it ends. I have the pivot centre at the bottom center, but I can't seem to find an elegant way to pivot back and forth. So what I've done is: var maxTilt:Number = 10; // degrees var slide:TimelineLite = new TimelineLite( { autoDispose:true } ); slide.add(TweenMax.to(obj, DURATION / 4, { rotation: -maxTilt} )); slide.add(TweenMax.to(obj, DURATION / 2, { rotation: maxTilt } )); slide.add(TweenMax.to(obj, slide.add(TweenMax.to(obj, DURATION, { startAt: { x:from.x, y:from.y }, x:to.x, y:to.y, ease: Back.easeInOut.config(1.0) } ), 0); DURATION / 4, { rotation: 0} )); Problem is the nice ease effects can't be transitioned between the tils. Is the best way to do this? I hope not. Thank you! Mark

i want to make a animation where circle is created randomly using canvas and i want scale all the circle at the same time with their origigin X and Y. please help me solve this issue . i have generated the circle but they were not scaling when i scale property it scale the whole circle as a single object. please help me thank you. here is a codepan link http://codepen.io/rk25028/pen/QNObbd please solve this i want every circle should scale.

I have to move the small circie on the path. the circle emits animated flying circle when continuous clicked. I want to When I continuous click the button,the every circle would complete the animation one by one. But,in my code,when I continuous click the button,the circle's animation will stop. I did not want results. Please find the code on codepen Thanks.