Jump to content
Search Community

Diaco last won the day on December 20 2017

Diaco had the most liked content!

Diaco

Business
  • Posts

    1,215
  • Joined

  • Last visited

  • Days Won

    86

Everything posted by Diaco

  1. Hi mthomson pls tween same property with hover over / out functions , currently you tween progress on over and time on out
  2. Hi Matt Hoover pls check this out : http://codepen.io/MAW/pen/MwbRoL
  3. it's native javascript event : https://developer.mozilla.org/en-US/docs/Web/Events/touchstart
  4. Hi Valelacerte you need to add " touchstart " listener too : http://codepen.io/MAW/pen/QwxXgx
  5. Hi ElliotGeno pls check this topic : http://greensock.com/forums/topic/14003-offsetting-the-center-point-for-an-element-moving-along-a-bezier/
  6. Hi chriswyl it's about transform matrix multiplication , in your third example , pls check the result with remove x,y attributes from text and set transform to this : transform=" translate(100,100) rotate(40 100,100) " but if you want to have that result you liked , pls try this : TweenMax.set($("#t2"), { attr:{ x:x , y:y } , rotation:rot , svgOrigin:x+' '+y });
  7. Diaco

    GSAP timeScale

    in addition to Carl and Rodrigo , if i understand correctly , you can simply use SlowMo ease type too : tl .to('#el', 3, {x:200, ease:Linear.easeNone}) .to('#el', 3, {x:0, ease:Linear.easeNone}) .to('#el', 3, {y:200, ease:Linear.easeNone}) .to('#el', 3, {y:0, ease:Linear.easeNone}) .from(tl,tl.duration(),{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},0) //.from(tl,tl.duration()-2,{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},1) http://codepen.io/MAW/pen/qZVgpv
  8. Hi zachschnackel you can simply use onUpdate callback with a tween of simple object , like this : var XY = {x:0,y:0}; TweenLite.to(XY,1,{bezier:{values:[...]},onUpdate:function(){ console.log(XY.x) yourElem.setAttribute( "attribute" , XY.x ); }})
  9. Hi johnnyno Pls use x,y properties instead of top/left , pixel snapping is cause of that jerky motion , with x,y you will use subpixels
  10. Hi hanslibuzli pls add tiny amount of rotation to your tween , like this : TweenLite.set(".band", { scale : 1 , rotation:0.01 });
  11. Hi janily in addition to Blake's advise , i think this Demo can help you too : http://codepen.io/MAW/pen/bpoQLQ/
  12. Hi SoL2Squiz var animate = TweenMax.to('.MySprite2', 1, { repeat: -1, // >> loops the sprite ( -1 = infinity loop ) x: -2250, // >> -( width - width/frame ) ease: SteppedEase.config(15) // >> total frame - 1 }); pls load TweenMax too
  13. Hi ochalmers pls check this out : http://codepen.io/MAW/pen/bprjrz
  14. Hi swann pls check this out : https://jsfiddle.net/fx6rf688/
  15. as blake suggested before , you can use _gsTransform object for most of css transform properties , and for other properties like left ,width , ...etc you can use one of these methods : 1- elem.style['propery name'] , like this : elem.style['width'] 2 - CSSPlugin.getStyle() , like this : CSSPlugin.getStyle( elem , "width" ); 3 - getComputedStyle(elem) , like this : var style = getComputedStyle(elem); console.log( style['width'] ) don't forget every TweenLite instance handles tweening of js objects as raw data ( whithout css prefixes , unit of measurement ) and getting/setting of css properties is CssPlugin's duty . actually you can get raw values from GSAP engine , but it's too deep and needs some really unnecessary functions when you can simply get data with above methods .
  16. Hi Sophia i think this topic can help you : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap/
  17. you can simply use circle cx/cy as svgOrigin reference , so your group center is : svgOrigin: ' 389.74 420.437 '
  18. Hi 2474 pls check this out : http://codepen.io/MAW/pen/wGezEd
  19. in addition to Carl's Great advise ; you need to kill or pause tween/timeline too , after set to timeScale(0) , like this : TweenLite.to( Tween, 1, { timeScale:0 , onComplete : function(){ Tween.kill() } }); http://codepen.io/MAW/pen/oxwxKG
  20. i think this can help you too , it's svg , but you can use that for div/img tag too ; now you can simply set the number of objects to orbit : http://codepen.io/MAW/pen/RaVzmz
  21. yep , pls check this out : http://codepen.io/MAW/pen/jqmXYY
  22. yep , today Jonathan 's solution is really handy and cool with stagger/cycle method ( v1.18.2 )
  23. yep and another simplest solution ( without js ) is simply change your img css to this : img { max-width: 100%; height: auto; top:50%; transform:translate(0%,-50%); position:absolute; } http://codepen.io/MAW/pen/Kzmxay
  24. Hi Lynx pls check this topic : http://greensock.com/forums/topic/11828-back-with-gradient-changing-offset-value/
×
×
  • Create New...