Rodrigo

Hi, I tried the technique discussed in this forum post: http://forums.greensock.com/topic/8510-animating-svg-paths-within-a-timeline/#entry33350 But unfortunately doesn't work on a polyline converted to a path using Adobe Illustrator, it works only on curved paths. Why? I have no idea, SVG and canvas aren't my strong points so my knowledge is quite limited, perhaps another user could chip in. This sample is a curved line and as you can see a polyline converted to a path doesn't works: http://codepen.io/rhernando/pen/EFxvl Maybe you could try the native SVG animate function as suggested here: http://stackoverflow.com/questions/9036647/animating-a-polylines-appearance-using-svg-animate Rodrigo.

Hi Larry, Yep like Carl said hijacking the natural scroll of the browser could be very tricky, it'll break things up ultimately because at some point the scroll will be needed, unless you remove it from the scenario. If you check my codepen you'll see that I set up all the overflows to hidden; set html and body height to 100% and created a main wrapper with width and height 100% and overflow hidden. Every content goes into that wrapper, then a draggable instance controls the scrollTop of that wrapper, while another draggable instance controls the x axis of the container that simulates your view. Take a second look at it in a small screen and you'll catch the trick. The beauty of it is that the two Draggable instances don't collide and work perfectly in harmony, just another sweet feature of GSAP. Rodrigo.

Hi Larry, It sounds like a really cool use of Draggable. Unfortunately I'm not sure if I understand correctly the issue you're having. It would be great if you could set up a reduced sample of your app in codepen or jsfiddle, that demonstrates the issue because is really hard to troubleshoot without looking at some code. You can fork this codepen of the Greensock collection and add your code to it, it has draggable and ThrowProps plugin, so you don't have to add any script to it: http://codepen.io/GreenSock/pen/KJbIy Also I've created an incredibly simple codepen based on what I understand of your post, you can also fork it and adapt it to show the issue you're having: http://codepen.io/rhernando/pen/hfIqF The ideal thing is to view it in full screen in your device: http://codepen.io/rhernando/full/hfIqF Rodrigo.

Works great!! http://codepen.io/rhernando/pen/fbc4cd953e634b4edcdc4b590d7085e4 Thanks a lot Jack!! Happy tweening

Hi Dennis, Like Carl said is always better to get a simple working demo. Since your code is quite complex is kind of hard to follow so I tried to recreate what you're after but without success (I haven't invested a lot of time into it to be honest). In terms of memory usage you don't have to worry since GSAP has a top notch garbage collection, just like in AS, so there are no worries about the instances eating too much resources. In order to remove or destroy timelines you can use the kill() method: http://api.greensock.com/js/com/greensock/core/Animation.html#kill() Rodrigo.

Hi and welcome to the Greensock forums. In this cases you can use reverse(0). That basically takes the timeline from it's final position to it's beginning, like this: var div1 = $("#div1"), tl = new TimelineLite(); tl.from(div1, 2, {left:600}); //reverse timeline from it's end position tl.reverse(0); If this is not what you need, please post a reduced sample of the issue in codepen or jsfiddle to get a better look. Rodrigo.

Great job Jamie!!

Hi, Draggable has a trigger option that allows you to move the targeted element by using the drag/swipe on another area or element. Check the API docs for more info in the configuration options part: http://api.greensock.com/js/com/greensock/utils/Draggable.html Also here's a very simple example regarding this: http://codepen.io/rhernando/pen/IiHgq Feel free to fork and adapt it to your needs. Rodrigo.

The reason is because of the difference between a JQuery object and a DOM element. A JQuery object is a collection of stuff that includes the DOM element(s) selected. The DOM element is also an object but it refers directly to the element and it's properties, there lies the difference between this and $(this), this referse to the DOM object while $(this) refers to the JQuery object, use a simple console.log in dev tools and you'll see the difference. The animation is added to the DOM element object as a property (in fact you can add anything to any DOM element, just be careful with the names you give to the properties), then you can access to that particular property you do it through the following code: element.property.propertyMethod(); //in the sample is this.animation.play(); //which means for this element (the DOM element being clicked) //find the property animation, that is a timeline or tween //and apply the method play() Since a JQuery object contains the DOM element among other stuff, you just have to look for it and if you check the object with devl tools you'll see something like this: The first element is the DOM element and the second one is the JQuery object. As you can see the first element of the JQuery object is the DOM element, which has an index 0, therefore when you use this code: $("li.active")[0] You're referring to the DOM element in the JQuery object, and that's why one code works and the other doesn't. That particular code looks for a DOM element with the class "active" and if the element being clicked is different from that element, then reverses the timeline accessing the DOM element and finally removes the "active" class through the JQuery object, since the DOM element doesn't have a remove() method. My suggestion would be to play with this and $(this) stuff and console log. You'll get the hang of it in no time. Rodrigo.

Hi Vincent, Thanks for providing the codepen, it was very useful. I think the following code should do the trick: $("li").each(function(index, element){ var tl = new TimelineLite({paused:true}); tl.to(element, 0.2, {width:120, padding:20}) .to(element, 0.2, {backgroundColor:"#004", color:"orange"}, "-=0.1") element.animation = tl; }) $("li").click(function() { if($('li.active')[0]) { $('li.active')[0].animation.reverse(); $('li.active').removeClass("active"); } $(this).addClass("active"); this.animation.play(); }); I forked your codepen. you can see it here: http://codepen.io/rhernando/pen/BczGj Let us know if this is what you're after. Rodrigo.

Yep I see what you mean, sorry I didn't catch it before. Well the solution is quite simple, just remove the change of the snapping boolean from throwEnd to dragStart, like this: var containerDraggable = Draggable.create($("#slide-container"), { type:'left', throwProps:true, maxDuration:1.25, minDuration:.75, edgeResistance:.8, onDragStart:function() { dragTextTween.play(); //we allow the snapping again snapping = false; }, onThrowComplete:function() { startAnimations(count); //if all the slides animations are completed show the drag indicator if(allLinesComplete) { dragTextTween.reverse(); } }, snap: { left: function(endValue) { if(!snapping) { snapping = true; //the las value to be used as a snap point var lastEndValue = snapPoints[count]; //going forward if(endValue < lastEndValue + 560 && count < limit) { count++; } if(endValue > lastEndValue - 560 && count > 0) { count--; } } return snapPoints[count]; }//function end }//snap variable end });//draggable end Like that the slides advance one at a time and you can swipe before the throw has completed. Rodrigo.

You mean the initial scale of the element that contains the image being streched, or something else?. Sorry I got lost in translation here

Ahh right sorry about that. What you could do is remove the conditional logic from the snap function but keep the snapping in order to advance just one slide at a time. Perhaps use this might do the trick: snap: { left: function(endValue) { //the last value to be used as a snap point var lastEndValue = snapPoints[count]; //going forward if(endValue < lastEndValue + 560 && count < limit) { count++; } if(endValue > lastEndValue - 560 && count > 0) { count--; } return snapPoints[count]; }//function end }//snap variable end Rodrigo.

Hi, I'm not sure if I understand clearly, but you could use delayedCall(). It's the engine's setTimeout alternative. I'm presuming that you want the backstrech to start at the same time with the tween but not as soon as the window is completely loaded. it could be like this: $(document).ready(function(){ var tn = TweenMax.staggerFrom([headline, subhead], 2, {scale:0.5, autoAlpha:0, paused:true}, 3); window.onload = function() { //call the function startThings two seconds after the window.onload event TweenLite.delayedCall(2, startThings) } function startThings() { $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000}); tn.play(); } }); If this is not what you're after please post a reduced sample of the issue using jsfiddle or codepen so we can take a better look. Rodrigo.

Actually Jamie's code does have a way to prevent a new swipe while there's another happening: Draggable.create(div1, { type:'left', throwProps:true, maxDuration:1, resistance: 10000, snap: { left: function(endValue) { //if there's another animation in place, snap is true, so the element will be thrown but it won't advance to the next snap point if (!snapping) { snapping = true; var lastEndValue = snapPoints[snapIndex]; if (endValue > lastEndValue+56 && snapIndex < snapPoints.length-1) { snapIndex++; } else if (endValue < lastEndValue-56 && snapIndex > 0) { snapIndex--; } } return snapPoints[snapIndex]; } }, onDragStart:function() { snapping = false; }, onDragEnd:function() { snapping = false; div1.html('End value: ' + this.endX); } }); The same logic is applied in the Greensock Swipe Slides codepen, but with a different code: var containerDraggable = Draggable.create($("#slide-container"), { type:'left', throwProps:true, maxDuration:1.25, minDuration:.75, edgeResistance:.8, onDragStart:function() { dragTextTween.play(); }, onThrowComplete:function() { //we allow the snapping again snapping = false; startAnimations(count); //if all the slides animations are completed show the drag indicator if(allLinesComplete) { dragTextTween.reverse(); } }, snap: { left: function(endValue) { if(!snapping) { snapping = true; //the las value to be used as a snap point var lastEndValue = snapPoints[count]; //going forward if(endValue < lastEndValue + 560 && count < limit) { count++; } if(endValue > lastEndValue - 560 && count > 0) { count--; } } return snapPoints[count]; }//function end }//snap variable end });//draggable end

Hi and welcome to the Greensock forums. Now that the engine has the draggable tool I don't use JQuery's slider anymore, and create my own sliders. In this samples you can see how to update a tween/timeline with a draggable instance and vice versa: http://codepen.io/rhernando/pen/npBoF http://codepen.io/rhernando/pen/Batoc Maybe the issue is the JQuery UI, because if you check this codepen you can see that the slider does makes some jumps from time to time: http://codepen.io/GreenSock/pen/bpezc Rodrigo.

You're welcome. I don't know about the rest of the guys but I don't go to stack overflow to give support for the GSAP questions there, not that I'm against SO in fact I've solved many doubts myself checking there, is just that the reason for the forums is to give the best possible support, which ultimately you'll get, considering the fact that Carl and Jack are always taking a look at the issues and when it's necessary they chip in. It's official support right here by the guys that create and maintain the code, no one knows better than them. Again by no means I'm stating that the quality of the answers given in SO aren't good enough, but again, for complicated issues the best source is here in the forums. Also asking in the forums helps to enlarge the knowledge base that the forums are, so like that every user can benefit for having all the questions in one place in order to find the best possible answer. Rodrigo.

If you mean something to avoid multiple slides moving on hard throws, yep the codepen has that in place. Although Jamie is being quite humble about it , since He's the one that came up with a solution for that particular issue as you can see in this post: http://forums.greensock.com/topic/8349-get-throwprops-end-value-before-snap-triggers/ And this codepen: http://codepen.io/jamiejefferson/pen/FnKba

HI, To complement Jamie's answer there is another way to achieve that, by tweening the timeline's progress value, like this: var el = $('#some-element'); var tw1 = new TweenMax.to(el, 1, {left: 100}); var tw2 = new TweenMax.to(el, 1, {left: 200}); var tw3 = new TweenMax.to(el, 1, {left: 300}); var tl = new TimelineMax() .add(tw1) .add(tw2) .add(tw3); TweenLite.to(tl, tl.duration, {progress:1, ease:Power2.easeOut}); Also the add() method allows you to add an array of tweens and then pass the alignment as a string, like this: var el = $('#some-element'); var tw1 = new TweenMax.to(el, 1, {left: 100}); var tw2 = new TweenMax.to(el, 1, {left: 200}); var tw3 = new TweenMax.to(el, 1, {left: 300}); var tl = new TimelineMax() .add([tw1,tw2,tw3], 'sequence'); Like that the tweens in the array play one after the other. Take a look at the add() method which has an amazing range of uses. Rodrigo.

Hi, Perhaps using force3D:true might help with the glitch: for (var step in tlTrain) { var tlParam = tlTrain[step]; tlX = tlParam[0]; tlY = tlParam[1]; tl.add("insertion" + insertion, insertion); tl.add(TweenMax.allTo(wagons, 1, { x: tlX, y: tlY, force3D:true, ease: Linear.easeNone }, 0.1), "insertion" + insertion); insertion++; } You can see it here: http://jsfiddle.net/fvyS7/2/ Rodrigo.

Hi Jonathan. This one should be: http://codepen.io/rhernando/pen/CLqjh Let me know if you need anything else. Happy tweening!!

That couldn't be more true!!! I remember this teacher in university, Carlos Höeffer, who normally didn't care much if his clothes colours matched. Grey pants and Jacket with a brown shirt, a pant and a jacket from different suits, etc. But one day he made class wearing one pink sock and one blue, green pants, blue shirt and brown jacket, I could spend the rest of my life trying to remember what the class was about (it was the differential equations course), but I'll never forget that outfit

Hi Nick and welcome to the Greensock forums. You can use the call() method, which calls for a specific function at a given time, like this: tl.set("#mod5", {visibility:"visible"}, "#mod5") .call(playSound) .staggerFrom("#e5", 0.5, {autoAlpha:0, x:180}) .to("#e6", 0.5, {delay:1}); function playSound() { soundManager.play('mod5'); } Rodrigo.

Hi Shiyaz and welcome to the Greensock forums. It seems to me like an overwrite issue, but I'm not sure. The thing is that in the animateIn function you add a from instance for scale and opacity and then in the animate out you tween the scale of the element. Since you're creating two instances that affect the same element and the same property the last one created takes priority over the previous one. What strikes me as odd is the fact that you're positioning the instances absolutely, so the scale down shouldn't happen on the moment the fade in, but later. Perhaps it's an expected behaviour but I'm not aware of all the code optimizations of the engine in order to give you a solid answer in that matter. Carl or Jack are more suited for that. What solves the issue is to remove the scale:1 in the animateIn property and, since you're using a from instance, remove the scale from the element's inline style using clearProps, like this. function animateIn(el) { TweenLite.set(el, {clearProps:'scale'}); var tl = new TimelineLite({ paused: true }).from(el, 1, { opacity: 0 }); return tl; } Like that if the element's scale was modified before it'll be removed and the whole animation works as the first run all the time, you can see it here: http://jsfiddle.net/khz8E/2/ Rodrigo.

Well is not a black or white, written in stone kind of stuff. For example if you're aiming to devices with a respectable hardware (iPhone4+, IPad and high-end android) and the amount of elements being animated is not too much, it can boost performance to use x/y with force3D:true instead of top/left, like that those elements are passed to the GPU. Of course desktop/laptops with better GPUs will support more elements, but it will come a moment when the GPU will be overrun and you'll experience a performance issue, then is better to use top/left. Also keep in mind what you're animating, when it comes to PNG images with shadows and alpha channels the browsers just go berserk no matter what properties you animate and if you pass it to the GPU or not. As you can see is a big grey area and the judgement must be done for every project based on what you're seeing with every particular animation. Rodrigo.