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. Diaco

    Greensock Menu

    pls do something like this : var menu = new TimelineLite() .from("#mobmenu", 1, {height:0, ease:Power2.easeInOut}) .from("#mobicon", 1, {rotation:-45, ease:Power2.easeInOut},0) .reversed(true); var menuChilds = document.querySelectorAll('#mobile li,#mobicon'); for( var i=menuChilds.length ; i--; ){ menuChilds[i].addEventListener('click',function(){ menu.reversed(!menu.reversed()) }) }; http://codepen.io/MAW/pen/VvzdYP and pls check this doc. page about .reversed() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/reversed/
  2. Diaco

    Greensock Menu

    Hi Pusher pls try like this : var menu = new TimelineLite() .from("#mobmenu", 1, {height:0, ease:Power2.easeInOut}) .from("#mobicon", 1, {rotation:-45, ease:Power2.easeInOut},0) .reversed(true); function menuFunction() { menu.reversed(!menu.reversed()) }; http://codepen.io/MAW/pen/VvzdYP
  3. pls check this out : http://codepen.io/MAW/pen/RWZMBz
  4. Hi Juc1 pls fix by set position parameter to 0 , like this : .to($container,10,{left:600},0); and pls check this out too about timeline Position Parameter : http://greensock.com/position-parameter
  5. Hi nabjoern pls make a Codepen Demo available , btw i think this blog post can help you about responsive tweens : http://greensock.com/gsap-1-13-1
  6. just in addition to Jonathan's advice , try fromTo tween too : TweenLite.fromTo( '#layer1' , 1 , {yPercent:-200} , {yPercent:0,ease:Bounce.easeOut} );
  7. pls check this : http://codepen.io/MAW/pen/MaoMzr
  8. pls check this out : http://codepen.io/MAW/pen/MaoMzr
  9. .getChildren() method will return timeline childs as array : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getChildren/ so you can do something like this : http://codepen.io/MAW/pen/ojwPEx
  10. Hi schtals you can use Position Parameter : http://greensock.com/position-parameter tl.staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 1, left:"+=40px"}, 0.25 ) .staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 0, left:"-=40px"}, 0.25 , "+=3" );
  11. Hi dsiebes hmm , if i understood correctly , pls check these links : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/ http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/ http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/remove/
  12. i don't know your scenario , but how about something like this : you can add/use a var as repeat counter or as continue statement . function rotate(el){ TweenLite.to(el,1,{rotation:'+=90',onComplete:rotate,onCompleteParams:[el]}) }; rotate('.box'); http://codepen.io/MAW/pen/YyQLWw
  13. Hi guys pls try something like this too : you can feed the limit() fn with onUpdateParams and do whatever you want . function limit(mn,mx){ var T=this.target , elT=T[0]._gsTransform; if( elT.x<mn || elT.x>mx ){ TweenLite.set(T,{ x:elT.x>mx?mx:mn }) }; }; TweenLite.to('.box',1,{x:'+=500',onUpdate:limit,onUpdateParams:[0,200]}); http://codepen.io/MAW/pen/gaReep/
  14. Hi guys how about this : http://codepen.io/MAW/pen/zvzWEj
  15. Hi ameshkin and Why you think this's related to GSAP !?
  16. Hi JimmyH pls check this out : http://codepen.io/MAW/pen/qOmZrx?editors=001
  17. Hi TShelton41 how about this : http://codepen.io/MAW/pen/LpypBY
  18. pls check BezierPlugin api /options , this's just a start for you , you can change values array and make your desired act http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/
  19. Hi RonA2Zman sure , you can do anything you like in css or in generate loop . pls check this out : http://codepen.io/MAW/pen/KdmwMb
  20. Hi Michael Vestergaard if i understood correctly , you just need BezierPlugin , something like this : http://codepen.io/MAW/pen/4552046de9bb4cda9509e51ec874bbc8
  21. Pls check the GSAP Docs : http://greensock.com/docs/#/HTML5/ i think that'd be fair/nice to put all of the GSAP api features / methods / plugins on the table and then compare file size or whatever , not selective cases !...
  22. Hi AcharaKelley pls provide a Codepen demo for your questions : How to Create a CodePen Demo for now pls try like this : var scrollTarget = { scrollTo:{ x:100 } };
  23. Hi WombatTurkey pls try add a very tiny rotation to your fadeIn/fadeOut tweens , like this : TweenLite.to("#redBox",5,{opacity:0,rotation:0.01}) you can see the difference here : http://codepen.io/MAW/pen/BoWEZP pls check Chrome > Rendering > Show paint rectangles
  24. Hi andrewscwei you can use something like this : function checkRange(num,edge,min,max){ return num>=min+edge && num<=max-edge }; // 'num' is your input number console.log( checkRange(10,10,0,100) );
  25. pls check and follow Carl's answer / example here : http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/?p=51783 as Carl mentioned : btw this's a way to access obj tag contents , not inline svg ! another thing i see in your demo : pls define tl as Timeline or use TweenLite/Max .set() instead of tl . don't forget to Make sure obj tag has loaded before . ( you can use window.onload function )
×