Rodrigo

Hi, What I think could be the reason is that even if the element and the trigger are two different DOM element they're both targets of the same draggable instance and since the instance has a force3D:true var in it, this applies for every target. Maybe you could try a TweenMax.set() instance to change the force3D of the trigger using the onDragStart callback. Although, and here we're going to need Carl's or Jack's advice, I don't know if in the next update of the draggable instance the force3D will come back to true. Best, Rodrigo.

Hi and welcome to the forums. The thing is that once you've created the timeline you can add more tweens and timelines to it, but the original structure can't be changed. In your case the original structure is two tweens and two labels, the first tween goes from 0 to 1 second and the second from 1 second to 2 seconds. Then you add another tween at a label that is at the 1 second position but what it doesn't do is push the tween in the 1 second mark to the end of the timeline, so as a result you have two concurrent tweens. As you already find out the update method works only to the vars of the particular tween and is better suited for altering individual instances. What you could do is clear the timeline and then populate it again with the sequence you want. The cool thing about the clear method is that you can keep the labels in the timeline, that'll give you the possibility to add the same tweens in their original position while adding the new ones. You can see a simple codepen here: http://codepen.io/rhernando/pen/nteyv Now if you want to create a sort of seamless update you'll have to use the time() method in order to get the current playing time of the timeline and store it in a variable, then clear the timeline, add the new sequence and finally play it starting at the stored time at the beginning. Best, Rodrigo.

Hi, Take a look at this: http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/ Since the engine has a kinetic plugin you could use it with GSAP and some elastic or bounce easeOut in order to simulate that particular effect: http://api.greensock.com/js/com/greensock/plugins/KineticPlugin.html Best, Rodrigo.

Hi, I can suggest you two options. First you could use the seek method like you say. If you check the codepen seek takes the playhead to the indicated label, but keep in mind that it doesn't change the play state of the timeline, what it means is that if the timeline is paused or stopped it'll remain paused and if the timeline is playing it'll keep playing. The second alternative is the tweenTo() method, that tweens the timeline from wherever the playhead is at that moment to the indicated position (could be time or label). You should keep in mind that after the timeline reaches the label or time you indicated it'll paused: var tl = new TimelineMax(); tl .add('label1') .to(element, time, {vars}) .to(element2, time, {vars}, 'label2') .to(element3, time, {vars}, 'label3') //the following will tween the timeline to label2 and it'll pause tl.tweenTo('label2'); If you want even more control you can use the tweenFromTo method that takes the timeline from a start position to a end position independent of the timeline's current position and play direction. It also set the timeline to paused when is completed: //this will take the timeline from label3 to label2 tl.tweenFromTo('label3','label2'); You can read more about it in the docs: http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenTo() Best, Rodrigo.

Hi, The code you're providing works with a regular font, so the issue could be in the font-face rule. Perhaps you should double check that. The rule is best constructed like this: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } I suggest you use this free service to generate the font package, they also include a sample css in the download: http://www.fontsquirrel.com/tools/webfont-generator Best, Rodrigo.

Hi, To drag the element under another layer you can use the trigger property in the vars of the draggable instance. Like that you can control the element's drag even without being able to interact with it. You can see a simple example here: http://codepen.io/rhernando/pen/IiHgq Best, Rodrigo.

Hi, I see that I didn't elaborated enough in my answer, sorry about that. As you can see in the Greensock collection codepen, the behaviour you're after can be achieved in a simple way and the fact that in your case you have to play the timeline before the play('label') method can work is quite odd. Therefore my assumption is that something could be happening in your code and more specifically with the creation of the timeline. I believe that last week another user posted a question. He was adding instances to a single timeline in order to animate several different objects with mouse click events. When he created individual timelines the issue was gone. If you create as much code modules as possible, in this case child timelines,is very helpful to isolate possible errors and serves you very well if you want to change anything, whether is the animation, time, etc., also if you look Carl's video you'll see that using nested timelines also allows to quickly test the part of the animation you're working without waiting for the rest of the timeline to play. If the issues continue after you created individual timelines, please provide a simple codepen or fiddle with the isolated code that's giving you trouble in order to get a better look at it. Best, Rodrigo.

Hi and welcome to the forums. The issue has to do with the not too easy understanding of the stacking order given by the z-imdex property, I remember having quite a hard time getting along with it. The thing is that your element resides inside a container, which is a DOM element. This container doesn't have a defined z-index value, therefore is given an auto one, even if it doesn't have a position property defined (relative, fixed, absolute, etc), I know, what a nightmare. According to the specification in this case a 0 value is given and since the element being animated has a negative value it gets behind the container. You can check this if you comment out the background property of the container. The solution is to tween your element's z-index to a smaller value than the others but not negative: window.onload = function(){ var red = document.getElementById("s1"); var yellow = document.getElementById("s2"); var lightblue = document.getElementById("s3"); var lineblue = document.getElementById("s4"); var grey = document.getElementById("s5"); TweenMax.to(red, 2, {rotationY:360, zIndex:2}); TweenMax.to(yellow, 2, {x: -75, zIndex:1}); } Like that the yellow shirt gets behind the red one as the tween progresses and it doesn't suddenly disappear. In order to know a little more about the z-index property read the following: http://www.w3.org/TR/CSS2/visuren.html#layers Best, Rodrigo.

Hi and welcome to the Greensock forums. I believe that the issue could be in the way you're building your sequence. My recommendation would be to create a individual timeline for each part of your sequence (according to the code you posted there are 4) and add each of those timelines at a particular label. var masterTl = new TimelineMax(),//the parent timeline tlPoint1 = new TimelineMax(), tlPoint2 = new TimelineMax(), tlPoint3 = new TimelineMax(), tlPoint4 = new TimelineMax(); //Create the individual timelines tlPoint1 .to("#screenshot1", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"}) .to("#num1", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1") .to("#point1", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1"); tlPoint2 .to("#screenshot2", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"}) .to("#num2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1") .to("#point2", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1"); tlPoint3 .to("#screenshot3", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"}) .to("#num3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1") .to("#point3", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1"); tlPoint4 .to("#screenshot4", 1, {css:{opacity:1},delay: 4, ease:Back.easeInOut,overwrite:"all"}) .to("#num4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1") .to("#point4", 1, {css:{opacity:1}, ease:Back.easeInOut,overwrite:"all"},"-=1"); //we add the timelines and labels to the master parent timeline masterTl .add('myLabel1') .add(tlPoint1) .add(tlPoint2, 'myLabel2') .add(tlPoint3, 'myLabel3') .add(tlPoint4, 'myLabel4'); //finally the controls //Clique point1 var btnPoint1 = document.getElementById("num1"); btnPoint1.onclick = function() { masterTl.play("myLabel1"); } //Clique point2 var btnPoint2 = document.getElementById("num2"); btnPoint2.onclick = function() { masterTl.play("myLabel2"); } //Clique point3 var btnPoint3 = document.getElementById("num3"); btnPoint3.onclick = function() { tl45.play("myLabel3"); } //Clique point4 var btnPoint4 = document.getElementById("num4"); btnPoint4.onclick = function() { masterTl.play("myLabel4"); } That also you'll help you a lot, if you want to change just one tween or one var you can do it in the particular timeline, it saves a lot of time doing it like this. You can check a very good example of this here: http://www.greensock.com/jump-start-js/#timelinelite-labels Also look at the detailed code here: http://codepen.io/GreenSock/pen/plsng The timelnie is builded in line 67. Take a look also to this video, is a very good resource: http://www.greensock.com/sequence-video/ Best, Rodrigo.

Hi and welcome to the Greensock forums. Sure you can, one of the many features of the CSSPlugin is the ability to add and remove classes with className. Although I'm not sure id this can be done with a fromTo() instance, perhaps two different to() instances or a timeline, inserting two tweens at a specific label position, if the timeline has more tweens in it. Like this: //Two different tweens at the same time TweenMax.to(element, time, {className:'-=class1'}); TweenMax.to(element, time, {className:'+=class2'}); //A timeline with two to instances positioned at the same label var tl = New TimelineMax(); tl .add('classChange')//insert label .to(element, time, {className:'-=class1'}, 'classChange')//add the tween at the 'classChange' vlabel position .to(element, time, {className:'+=class2'}, 'classChange')//this will tween at the same time since it is at the same position, given by the label You can see a simple example here: http://codepen.io/rhernando/pen/tHBAE As for the vendor prefixes you don't have to worry about that, the CSSPlugin does all the work under the hood. It'll be a very good idea to update the files, also you can use cdn links. You can check all those links in the get GSAP button at the top-left corner of the screen. Best, Rodrigo.

Hi, If each element has an individual tween is quite easy, you can tween the instance time scale to 0 with an ease: var tn1 = TweenMax.to(element, time, {bezier:{vars}}); //to stop the element TweenLite.to(tn1, time, {timeScale:0, ease:Power3.easeOut}); And to restart the tween you can use the same but with 1 or just set the time scale to 1: //progressively restart the animation TweenLite.to(tn1, time, {timeScale:1}); //restart at normal speed immediately tn1.timeScale(1); If you're using a timeline and want all the elements to stop in the same way, just use your timeline instance instead of an individual tween instance. Hope this helps, Best, Rodrigo.

Hi, You could try with trigger (check the API docs) but I don't know if it can be updated after the drag has started. Another way could be by playing with the overflow property of the containers and the callbacks, perhaps onDragEnd take the Draggable target outside the main wrapper or simply set edge resistance to 1. Another choice would be to create the element record it's width and height, use a set instance to match the parent's size and when you tween the opacity to 1 also tween the height and width and use an overfloe:hidden property value. I'll tinker with the cordepen later to use the width and height approach. Maybe Carl or Jack can offer a better approach. Best Rodrigo.

Hi, I've updated the codepen: http://codepen.io/rhernando/pen/Jlfsq I hope this is what you're after. Best, Rodrigo.

The forums are THE BEST source for knowledge since real world issues are presented, Jack and Carl are always giving us samples, code snippets and tips i order to get the best out of GSAP and if you add to the mix reading the docs in a regular basis (I recommend every user to bookmark in their browser) you'll be on your way. Best, Rodrigo.

Hi, Sure you can use a TweenLite.set() or TweenMax.set() instance. They are an abbreviated way of using a zero duration tween and the greatest thing is that you can also use them in timelines using the shorthand method set, like this: //individual instances TweenLite.set(element, {rotation:180, opacity:0}); TweenMax.set(element, {rotation:180, opacity:0}); //In a timeline var tl = new TimelineMax(); tl .set(element, {rotation:180, opacity:0}) .to(element, time, {rotation:0, opacity:1}) .to(element, time, {opacity:0}); Although in the scenario you describe it'll be better a from instance, that can also be used with the shorthand method in a timeline: var tl = new TimelineMax(); tl .from(element, time, {rotation:180, opacity:0}) .to(element, time, {opacity:0}); This codes will produce the same results. Best, Rodrigo.

Hi, My best guess is that the sample uses the time() and reverse() properties. With the first you get the current time of the tween, disregarding repeats, and with reverse you can set the tween to reverse from that time to 0, like this: var div1 = $("div#div1"), tn1 = TweenMax.to(div1, .7, {boxShadow:'0px 0px 20px 8px rgb(0,255,0)', repeat:-1, yoyo:true, ease:Linear.easeNone, paused:true}); div1.mouseenter(function() { tn1.play(); }); div1.mouseleave(function() { var currentTime = tn1.time(); tn1.reverse(currentTime); }); You can see it here: http://codepen.io/rhernando/pen/gmkEr Also if you're looking for implementing this on a menu you can mix it with the code used in this codepen of the Greensock collection: http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7 Best, Rodrigo.

Hi, Yep, like Carl said once, that's IE choking on it's own mess, but has nothing to do with GSAP. Unfortunately each browser has it's own rendering peculiarities, with IE at the top of that list and the engine has quite some hacks and turns in order to deliver the best possible result for each CSS property that animates, but sadly at a certain point of some developments differences has to be made between one browser and the rest, that's the beauty of feature detection and conditional loading, is not like flash but it allows us to give the best result for each particular browser scenario out there. Best, Rodrigo.

Hi, What you could do is add the element to the DOM before any mouse event with an opacity:0, visibility:hidden, the same position of the visible element and create the draggable instance for that element on DOM ready. On mouse down tween it's opacity and visibility and onDragStart you can add a new element with opacity 0 and visibility hidden, like that you might not need the second mouse event. Best, Rodrigo.

Hi, You mean this behaviour not being totally smooth?: http://jsfiddle.net/7NwMN/3/ Jack already thought about this with force3D:true, that should give you a more smooth animation, like this: $( function(){ var rodillo = $('#rodillo'); var tm = new TimelineMax({repeat:-1, yoyo:true, paused:true}); tm .to(rodillo,1.5,{ autoAlpha:0.7,y:'5px',scale:'1', force3D:true}) .to(rodillo,1.5,{autoAlpha:1,y:'-5px',scale:'1.5'}); function playrodillo() { tm.play(); } playrodillo(); }); Hope this helps, Rodrigo.

Hi, One way would be to add a call() method at the timeline's end, that is after the last tween: var tl = new TimelineMax({repeat : -1}); tl .to( $(els).eq(0), 2, { left : 0, delay : 2 }) .to( $(po), 1, { autoAlpha : 0, }, "-=2") .to( $(els).eq(1), 2, { left : 0, delay : 3 }) .to( $(els).eq(2), 2, { left: 0, delay : 3 }) .call(pauseLine); function pauseLine() { tl.pause(); } You can see it working here: http://codepen.io/rhernando/pen/hpEru Here you can check the docs for TimelineMax as well for the rest of the engine's functions, plugins and utils: http://api.greensock.com/js/com/greensock/TimelineMax.html Hope this helps, Rodrigo. Hope this helps, Rodrigo.

Thanks Jack and just one more word: Rodrigo.

Hi and welcome to the forums. What is exactly the problem your facing?, using as reference the code in your fiddle everything seems to work as it should: $( function(){ var rodillo = $('#rodillo'); var tm = new TimelineMax({repeat:-1, yoyo:true, paused:true}); tm .to(rodillo,1.5,{ autoAlpha:0.7,y:'5px',scale:'1'}) .to(rodillo,1.5,{autoAlpha:1,y:'-5px',scale:'1.5'}); function playrodillo() { tm.play(); } playrodillo(); }); The image rodillo is static and it's opacity is 1. When the timeline starts it goes down 5px and it's opacity goes to 0.7. Then the element is scaled to 1.5 in both dimensions, it's opacity goes to 1 and goes up 5px. On reverse is the same process but backwards: scales to 1, opacity to 0.7 and down 5px; then opacity to 1 and up 5px. It would help if you could tell us what behaviour you're after in order to see the code you'd need. Hope this helps, Rodrigo.

Hi Harry and welcome to the forums, One chance could be to create the draggable instance through a function that you could execute on DOM ready or window.onload With that function you can get the draggable element's parent new width and apply to the bound variable: var parent = $("div#scrubberParent"), scrubber = $("div#scrubber"); fucnction createDraggable() { Draggable.create(scrubber, { type:'x', bounds:parent }) } So with a resize event you can call that function again and reset the draggable element's bounds. Jack in this case, creating the draggable instance more than once, is there garbage collection or overwriting for the previous instance? Hope this helps, Rodrigo.

Hi, Take a look at this codepen and tell us if this is what you're after. If not please fork and adapt it to your particular scenario in order to have a better idea of what you're trying to achieve: http://codepen.io/rhernando/pen/Jlfsq Best, Rodrigo.

Hi Why don't you try with the onDragStart event. You could attach a function that adds the new element to the DOM and create the Draggable instance as well. Unfortunately I can't post any code for now. Hope this helps Rodrigo