Jump to content
GreenSock

Diaco last won the day on December 20 2017

Diaco had the most liked content!

Diaco

Moderators
  • Posts

    1,215
  • Joined

  • Last visited

  • Days Won

    86

Everything posted by Diaco

  1. you should to use open paths or use a text mask . pls check this out : http://codepen.io/MAW/pen/XmjNvr
  2. Hi jstafford pls set stroke attribute for your paths : http://codepen.io/MAW/pen/XmjNvr
  3. in addition to Carl's and Jonathan's great advice , you can do like this too : var particles = [ {x: 100, y: 100, endX: 10000}, {x: 200, y: 200, endX: -20000}, {x: 300, y: 300, endX: 30000} ]; var tl = new TimelineMax(); for ( var i=particles.length; i--; ){ tween(particles[i]) }; function tween(myObj){ tl.to(myObj,1,{ x:myObj.endX },0) };
  4. Pls check the Codepen again : http://codepen.io/MAW/pen/LpRZdj
  5. Hi bhakti this isn't related to GSAP , as you can see every thing works correctly , pls add console.log(target) at the top of your doAnim() . pls check this out : http://codepen.io/MAW/pen/ojzzjy
  6. you should to use one of these methods : // .addCallback( callback:Function, position:*, params:Array, scope:* ) : TimelineMax tl.addCallback(updte,5) //.call( callback:Function, params:Array, scope:*, position:* ) : * tl.call(updte,null,null,5); http://codepen.io/MAW/pen/QjKEgP
  7. pls check this out : http://codepen.io/MAW/pen/LpRZdj
  8. Hi nofear87 pls check this out and fork the codepen if still have any problem : http://codepen.io/MAW/pen/QjKEgP
  9. hmm , unfortunately i can't understand what you'r looking for ! .. pls make a reduced Codepen available . btw i think js Media Queries can help you , pls check out these topics : http://greensock.com/forums/topic/11749-changing-to-width-based-on-media-query/ http://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax/
  10. Hi Colin Ochel here's GSAP Html5/js forum ! , you can ask your Flash related questions here : http://greensock.com/forums/forum/3-gsap-flash/ btw , "#Stage_myText" is a way to select elements in adobe Edge animate .
  11. Hi PimS pls check this out : http://codepen.io/MAW/pen/pjbqvE btw , for sprite animation , check this out too : http://codepen.io/MAW/pen/MYdwRP
  12. Hi jstafford pls fix these issues in your pen : - in your css , pls fix by adding a semicolon at the end : background: #0000FF ; - in js , your tween should be like this : .from($("#square2"),1.5,{autoAlpha:0}, 10);
  13. Hi JocaPinto pls try like this : var tl = new TimelineLite(); tl.from("#title",1,{ top:'-10%' , ease: Elastic.easeOut }) .to("#title",1,{ top:'100%', ease: Elastic.easeIn } ,'+=1'); or var tl = new TimelineLite(); tl.from("#title",1,{ y:-100 , opacity:0 , ease: Elastic.easeOut }) .to("#title",1,{ y:200 , opacity:0 , ease: Elastic.easeIn } ,'+=1'); btw , pls don't post same question twice in forums . thanks in advance
  14. Hi Liam@II pls add autoRotate:true to the bezier object , like this : bezier:{type:"cubic",values:points,autoRotate:true}
  15. you've changed your text container id , pls fix your js selector pls check this out : http://codepen.io/MAW/pen/EVygWR
  16. Yep , with GSAP our web life/works is really easier , sweeter ... btw , really Glad to hear you like my Codepen stuff
  17. Hi jstafford All the necessary plugin included in TweenMax : ( TweenMax , TimelineMax , CSSPlugin , BezierPlugin , DirectionalRotationPlugin , AttrPlugin , RoundPropsPlugin , EasePack ) So you just need to load TweenMax in your case you don't need to use BezierPlugin , and can have same effect by Elastic ease type . pls check this out : http://codepen.io/MAW/pen/WQxxGB btw , you can config Elastic and some other ease type , pls check this out for Elastic : http://greensock.com/docs/#/HTML5/Easing/Elastic/ like this : TweenLite.from( myElem , 1.5 ,{ x:-500 , skewX:-50 , ease:Elastic.easeOut.config(1,0.1) });
  18. Hi celli for now pls use this : .set( svgElem , { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } ); // btw you can remove ( clearProps:"all" )
  19. Hi Gary for now pls try something like this : var Tween = TweenMax.to("#redBox",1,{x:600,ease:Back.easeOut,onRepeat:repeat,repeat:-1,yoyo:true}); function repeat(){ if(this.time()>0.1){ this.updateTo({ease:Back.easeIn}) }else{ this.updateTo({ease:Back.easeOut}) } }; http://codepen.io/MAW/pen/RWRbxg i don't know your senario but btw you can use .tweenTo() / .tweenFromTo() + new ease type or tween your tween/tl progress by a simple tween + new ease type .
  20. Hi ikas in addition , for shaking effect pls check this out : http://codepen.io/MAW/pen/LVGzMV
  21. in this way , the myStagger timeline don't have any effect on your outer/master Timeline duration , so you can set to repeat:-1 and play/pause (or whatever) at the master tl start/end : var myStagger = new TimelineMax({repeat:-1,yoyo:true}).staggerTo(".box",1.5,{opacity:0.5,rotation:90},0.2); var OuterTl = new TimelineMax(); //OuterTl.add(function(){ myStagger.pause() } , 10); // pause myStagger after 10s OuterTl.add(function(){ myStagger.eventCallback("onRepeat",function(){ myStagger.pause() }) } , 10);
  22. Hi C.Surieux pls check Carl's demo but in addition if i understood correctly what you're looking for , pls check this out too : http://codepen.io/MAW/pen/GpZebb
  23. In addition to Carl's answer/really useful links , you can do something like one of these : using onPress/Release : var tween= TweenLite.to('#container ',0.2,{opacity:0.5,paused:true}); var draggables = Draggable.create(".box", { onPress:function(){tween.play()}, onRelease:function(){tween.reverse()} }); or run a function on Drag : var DTween=1 , tween=TweenLite.to('#container ',0.2,{opacity:0.5,paused:true}); var draggables = Draggable.create(".box", { onDrag:function(){ if(!DTween){return false}; // return false to avoid run on Drag repeatedly tween.play(); DTween=0; }, onRelease:function(){ tween.reverse(); DTween=1; } }); http://codepen.io/MAW/pen/bVpZPV
  24. Hi Gary if i understood correctly ! , you can use something like this : var myStagger = new TimelineMax({repeat:-1,yoyo:true}).staggerTo(".box",1.5,{opacity:0.5},0.2); var tl = new TimelineMax({repeat:3,onComplete:function(){ myStagger.eventCallback("onRepeat",function(){ myStagger.pause() }); }}); tl.to('.box',2,{x:100}) http://codepen.io/MAW/pen/yYOwZV
  25. Hi akadigital hmm , for me everything works correctly with edge animate , pls try this ( simple version of above codepen ) : var tl = new TimelineMax({repeat:-1, yoyo:true,repeatDelay:1}), mySplitText = new SplitText("#Stage_myText", {type:"chars"}), // myText = id of your text in Stage chars = mySplitText.chars; tl.staggerFrom(chars,0.01,{opacity:0,ease:Power1.easeIn},0.08); tl.timeScale(0.5)
×