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 call SplitText() after ajax success and appending or changing your text content . seems you create SplitText object sooner .
  2. Hi idarfan you have 2 way to go with same result : .staggerTo($boxesReversed, 0.5, { y:0 , cycle:{ ease:[Power4.easeOut, Bounce.easeOut]} },0.05) or .staggerTo($boxesReversed, 0.5, { cycle:{ y:['+=100','-=100'], ease:[Power4.easeOut, Bounce.easeOut]} },0.05) don't forget at first you have staggerTo with normal order ( $boxes ) , and then staggerTo with reverse order ( $boxesReversed )
  3. Hi aderaaij SplitText breaks your text to divs , the problem come from when you set font size to .class div , and after breaking you have new font size ! so , in your CSS , pls remove these lines from .quoteHero__quoteContent div and add to .quoteHero__quoteContent : font-size: 30px; line-height: 40px; http://codepen.io/MAW/pen/GpZpjP
  4. Hi s3n3r i can't test that on Safari right now , but if i understood correctly , seems there's a solution : pls add this to your #img-wrapper css : -webkit-transform :scale(1,1); -ms-transform :scale(1,1); transform :scale(1,1); or -webkit-transform :translateZ(0px); transform :translateZ(0px); http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d
  5. Hi jotunheimr20 pls check this thread : http://greensock.com/forums/topic/11835-which-browser-do-i-have-to-use/
  6. Hi Cothien you can add xPercent:-50 to your tween or add this to your text css : -webkit-transform: translate(-50%,0%); -ms-transform: translate(-50%,0%); transform: translate(-50%,0%);
  7. Hi lucto_et_emergo you can get element easily by one of these methods : document.getElementById("Stage_mc1_element"); $("#Stage_mc1_element"); TweenLite.to( "#Stage_mc1_element" , 1 , {....}); hmm , i can't understand what you mean by : " in the future I want to apply a timeline to it " pls explain your scenario .
  8. the problem come from your css , pls remove this from your css : #cloud1,#cloud2 { display:none; } http://codepen.io/MAW/pen/Qjypva
  9. Hi Node London Yep ( you need last version of GSAP 1.18.0 ) , pls check this out : http://codepen.io/MAW/pen/vNNoOO
  10. Hi garyw pls check this thread : http://greensock.com/forums/topic/7256-ie-9-fallback-for-3d-transform/
  11. Hi Caroline_Portugal pls check this out : http://codepen.io/MAW/pen/Qjypva
  12. Hi Apollo13 you can use .clear() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/clear/ function onEvent(){ tl.clear() .to(element, 0.6, {rotation: randomInt(-45,45) }) .to(element, 0.2, {autoAlpha:0}); } or set .autoRemoveChildren : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/autoRemoveChildren/ var tl = new TimelineMax({ autoRemoveChildren:true }); function onEvent(){ tl.to(element, 0.6, {rotation: randomInt(-45,45) }) .to(element, 0.2, {autoAlpha:0}); } http://codepen.io/MAW/pen/KddoLZ
  13. Hi bigbeats01 Yep , with 1.18.0 you can tween complex string-based values , but there's a point , you should to apply path/polygon with same point type / points count , otherwise you will have a jump in your tween . pls check this out : http://codepen.io/MAW/pen/bVVqmj
  14. Hi rustigedennis pls try like this : TweenMax.to(".star",2,{attr:{cx:350,cy:350},delay:3});
  15. Hi idarfan pls try like this , you can change repeatDelay to make your desired effect : TweenMax.staggerTo(".box",2,{rotation:360,y:300,yoyo:true,repeat:1,repeatDelay:2},0.5); http://codepen.io/MAW/pen/Gppqaq
  16. Diaco

    animating masked SVG

    Hi celli i'm really Curious ! , Why you keep posting dead links !?... pls check your links before/after posting in forums . thanks in advance .
  17. Hi ohem hmm , there's just a tricky way for that ! you need to duplicate your ring , clip them from center and then rotate : pls check this out : http://codepen.io/MAW/pen/gaaOGa
  18. Hi jecko.jim - yep it's possible , but you need to define CSS Vendor Prefixes for every browser / for every property , and you will lose some controls / performance , so i don't think that's worth to do . - yep you can chain tweens with onComplete or delay but you will lose timeline power / controls , so again i don't think that's worth to do, after all , it's depend on your scenario .
  19. Hi sjerrentrup pls use rgb() colors instead of rgba() : rgba = red , green , blue , alpha and i don't know what's your scenario but i think you just need fromTo tween for first one , like this : var tl = new TimelineLite(); tl.fromTo(".bkg", 4, {fill:"rgba(250,250,250,0)"}, {fill:"#934512"}) .to(".bkg", 4, {fill:"#129330"}) .to(".bkg", 4, {fill:"#461293"}) and with last version ( 1.18.0 ) you can tween colors easily with hsl() colors . like this : var tl = new TimelineLite(); tl.fromTo(".bkg",4,{fill:"rgba(250,250,250,0)"},{fill:"#934512"}) .to(".bkg",12,{fill:"hsl(360,100%,25%)" })
  20. Hi paul_here you can use Tween's .eventCallback() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/ like this : TweenLite.to( object , 1 , { x : 200 , onComplete : function(){ /* your function */ } })
  21. Hi blippar pls check this out : http://codepen.io/MAW/pen/WQvKEj
  22. for next time pls provide Simple demo as Possible , I'm not surprised , the problem come from your svg markup pls remove all path tag with this className : .st39
  23. Hi sebzzzn welcome to GSAP forum ! pls make a Codepen Demo available for your questions : How to Create a CodePen Demo
  24. Hi allen0346 you just need a simple loop , pls make a Codepen Demo ( reduced/simple as possible ) available .
  25. ok , pls try like this : var BB = document.getElementById('group').getBBox(); TweenMax.fromTo('#group',10,{x:BB.x*-1,y:BB.y*-1},{x:'+=100',y:'+=100'}); http://codepen.io/MAW/pen/GpJjaB
×