Diaco

Hi nielsrobin pls check this thread : http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div/

Pls check this out : http://codepen.io/MAW/pen/jWBXKy/

pls add onUpdate callback like another Tweens to your ThrowPropsPlugin tween : var dragwheel = Draggable.create(".wheel",{ type:"rotation", throwProps:true, onDragEnd:function(){ var V = ThrowPropsPlugin.getVelocity(this.target,'rotation'); ThrowPropsPlugin.to(this.target,{ throwProps:{rotation:{velocity:"auto",end:function(n){ var N=V>0?n+720:n-720; return Math.round(N/45)*45; }}} , onUpdate:rotateItems },3,2);// maximum duration of 3, and a minimum of 2 } });

Hi ppdc if i understood correctly , pls try like this : var dragwheel=Draggable.create(".wheel", { type:"rotation", throwProps:true, onDragEnd:function(){ var V = ThrowPropsPlugin.getVelocity(this.target,'rotation'); ThrowPropsPlugin.to(this.target,{ throwProps:{rotation:{velocity:"auto",end:function(n){ var N=V>0?n+720:n-720; return Math.round(N/45)*45; }}} },3,2);// maximum duration of 3, and a minimum of 2 } });

Hi quintonjason i think it's what Blake can handle better than me anyway you can record previous position and the define a fromTo tween after appending , something like this : http://codepen.io/MAW/pen/WQWJPV

Hi spacewindow actually you can't do that in this way ,Timeline control its childs playhead , so you can't seek,pause,play or restart timeline child separately .

Hi ohem this Codepen Demo can help you : http://codepen.io/chriscoyier/pen/VvRoWy/

Hi venn pls check this blog post : Understanding the Position Parameter

Hi Steffen Wenzel in addition to blake's advise ; via Codepen , pls check your code performance with Debug mode

Hi celli pls check the Codepen again : http://codepen.io/MAW/pen/gbwzoM and Anim() function generates tweens with : delay:R(5) , you can change it to whatever you want .

Hi pixel-fiend pls check this out : http://codepen.io/MAW/pen/MKeEWW

it's clear , because you are in that situation right now ( 100% drawing ) . like you want to tween 100 to 100 . so you need to start from 0 ( or elsewhere ) to 100 , to have a tween

Hi dada78 pls try this : TweenLite.from("#border",2,{drawSVG:"0",ease:Expo.easeOut});

Hi pnda007 if i understood correclty your problem , pls use svgOrigin instead of transformOrigin , like this : TweenMax.staggerTo('g',5,{cycle:{rotation:[360,-360]},svgOrigin:"90.1 151.9",ease:Linear.easeNone,repeat:-1}); pls check this out : http://codepen.io/MAW/pen/vLKgKq and pls check this blog post about Animating SVG with GSAP : http://greensock.com/svg-tips

Hi Pieter pls try like this : .to(document.getElementById("somediv"), 1, { rotation: 180, onComplete: incremental }) // pls remove " () " btw , timeline has own event callback too ; so you can do something like this too : var tl = new TimelineMax({ repeat:5 , onRepeat: incremental }); and you don't need .play() , since your timeline isn't paused

ok , pls try this : tl.tweenTo( Label , { onComplete : function(){ this.timeScale(1) }}).timeScale('5'); // Label is your label name the above code set timeline timeScale to 5 , so will play 5 times faster , and set again timescale to 1 with onComplete , so when you .play() , will play with normal speed or TweenLite.to( tl , 0.5 , { time : tl.getLabelTime( Label ) } ); // Label is your label name and the above code will change timeline time (play head) , to label time position with duration 0.5

hmm , for relative motions your code is OK , but there's a point ; pls generate unique string as label in each loop ( already you're using same string "step" as label in each loop ) or use relative position parameter instead of Labels like this : function walkcycle(timeline, element, repeats) { for (var i = 0; i < repeats; i++) { timeline .to(element, 0.2, { bottom: -4, ease: Power2.easeIn }) .to(element, 0.35, { bottom: 0, ease: Power1.easeInOut }) .to(element, 0.55, { left: "+=55" , ease: Power0.easeNone },'-=0.55'); } };

Hi armen the simple and short answer is ; Nope , you can't and for another target , you need to create new Tween .

yeah , there isn't any difference in result , but personally i prefer to use first way from performance wise , .invalidate() use some calculations , and in this case isn't really necessary .

Hi ald603 if i understood correctly , you can use .tweenTo() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/

Hi rgfx pls check this out : http://codepen.io/MAW/pen/MKyZex/

Hi Pieter you can use nested timelines with repeat parametr , pls try like this : var masterTl = new TimelineMax(); function runTl(Repeat,elem){ var tl = new TimelineMax({repeat:Repeat}) .to(elem,1,{rotation:45}) .to(elem,1,{x:45}); return tl; }; masterTl.add( runTl(1,"#elem1") ) masterTl.add( runTl(2,"#elem2") )

Hi themepunch pls try like this : TweenLite.fromTo("#redBox",1,{opacity:0,left:0},{opacity:1,left:100,onUpdate:getValue}); function getValue() { var target = this.target[0]; var tLeft = target.style["left"]; var tOpacity = target.style["opacity"]; }; pls check this out : http://codepen.io/MAW/pen/KVzMQo

Hi Klerith Timelines have nothing to do with scroll ! pls provide a Codepen Demo for your questions : How to Create a CodePen Demo

Hi d11202 pls check Draggable .tween property : http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/tween/ you can do something like this : var D = Draggable.create(target,{ throwProps:true }); // and then you can kill draggable throw tween with this : D[0].tween.kill();