Diaco

Hi Davide_Barbieri pls provide a reduced Codepen Demo for your questions : How to Create a CodePen Demo i think this demo can help you : http://codepen.io/MAW/pen/MYdwRP

Hi Acccent it's about css rules priority , so try to change your css order to this : .red { background-color:red; } .blue { background-color:blue; } .box { width:50px; height:50px; position:relative; margin-bottom:2px; } and don't forget tween will go from empty value , so you will see a tween from transparent . i think in this case that's better to use CSSplugin instead of CSSRulePlugin . CSSRulePlugin Doc : http://greensock.com/docs/#/HTML5/Plugins/CSSRulePlugin/

Hi phillip_vale pls change tl.resume(); to tl.restart(); or tl.play();

Hi etnos i think this demo can help you : http://codepen.io/MAW/pen/rxqqQG/

Hi Fakebook pls check GSAP EaselPlugin Doc : http://greensock.com/docs/#/HTML5/Plugins/EaselPlugin/ and check this thread too : http://greensock.com/forums/topic/12889-change-fill-color-with-colorprops-plug-in-flash-procreate-js

Hi mattdown you just need to define tweens after appending new Dom elements . i don't know what's your code , after appending new elements you can check for element.animation like this : $(".product-details-swap").each(function(index, element){ if( !element.animation ){ // check for element.animation var tl = new TimelineLite({paused:true}); // add tl tweens element.animation = tl; $(this).hover( function(){ this.animation.play() }, function(){ this.animation.reverse() } ); } });

Hi marcamos pls check this thread : http://greensock.com/forums/topic/11989-graphing-with-gsap/

Hi bm1967 pls use .set() method instead of changing/adding class name : var D = Draggable.create("#myBox", { type:"x,y" } ); $("#myBtn").on( 'click', function(event) { TweenLite.set("#myBox",{ x:300 , y:0 }); D[0].update(); // http://greensock.com/docs/#/HTML5/Drag/Draggable/update/ })

Hi mango-nyc there isn't any method in GSAP api to manipulation the Dom structure . and about methods you mentioned : .kill( ) : Kills the animation ( Tween or Timeline ) entirely .clear() : Empties the timeline of all tweens, timelines, and callbacks clearProps : A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties)

Hi ro-achterberg yep , there's a way to do that without DrawSVG , via GSAP , but there is a point : don't forget GSAP fixed some Browser's SVG related bug in DrawSVG plugin and your project will works correctly in every browser . without that you have to consider about thaking the risk of how some browsers are dealing differently with SVG stroke , dash offset , ... etc

Hi daniel_pan pls add immediateRender : false to your Tween Vars : http://codepen.io/MAW/pen/XXqMWg

Hi Vahid-Designer i don't know what's your scenario , but you add / remove pause from timeline easily with tl.addPause('label'); and tl.removePause('label'); so you can do something like this : var tl = new TimelineMax() .to('.red',5,{x:100}) .add('StopPoint') .to('.red',5,{x:200}); var toggle=1; document.querySelector('.red').addEventListener('click',function(){ if(toggle){ tl.addPause('StopPoint'); toggle=0; }else{ tl.removePause('StopPoint').play(); toggle=1; } });

yep , but if you need to use negative position parameter for your second tween , you can set overwrite propery : tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut}) .to(".arrow_top", 1.5, { scale:1, x:"-=500", rotation:"-=34",y:"+=33", ease:Power4.easeIn, overwrite:0 },'-=0.5') pls check the overwrite in the Doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

Hi friendlygiraffe pls fix by remove negative position parameter : tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut}) .to(".arrow_top", 1.5, { scale:1, x:"-=345", rotation:"-=34",y:"+=33", ease:Power4.easeIn})

Hi cowfields at first there isn't .addDelay() method in GSAP api , but if i understood correctly , you can use this function : var tl = new TimelineMax() .staggerTo('.dots',1,{y:100},1); var Tweens = tl.getChildren()[0].getChildren(); function StaggerGaps(STweens,amount){ // " STweens" are your staggers tweens and "amount" is the gap duration between tweens for(var i=0; i<STweens.length; i++){ STweens[i].startTime(amount*i) } }; StaggerGaps( Tweens , 0.2 ); // set 0.2 second gap pls check this out : http://codepen.io/MAW/pen/20c87274b18280c3a6c58dc29b299ef7/

Jonathan , thanks buddy , but link seems works for me pls check this one : http://codepen.io/MAW/pen/WrdbVY

Hi stonetip you can add mousewheel Event Handler : http://www.sitepoint.com/html5-javascript-mouse-wheel/

Hi retropunk if i understand correctly pls check these demos : http://codepen.io/MAW/pen/KdMgvq http://codepen.io/MAW/pen/QbgLmV and you can use MorphSVGPlugin.pathDataToBezier() + BezierPlugin to animating along a path

Hi Portal_Zii in addition to Blake's nice solution , you do something like this too : http://codepen.io/MAW/pen/WrdbVY var tl = new TimelineMax() window.addEventListener('resize',PlayPuse); function PlayPuse(){ if (tl.isActive()) tl.pause() ; if (!tl.resizePlay) tl.resizePlay = TweenLite.delayedCall(0.2,function(){ tl.play() }); tl.resizePlay.restart(true); }

Hi friendlygiraffe you can simply use Elastic ease type : http://codepen.io/MAW/pen/KVZwZx/

Hi derp pls fix by this : var menu_anim = new TimelineMax( { paused:true } ); menu_anim.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05); btw , you can use just one Timeline with position parameter adjustment : var tl = new TimelineMax( { paused:true } ); tl.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05) .to( modalBG_cover, 1, { height: '100%' },0); and 2 points : - " display " isn't tweenable property - don't use negative position parameter for first tween , you can use .set() to set immediately

Hi Devotee007 pls try this : var l = elems.length ; TweenMax.staggerTo(elems,0.4,{y:50,cycle:{delay:function(i){return Math.abs(Math.floor(l/2)-i)*0.1}}}); http://codepen.io/MAW/pen/OVqBBq

if i understand correclty , i think L-system algorithm can help you : https://en.wikipedia.org/wiki/L-system

Hi Vahid-Designer pls provide a reduced Codepen Demo for your questions : How to Create a CodePen Demo and i can't see any problem with ease type : http://codepen.io/MAW/pen/Nxwxoe pls fork above Codepen with your markup / script if still have any problem

Hi NewYears1978 pls check this thread : http://greensock.com/forums/topic/13306-gsap-tweenmax-news-ticker-non-flash/