Rodrigo

Hi Paul, Just like Jonathan and Carl I'm not completely sure of what's the desired effect you're after. Carl's suggestion seems to be the ideal thing, because that pauses the timeline at 20 seconds independently of it's total duration and in the callback you can add a timeline.seek(0) to set the timeline's playhead at zero seconds. Also a suggestion would be to take the code to add the timeline to the array outside the loop because every time the loop runs, you're adding the timeline, so if you have 4 elements, the timeline will be added 4 times to the array and any callback you place inside it will be triggered 4 times and that could cause some odd behaviour later on your code. You could add the timeline to the array after the loop. $.each(assets, function(a, { var timeline = new TimelineMax(); if(a == 0) { TweenMax.set($("#drifter"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 100 }); timeline.add(TweenMax.to($("#drifter"), 2, { y: 0 })); } else { TweenMax.set($("#cape"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 200, y: 100 }); timeline.add(TweenMax.to($("#cape"), 5, { y: 0 })); } timeline.addPause(2.5, function(){timeline.seek(0)} ); }); timelineArr.push(timeline); Rodrigo.

Hi, Perhaps you could try a manual scroll controlled tween for that part, take a look at this: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ Rodrigo.

Hi Jonathan, I've never used frames in the JS version, only the AS version but on counted occasions, always went with time. So because of that I always work with seconds. For the same reason I couldn't tell you when to use frames, perhaps when you need a frame by frame, or update by update control of what's going on with the animation and the code. Maybe when creating games, but that's so not my area. I can't remember the post but Jack once said that browsers use the RAF event which runs on 60 fps based on modern screens refresh rates for better results. take a look at this from W3C: http://www.w3.org/TR/animation-timing/ But as far as I know this doesn't depend so much in browser capacities, because things could run faster but bottle necks in terms of rendering would cause big issues in this matter. Best, Rodrigo.

Hi Paul, One of the first things that come out is this: var tn; tn = TweenMax.set( $("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", opacity: 0, width: "60px", x: 10, y: 10, transformOrigin: "left center" }); tn = TweenMax.to($("#logo"), 4, { delay: 0, opacity: 1}); tn = TweenMax.to($("#logo"), 2, { delay: 4, opacity: 0}); Basically here you're changing what tn is, first is the set instance, then one to instance and finally another to instance, is pretty much like this: var a = 1; a = 2; a = 3; console.log(a);//returns 3 What you should do is create the set instance and two different to instances. Then you add the to instances to the timeline, like this: TweenLite.set( $("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", opacity: 0, width: "60px", x: 10, y: 10, transformOrigin: "left center" }); var tn2 = TweenMax.to($("#logo"), 4, { opacity: 1}), tn3 = TweenMax.to($("#logo"), 2, { opacity: 0}), masterTimeline = new TimelineMax({paused: true, repeat: -1}); masterTimeline.add([tn2,tn3], 0, "sequence"); window.onload = function() { masterTimeline.play(); }; Give that code a try and let us know if it's working as expected, otherwise fork it and modify it to your scenario. Rodrigo.

Hi, Well my best guess is that the sliders animations reside in a master timeline, and each slider has it's own timeline to show the code and sample. Also depending on the example type another timeline could be also in the mix, probably not nested. As far for each individual slide things get more simple (I'm leaving the examples out just in case). Each slider is a parent element and has child elements inside, if you see with detention the samples slides have the same effect, their child element's do a staggerFrom a given left value and opacity:0 or near 0. For the text slides they share a lot of animations, paragraphs come from below and opacity:0, so again a from() instance and a staggerFrom when list elements are present. As you can see is not very hard and that sample shows how deep you can go with just a single timeline and labels, the rest is just getting to know how every animation looks like. Rodrigo.

Hi, The reason Carl is asking for a simplified sample is because sometimes things might look good on the code, but you can find the issues with the code running. Another possibility is a link to a live page. Is not the easiest thing to troubleshoot with just a code extract . Question, the first five animations happen normally, I mean in a good sequence, no strange issues?. Since you're using scrollorama another question would be if you need to scroll to play the first animations or they happen when the page loads?. I don't know if it'll fix anything but could you try the following code and let us know how it goes?: var controller = $.superscrollorama({}) controller.pin($('#slides'), aniDur,{ anim: (new TimelineLite({paused:true})) Perhaps if the timeline is paused the issue could be solved. Again, sorry but we're not scrollorama experts so we're not very familiar with the way it handles the timeline instance being used. Rodrigo.

Hi James and welcome to the Greensock forums. I'm going to start with the obvious, have you added a console.log to the treeanimation callback?, just to check that behaviour. Also you could try reading each tween progress, to see if they reach 1 (the progress of any tween/timeline goes between 0 at the beginning and 1 at the end), it could be that the tween's might not reaching the end. Also you said that it works after the fifth animation. In that animation's onComplete you make some css changes, mainly you add a class to the element's parent and replace the content of another element with an image. Finally you could also try the set method instead of JQuery's css, like this: function treeanimation(treeFrame) { bgPos = treeFrame*211; TweenLite.set($("#plant"), {backgroundPosition:'0px ' + bgPos + 'px'}); } Unfortunately we're not superscrollorama experts here so it'd also help if you could set up a reduced live sample (jsfiddle or coedpen) showing the issue. Best, Rodrigo.

Great job Thank you for sharing your solution with the community. Happy tweening!!

Hi Dave, I'm not sure if this is a perfect solution but it could help a little: http://codepen.io/rhernando/pen/jaigd Basically is a combination of rotation and a bezier path. The reason to separate the motion in 4 tweens is that controlling everything in just one tween didn't looked good, or may I say, even worst than it looks now . Also you could take a look at some canvas samples, in kineticsjs there are some amazing things and remember that the engine has a kinecticjs plugin so you can work with both. Rodrigo.

Hi, For zero duration tweens better use the set() method. Also every css property works on camelCase, so in this case your code should be: TweenLite.set($("#icon_media"), {backgroundImage:'url(img/icon_media_orange.png)'}); Also if you're going to use the css wrapper it shoud be like this: TweenLite.set($("#icon_media"), {css:{backgroundImage:'url(img/icon_media_orange.png)'}}); Rodrigo.

Hi Mathias, How this looks?: http://jsfiddle.net/EjpSu/10/ One other thing, if this is related with the flipping cards app you're building there's a couple of extra comments: 1.- This may not be the perfect solution for that scenario, in that case the change of the z-index should be triggered by the drag event and once you drag another element remove the z-index from the previous one. 2.- Please keep your questions related to the same issue in the same post, even if the original issue is not related with the new one, is the same app so it is related if you follow the thread. This comes in handy if in the future another user comes across a similar issue, all the answers reside in the same post. 3.- Due to obvious reasons we tackle the issues related with GSAP, so try to keep your questions in that area, although we'd love to help all the folks with all the questions they have the day still has 24 hours, so ultimately we can't. This time your issue was very simple, so it is resolved, but if you look in the forums not every non-GSAP issue is resolved. 4.- It strikes me as unusual that you're using JQuery's draggable instead of Greensock's draggable class, any particular reason for that?. So you know GSAP's draggable DOES handle the z-index issue and in a very elegant and efficient way, also has callbacks and, like the rest of the engine, is very robust and easy to use, you could give it a try. If this is not related, please DO IGNORE everything I wrote above Rodrigo.

Hi Barry, Interesting plugin, specially since it helps with the code to draw the paths. Would be very nice to combine that with the technique in the codepen created by Carl, it'll be definitely a step forward in terms of how much time anyone will spend in getting the drawing correct. Happy tweening!!

Hi, Unfortunately we're not superscrollorama experts, but one thing that you could try is create the timelines paused, like this: orig1.style.stroke = '#f60'; var t1 = controller.addTween( "#hospital_drawing", (new TimelineLite({paused:true})) .add([ TweenMax.to(obj1, .5, {length:obj1.pathLength, onUpdate:drawLine1, delay:4,ease:Linear.easeNone}) ])); function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' '); } Question, have you tried without superscrollorama?. Try creating a master timeline that is paused, then create individual timelines or tweens to draw the lines, then nest those tweens/timelines to the master one with the add method and with an event play the master timeline, if that works what you could do is create a dummy tween that lasts 0.0001 seconds, add that to superscrollorama and add an onComplete callback to play the master timeline, not pretty but it could work. Rodrigo.

Doh!!! I forgot to add the closing bracket on the each loop and the tween in the rotateCard function tween. Also you have this in the code: create: function(){ var $this = $(this); $this.css("z-index", z++) $this.data('starttop',$this.position().top); $this.data('startleft',$this.position().left); }, But z is not defined, thus breaking the loop, I corrected all those errors and is working now: http://jsfiddle.net/AFU3T/22/ You still need to tinker a little bit the z-index in order to get the current card on top of the rest though, but is a minor tweak. Rodrigo.

Hi, Remember that you have this on your code: if(tweenLeft.isActive() || tweenRight.isActive()) { return false; } So basically if any tween is being played no other will be triggered, so instead of checking if the tween is active you can check if the target element is being tweened using the isTweening() method: if(TweenMax.isTweening($this)) { return false; } Now you just create a global function that handles the tween: function rotateCard(target, angle) { TweenLite.to(target, 1, { rotationY: angle, transformStyle:"preserve-3d",ease:Back.easeOut, paused:true); } Finally in the draggable function instead of calling tweenLeft or tweenRight you call the function and pass the target (that'll be the card being dragged) and the angle (which will depend on the drag direction), like this: if(dirX == "right") { rotateCard($this, '+=180'); } if(dirX == "left") { rotateCard($this, '-=180'); } Like only the current card being dragged will rotate and you avoid the behaviour you get by using restart(), which basically takes the tween to the starting point everytime, so it doesn't seems to be a continuous rotation. function rotateCard(target, angle) { TweenLite.to(target, 1, { rotationY: angle, transformStyle:"preserve-3d",ease:Back.easeOut, paused:true, onComplete:function(){}); } $.each($(".cardContainer"), function(index, element) { $(element).draggable({ helper: function(){ return $('<div></div>').css('opacity',0); }, start: function(event,ui){ xPos = ui.helper.position().left; yPos = ui.helper.position().top; }, create: function(){ var $this = $(element); $this.css("z-index", z++) $this.data('starttop',$this.position().top); $this.data('startleft',$this.position().left); }, drag: function(event, ui){ $(element).stop().animate({ top: ui.helper.position().top, left: ui.helper.position().left },500,'easeOutCirc',function(){ }); if(prevXPos > event.pageX) { dirX = "left"; } else if(prevXPos < event.pageX) { dirX = "right"; } prevXPos = event.pageX; if(TweenMax.isTweening($this)) { return false; } if(dirX == "right") { rotateCard($this, '+=180'); } if(dirX == "left") { rotateCard($this, '-=180'); } }, start: function( event, ui ) { prevXPos = event.pageX; dirX = ""; } }); } I also took the liberty to remove some stuff from your code that aren't needed like the transform origin and the empty onComplete call. Give that code a try and let us know. Rodrigo.

Hi, Maybe you could create a loop and assign every card it's own draggable instance. Right now you're adding the same draggable instance to all the elements contained in the JQuery object, so when the event is triggered it affects all the elements in the JQuery object (which in this case acts like an array). Try something like this: $.each($(".cardContainer"), function(index, element) { $(element).draggable ({ //Draggable stuff here }); }); And as Jonathan suggested put the tweens inside the draggable callback or create a function to call the tweens passing the target and rotation direction as arguments to the tween. Keep in mind too that by default the transform origin values are "50% 50% 0px" so there's no need to define that and pass the extra code to the CSS plugin, just in case you have more things tweening in your app. Also never use the same ID in more than one element, that's a very important no-no when it comes to coding (whether is JS, AS, PHP, etc), ID's should be unique and are useful to identify every element independently of the rest, while classes are useful when the code must be applied in more than one object, independent of it's ID. Rodrigo.

Hi and welcome to the Greensock forums. Never had or saw this issue before, but after asking google I've found that the cause is not defining a width for the target element and since responsive design is a must do this days, almost everyone works with a defined width for every element, reason why no one ran into this before or never has been reported in the forums, that I know. In your code if you set the element's width to 100% works perfectly, unless you can't define a width for the element, which would be an odd scenario. Another solution is to set the body margin to 0, if you check the problem the width is decreased by 16 pixels and the native margin of the body tag is 8 pixels in any direction, so 8 pixels to the left plus 8 pixels to the right equals 16 pixels less in your element. Set the body margin to 0: body { margin:0; } Set a width for the element: <div class="itsstatic" id="target" style="padding: 0px; margin:0px; background-color:lightgray;width:100%;"></div> Best, Rodrigo.

Hi, It has been done before, take a look at the following codepen: http://codepen.io/rhernando/pen/npBoF It's basically the same principle and both instances update each other. Just another neat trick under GSAP's sleeve. Best Rodrigo

Hi, The progress method works as a setter by passing the progress value for the particular instance, which has to be a number between 0 and 1, like this: var tn = TweenLite.to(elem, time, {vars, paused:true}); tn.progress(0.5);//the playhead will be at the tween's mid-point The update method you're mentioning works specifically with the Draggable instance and has no correlation with updating a tween, in this case at least. In order to modify and update a tween's progress you should use the onDrag callback, which works in the exact same way as the onUpdate method for any tween instance. For example every time you drag a draggable's target element, that callback is triggered, like that you can link that function to a tween's progress: var tn = TweenLite.to(element, time, {vars}), progressNumber; Draggable.create(draggableTarget, { type:'x', bounds:draggableBounds, edgeResistance:1, onDrag:function() { progressNumber = number//here you perform the calculations to set that number tn.progress(progressNumber);//here you update the tween's progress on every drag event } }); I set up a codepen illustrating this code: http://codepen.io/rhernando/pen/Batoc Rodrigo.

Hi, It's hard to see what the problem could be with just those code lines, my only guess is the event that's triggering the function where the tweens are created and executed. Please create a reduced codepen or jsfiddle that demonstrates the issue you're having, in order to get a better idea of what could be causing this.

Hi, Now I understand, sorry I didn't catch the concept from the first post. Here's an incredibly simple modification of the codepen, is not a bullet proof scenario but at least it should help you getting started. I'll try to get something more robust during the afternoon. http://codepen.io/rhernando/pen/IJfAy Best, Rodrigo.

Hi and welcome to the Greensock forums. In terms of flipping elements I made a codepen a while ago: http://codepen.io/rhernando/pen/vjGxH As you can see is not a very difficult stuff, although I'm not sure if it meets your needs. If not please fork that codepen and accommodate it to what you're after so we can get a better idea of the issue, is always a great help when folks present their problems with reduced live samples, it allow us to tackle this things very quickly. Best, Rodrigo.

Hi, You should keep in mind that GSAP animates CSS properties and tweens any numeric values an object may have, but it doesn't directly draw lines. What you can do is use GSAP timing mechanism to draw the lines with the correct given data. Yake a look at this post: http://forums.greensock.com/topic/8510-animating-svg-paths-within-a-timeline/ Check the stackoferflow link and the amazing codepen made by Carl is a must see, so you can check how simple is to use the engine for those purposes and that the heavy load comes with getting the SVG paths correctly. Best, Rodrigo.

Hi, The problem with the double click is that after the first click a Tween is triggered and during the little time between on click and the other the element translates a small amount of pixels, then the second click happens and a new Tween is triggered. This new tween overwrites the previous one and takes the current starting value and subtract 750 pixels from it. Your element's final position won't be -750 from it's original position. One solution is to create a conditional logic to test if the element is being animated and use an onComplete callback to release the conditional logic: $('#Rt-arrow').click(function() { if(!animating) { animating = true; TweenLite.to('#slider', 2, {x:-750, onComplete:function() { animating = false; } }); } });// end click Another possibility is create a paused tween outside the click function and call play() on the click event: var Tween = TweenLite.to("#slider", 2, {x:-750}); $('#Rt-arrow').click(function() { Tween.play(); });// end click Like that it doesn't matter how many clicks you make the tween is already playing and calling the play() method upon it won't make any difference. Rodrigo.

Hi, Since you're passing absolute values (meaning values in pixels), the only solution is to create some code that changes those values depending on the screen size and then pass those values to the bezier plugin through an array. You can see how to pass the values via array to the bezier plugin look at this codepen of the Greensock collection: http://codepen.io/GreenSock/pen/ABkdL Rodrigo.