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. Hi nsohail pls try this : var children = tl.getChildren(); for(var i=children.length; i--{ if(children[i].data=='isPause'){tl.remove(children[i])} };
  2. ok , try this too : var share = document.querySelectorAll(".share"); for(var i=share.length; i--{ var share[i].Anim = new TimelineLite(); tl.to(share[i].querySelector('.share-select'),1,{autoAlpha:1,x:10}); // add tweens to your timeline here... tl.reversed(true); share[i].Anim=tl; shareBtnEv(i); }; function shareBtnEv(i){ var anim = share[i].Anim; share[i].querySelector('.share-button').addEventListener('click',function(){ anim.reversed(!anim.reversed()); }); share[i].querySelector('.share-close').addEventListener('click',function(){ anim.reverse(); }); };
  3. Hi level39 pls try like this : var share = document.querySelectorAll(".share"); for(var i=share.length; i--{ var tl = new TimelineLite(); tl.to(share[i].querySelector('.share-select'),1,{autoAlpha:1,x:10}); // add tweens to your timeline... tl.reversed(true); share[i].Anim=tl; share[i].querySelector('.share-button').addEventListener('click',function(){ var Anim = this.parentNode.Anim ; Anim.reversed(!Anim.reversed()); }); };
  4. Hi looeee if i understood correctly , pls check this out : http://codepen.io/MAW/pen/aOzeNR the concept is create a dummy div and make that Draggable , and use the tween target as Draggable trigger . you can do any calculation in Update function
  5. Diaco

    CDN Link

    Hi jitu you can find the CDN links here : http://greensock.com/ ( home page ) > DOWNLOAD GSAP ( green button ) > Customize tab
  6. Hi KDSDeveloper pls try this : $(".faq-question").each(function(){ var tl = new TimelineLite(); tl.to($(this).find('.plus'),0.3, { morphSVG:{shape:'.minus'}, ease:Power1.easeInOut }); tl.reversed(true); this.Anim = tl; }); $(".faq-question").on('click', function() { this.Anim.reversed(!this.Anim.reversed()); });
  7. Unfortunately we have to focus on supporting GSAP api . pls read the Doc. specially TimelineMax , you will find all methods and solutions you need to know for navigation menu you can add Labels to pause points in the loop , something like this : .addPause("Label"+i) and use .tweenTo() or .seek() method to go . and about macbook track pad , i guess listener keeps firing for a while , you can check that with adding console.log('fire') in mouseW function .
  8. Hi noodlesp pls check this thread for hover animations : http://greensock.com/forums/topic/11259-problems-in-hover-animations-in-elements/
  9. hmm , for me works correctly !... and yes , it generates timeline tweens in a loop for every slide and when you play or reverse will stop at the Pause points and the timeline isn't really huge !
  10. Hi jellevrswk in addition to Jonathan's advice : the problem come from your SVG ( your SVG already has transforms ) pls check Jack's answer and detailed explanation here : http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/ btw , you can fix your svg issues with this online tool : https://jakearchibald.github.io/svgomg/ paste your svg in " Paste markup " field and don't forget to turn off the " Clean IDs " in options menu your demo with fixed svg : http://codepen.io/anon/pen/gaZJzg
  11. Hi poolboy yep , works as expected and you can do something like this : TweenMax.to(div,1,{height:'90vh',width:'50vw', onComplete:function(){ this.target.style.height = this.vars.css.height ; this.target.style.width = this.vars.css.width ; } });
  12. Hi GOLDPoint Systems as you can read in the Doc : Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to Quad but with a more intuitive name. The more power, the more exaggerated the easing effect. Using a numeric approach like this in the name makes experimenting easier. This is one of the eases that is natively accelerated in TweenLite and TweenMax. All of the "Power" eases and their counterparts (Linear (0), Quad (1), Cubic (2), Quart (3), Quint (4), and Strong (4)) are accelerated. so pls try this : transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  13. Hi ridiculous pls check this out ( the basic and simplest way with timeline ) : http://codepen.io/MAW/pen/XmozON/
  14. Hi nagman for now pls try like this : TweenLite.fromTo("p",1,{letterSpacing:0},{letterSpacing:10});
  15. statement ? (if true) : (if false) ; so { scale : 2.001 > 2 ? 2 : 0 } == { scale : 2 } { scale : 0.001 > 2 ? 2 : 0 } == { scale : 0 }
  16. Hi coco you have 2 way to go : 1 - check the target scale with onUpdate function : http://codepen.io/MAW/pen/zvyBgz 2 - use .isActive() method and check the target scale before tween : http://codepen.io/MAW/pen/GpPjKz i prefer the first one .
  17. Hi oeffnerd pls just add this line at the top of your code and use your first tween ( CSSPlugin ) : CSSPlugin.useSVGTransformAttr = true; check this out : http://codepen.io/MAW/pen/ZbVWwN
  18. Hi Gary Griswold pls try like this : var drag0 = draggable[0]; drag0.vars.snap=[drag0.minX,drag0.maxX];
  19. Hi sorciereus you just need to add a container and rotate that : http://codepen.io/MAW/pen/EVOJQp
  20. you can set positions before the tween : http://codepen.io/MAW/pen/PPxLWd or you can use onComplete function to set elems at the end of tween : tl.staggerFrom(["#card1","#card2","#card3"],1,{bezier:{type:"cubic",values:points,autoRotate:true}, onComplete:function(){ TweenLite.set(this.target,{ xPercent:0,yPercent:0,x:0,y:0 }) // set position here at the end of tween } }, 0.25);
  21. Hi flysi3000 pls check this out : http://codepen.io/MAW/pen/PPxLWd
  22. in addition , for now pls try add this after adding the child timeline : tl.seek(tl.time()+0.001) http://codepen.io/MAW/pen/jbQQdb
  23. hmm , if i understood correctly now , pls put the tl.pause().seek() after adding the child at the end of addChild() fn pls check this out : http://codepen.io/MAW/pen/jbQQdb
  24. you seek and pause at 1.5 and add tween with 0.5 duration at 1 . so when you play , indeed the child tween is finished to opacity '0' . pls check the codepen again : http://codepen.io/MAW/pen/jbQQdb
  25. Hi borbulon pls check this out : http://codepen.io/MAW/pen/jbQQdb you just need to add .play()
×