Rodrigo

Jack beat me to it... Yep clearprops is the way to go, I set up a simple codepen: http://codepen.io/rhernando/pen/hzHdf Best, Rodrigo.

Sorry I had the impression that you were interested in keeping the Back.easeOut, that's why my suggestions went in that direction. Like Chrysto and Jack said the only way is how you're doing it, although I'll suggest to instead of using a callback to trigger the next tween, use a timeilne, perhaps the tiny amount of time for the code's execution could make it more smooth, try the following for the blue box: var tl = new TimelineLite({paused:true}); tl .to($('#box3'), .6, { top: 100, ease:Back.easeIn}) .to($('#box3'), 0.5, { top: 50, ease:Power4.easeOut}); $('#box3').on('click', function() { tl.play(0); }); The reason for play(0) is because with the reset button you put the boxes back to their original positions but the timeline's playhead is already at the end so using play() won't work after the first play, unless you add a tl.reverse() on the reset button. Best, Rodrigo.

Perhaps you could try some sort of mirror reflection effect in the image, that would give the sensation of continuity to the image being animated and is not too time consuming. Also keep in mind that the overshoot is not a lot of pixels so it wouldn't be too notorious. Best Rodrigo

I believe he means during the easing part of the animation, specifically when you work with elastic, bounce and back easing functions, they add a little overshoot in the element's position.

Hi, If the graphics container has an overflow:hidden there's no problem to make the graphic longer , you just have to add a negative margin-top equal to the amount of pixels the graphic has been enlarged. For example if you add 20 pixels to the graphic height then you add a margin-top:-20px in the element's style and since the container has an overflow hidden the excess won't be visible. Also it'd be very helpful if you could set up a reduced sample (codepen or jsfiddle) in order to get a better look at what you're after. Best, Rodrigo.

Chrysto is completely right, Jack gave a detailed answer in another topic with the reasons why this can't be done in one tween, you can see it here: http://forums.greensock.com/topic/7921-translating-css-cubic-bezier-easing-to-gsap/#entry30333 Rodrigo,

Hi, The reason is that set() instances are a shorthand equivalent to zero duration tweens, so you don't have to pass a second argument into the constructor after the tween target. //GOOD SYNTAX TweenLite.set(element, {vars}); //this is the same that the following line TweenLite.to(element, 0, {vars}); //BAD SYNTAX TweenLite.set(element, time, {vars}); //The engine is not expecting the time value so it returns an error Take a look at the API reference: http://api.greensock.com/js/com/greensock/TweenLite.html#set() Rodrigo.

Thanks you guys for all the great work!!

Hi Dwayne Well the engine has the updateTo() method to change the tween values after the instance has been created and played or even during execution, you can check the api reference here: http://api.greensock.com/js/com/greensock/TweenMax.html#updateTo() But in your case, since what's changing is the tween's target, the kill method is the way to go, because the updateTo method acts on the tween vars and not the element being animated. Another choice would be to create a function that takes that element, in this case the first children of the collection, creates and executes the animation, then onComplete calls another function to change the element's and it's next sibling CSS (here you could add an "active" or "first" class to the next and remove it from the first one) and finally call the function that creates the tween again. Although is not the same thing Chrysto created a great sample of recycling one function to animate a series of elements based on selectors, you can see it here: http://codepen.io/bassta/pen/LckBh Rodrigo.

Hi, There is more than one approach to this. One is to animate the background-position property using GSAP. For this you have to create a background sprite that has the 3 images and you tween it's position depending on the mouse event (over, down and out). I set up a simple codepen: http://codepen.io/rhernando/pen/Kvwyt Another option is to add the 3 images to the button container, is not too relevant whether you're using a button tag or a div element with an a tag in it, you can use CSS in order to style it the way you want. Also there are some pure CSS button generators online, just google it. By adding the 3 images on the container you can play a lot more with how they appear/disappear in the container, you can slide them from the right, left, top, bottom, fade in/out and also can use 3D effects, kind of a 3D box button. Also the good thing about this way is that you don't have to create the background sprite, so if for some reason you need to change an image in the future you just replace that image, while using the sprite means creating the sprite all over again. I'll set up some samples during the afternoon and post them. Rodrigo.

Immediate follow up. You also have a syntax error on your easing functions, your code right now states: ease:Linear.ease Ok so easeIn, easeOut, easeInOut or easeNone? As you can see there are a few options, so you have to indicate one. Although keep in mind that by default Linear has no acceleration or deceleration. Take a look at the docs scrollTo Plugin: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html Easing functions: http://api.greensock.com/js/com/greensock/easing/package-detail.html Sorry I didn't catch those before Happy tweening!!

Hi, This is basically a syntax issue, the scrollTo plugin recognizes the axis in which the element is scrolled, that means x for horizontal scroll and y for vertical scroll. Also the plugin includes a very nifty possibility that allows you to pass the string "max" instead of a value and the engine does the rest and scrolls the element to the bottom without any need to pass or calculate a value. Like this you save yourself of tweening the scrollTop property of any element, all you have to do is include the plugin as any other js script. Your code would be like this: Here you include the scripts <head> <script src="scripts/jquery.js"></script> <script src="scripts/gsap/TweenMax.min.js"></script> <script src="scripts/gsap/plugins/scrollToPlugin.min.js"></script> </head> And this goes in your document ready declaration: scrollToBottom(); function scrollToBottom() { TweenLite.to(".social-stream", 10, { scrollTo:{y:"max"},//vertical scroll to bottom delay:3, backgroundColor:"#000000", ease:Linear.ease, onComplete:scrollToTop }); } function scrollToTop() { TweenLite.to(".social-stream", 10, { scrollTo:{y:0},//vertical scroll to top delay:3, backgroundColor:"#000000", ease:Linear.ease, onComplete:scrollToBottom }); } Best, Rodrigo.

Hi There are two possibilities. First you could use force3D: true in the tween vars n order to get the GPU in the mix, thus limiting the CPU cycles involved. Another would be to create a very simple test in order to see if this could be a browser issue, the main idea with this reduced sample is to narrow down the possible causes as much as possible. Also try tje engine's latest 1.11 preview because it has some major improvements on the Draggable tool. Best Rodrigo

Hi In terms if the bounds issue what you could try is create a simple conditional logic to catch the knob angle on dragEnd, if the angle doesn't match the criteria you can tween it back to 0 or 270. Although the best solution is use ThrowProps with the snap function, that does all the work for you and the results are very cool. As for getting the object angle you'll need the _gsTransform object. To access it you have to check the drag target and then access the object using the onDrag callback: OnDrag: function() { var element = this.target, angle = element._gsTransform.rotation; } Beware that you'll get the angle in radians, so you'll need to change it to degrees, unless you're using the latest preview of the 1.11 version of the engine, which I recommend you to use because there are some great new features in Draggable and you don't have to worry about the angle conversion because it'll work with degrees. Best Rodrigo

Mhhh perhaps a shorthand method that adds an empty tween, with the possibility to add callbacks and labels, something like this: var tl = new TimelineLite(); tl.addDelay(time, {callbacks_object}, label, positioning); Like that you don't mess with the timeline flow and timing, you get the chance to create callbacks when nothing is happening(in terms of animations because the timeline keeps running), respect the playhead's direction and if you add a label you can later kill that particular instance. Of course as Carl pointed out you can achieve the same thing using relative positioning of the timeline's next instance. Also for your codepen Jonathan, what you could do is remove the repeat:-1 of the timeline like that the timeline will repeat based only on onComplete and onReverseComplete callbacks, also there's no need to add the onCompleteParams on the callbacks if you're not passing them into the functions. Happy Tweening!!

Hi and welcome to the Greensock forums. It's a tricky thing to accurate draw the exact same curve. One reason could be the curviness factor which, as far as I know, is not considered in Canvas, as you can see in this codepen the results vary depending on the parameters: http://codepen.io/rhernando/pen/kjmDo Another could be the layout properties of the element, keep in mind that bezier through x and y is a transform function therefore it goes through the default transformation point of the element which is, unless you indicate something else, the centre of the element and usually the element is rendered considering the top left corner. For example if your icon is 100px width and height it's current top and left positions are 0, but the transform point is at 50px left and 50px top, so in this case you have to move the canvas 50px in each direction to make it fit the point where the element is being transformed. You can use this codepen from the Greensock collection: http://codepen.io/GreenSock/pen/CHwDx Fork it to meet your scenario and post back any other issue you might run into. Best, Rodrigo.

Hi, The problem is that you first create your timeline, then you create a individual tween instance, since that instance's duration is 0 is completed immediately then the timeline takes over control of the red square. But when the instance created with the click event has any duration the timeline takes over the red square and tween it's current opacity to 0. That happens at 0.5 seconds which is when the click created instance has finished, at that point the red square's opacity is 0, therefore the timeline tweens the element's opacity from 0 to 0. A way to solve this is to start the timeline once the click created instance is completed with an onComplete callback, like this: $(".dDot").click(function() { TweenMax.to("#Car_parts > .part_image2", 0.5, {opacity:1, ease:Linear.easeNone, onComplete:function() { tl.play(); } }); }); Best Rodrigo.

Hi, What you could try is a middle point width negative values. The positive y value takes the elements below their final position, therefore before the animation ends the elements go down and up, which is not the behaviour of the rest of the animation. .staggerTo(revButtonArray, 2, {bezier:{type:"soft", values:[{x:-250, y:-80}, {x:-175, y:-20}, {x:0, y:0}]}, ease:Quad.easeInOut}, 0.05); That should make the elements keep a more "normal" swing pattern. The x and y thing is a little tricky, keep in mind that no matter what the top and left values of any element are, the x and y are always 0 when the document is rendered, unless of course you changed in the CSS using the transform property, so when you have all the circles lined up before the bezier animation starts all their x and y values are 0. Also another suggestion would be that instead of creating two arrays you could use javascript's reverse function in order to reverse the array, you could add some callback to reverse the array before the next tween instance, like this: var elements = $(".elements"), tl = new TimelineLite(); tl .add(reverseArray) .to(elements, time, {vars})//this will make the element farthest to the right start first .add(reverseArray) .to(elements, time, {vars})//here you swing the elements to the left .add(reverseArray) .to(elements, time, {vars});//here you swing the elements back to center function reverseArray() { elements.reverse(); } You can see the reference here: http://www.w3schools.com/jsref/jsref_reverse.asp Best, Rodrigo.

Hi Dave, You're welcome. Just for the record, when I stated in my previous post that using CSS animations might not be the best suggestion is because CSS animations are not nearly as capable or optimized as GSAP is. For further information check the following: http://www.greensock.com/transitions/ The reason for testing with CSS animations is to confirm if the problem is related to the hardware and the site's content below the menu container, nothing more. And it's very possible that with CSS you'll end up with the same behaviour, because CSS' height animation is not hardware accelerated. My idea was for you to test some things out in order to get more details and narrow down the possible causes of this issue. Best, Rodrigo

Hi Joe, Sorry but I'm having problems understanding what is exactly the problem. The circles stagger to their current positions from above, then they swing to the right, then to the left and finally they get to their original position. According to your post, what exactly is not right about that last part of the timeline (when the elements go back to their original positions)?. Again sorry for being too lineal about it but my mono-neuronal brain is going to need more info Best, Rodrigo.

Hi, You could try passing the tween to the onComplete call and use the tween's target, like this: var blink = new TimelineMax({repeat: -1, yoyo: true}); blink.staggerTo(".box", 0.1, { className: "+=blue", ease:Linear.easeNone, onCompleteParams: ["{self}"], onComplete: function(tween) { $(tween.target).removeClass('blue'); } }, 0.1); Although you could achieve the same effect with a TweenMax.staggerTo() instance, unless you're adding something else to the timeline. Best, Rodrigo.

Hi Dave and welcome to the Greensock forums. Sorry to hear that you're experiencing problems. I just tested the link in a Sony Xperia tipo (single core 800 mhz and adreno 200 gpu) with Android 4.01 and in chrome and native browsers I see the issue you describe. My best guess is that this could be more of a hardware than software thing, mainly because you said that when you remove the text below the menu everything works fine and in desktop/laptop (usually better hardware specs than most devices) works very smooth. One of the reasons could be the fact that webkit browsers put appearance over performance, hence everything will look very nice but it'll be costly in terms of CPU and GPU. Perhaps the "cost" of every repaint of the text and everything below the menu is what's causing this. Of course you'll need more info in this one, perhaps other users with other devices could chip in and share their UX in this matter. Also you could try animating this via CSS animations, I know is not the best suggestion but if the animation's still a little jerky you could narrow it to the device. The point is that I'm pretty sure that this has nothing to do with GSAP, also your code is quite small and simple, therefore not the cause of this behaviour. Another chance could be to get it outside WordPress, just a simple html page with a media query in it just to test if the issue could be WP. Also instead if this: $('#menuicon').click(function() { var menuheight = $('#global_links').css('height'); if (menuheight == '0px') { var linkscontainer = $("#global_links"); var linkheight = $("#global_links ul").height(); TweenLite.set(linkscontainer, {z:0.1}); var myTween = new TweenLite(linkscontainer, .2, {height:linkheight, ease:Power2.easeOut}); }else{ var linkscontainer = $("#global_links"); var myTween = new TweenLite(linkscontainer, .2, {height:0, ease:Power2.easeOut}); } }); You can reduce your code usnig just one tween instance with the play() and reverse() methods and use force3D:true in the same instance instead of the set instance with the z:0.1: var linkscontainer = $("#global_links"), myTween = new TweenMax.from(linkscontainer, .2, {height:0, ease:Power2.easeOut, paused:true, force3D:true}); $('#menuicon').click(function() { if (menuheight == '0px') { myTween.play(); } else { myTween.reverse(); } }); The beauty of the from() method is that the ul container's height will be 0 when the tween is paused and then you can tween the element's height to it's actual size without getting and storing the height in a variable, so if in the future you add or remove elements of the menu it'll respect the height and take it from 0 to it's actual value, pretty neat right? Also see if you can get any help from Open Device Lab: http://opendevicelab.com/ Hopefully you'll find someone near your location that could help you test in various deivces. Best, Rodrigo

Hi Take a look at the codepen in this post: http://forums.greensock.com/topic/8257-hover-effect-end-tween-same-course/ There's a simple example of a pulse combined with hover and out. Best Rodrigo

Hi The method discussed in this post is a very good approach to hover and out events, playing and reversing a tween/timeline: http://forums.greensock.com/topic/8442-using-the-same-timeline-for-multiple-buttons/ Basically in the mouse over event the animation plays and in the mouse out event the animation reverses. Check the codepen linked there to see it working and feel free to fork and play with it. Best Rodrigo

Hi, When you don't have JQuery or other selector engine you don't need the # in the selector, like this: //Without JQuery TweenLite.to("elementID", time, {vars}); //Returns document.getElementById("elementID"); Whereas when JQuery is present you have to add the #, then the engine returns it as a JQuery selector: //Using JQuery TweenLite.to("#elementID", time, {vars}); //Returns $("#elementID"), a JQuery selector Best Rodrigo.