Jump to content

Search the Community

Showing results for tags 'skew'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 8 results

  1. Hi and prosit 2017! I was wondering why GSAP produces different skew-results than CSS? (See CodePen: http://codepen.io/rowild/pen/bgbaeV) I'd like to think to understand the mathematical implementations underneath it, which, in my opinion, would be keeping the sides the same length. But CSS does not adhere to that rule when told to draw 100vh. Is there a way to achieve the similar result with GSAP? Thanks!
  2. Hi, Newbie here having trouble with animating on a path. I've managed to create a path using the bezier plugin included in tweenmax, but it is very inconsistent (path seems to be different each time). I'm looking to achieve the appearance of a piece of paper floating from one point to another - so a curved path, skewing, rotating etc. Any help would be greatly appreciated var tl = new TimelineLite({paused:true}) var trueTweenPoints = [ {top:'10%', left:'90%', rotation: 10}, {top:'75%', left:'75%', rotation: 80}, {top:'20%', left:'10%', rotation: 90} ]; tl.to(".trueTween", 0.8, {bezier:trueTweenPoints, type:"soft", curviness:1.25}); .trueTween { position: fixed; background: red; right: 4.5%; top: 30%; width: 160px; height: 300px; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; }
  3. The skew values do not get calulated proplery using GSAP plugin. I am geting correct values using simple jquery animate doesnt alter the height of the element. How ever i feel that even though the height is not explicitly calculated, there seems to be height difference. Please check the codepen url for the same.
  4. Hi, rotation, rotationX, rotationY, skewX, skewY attributes aren't working when I use negative number after '+=' please check the attached pen. There is no problem when I use x, y, or scale parameters. Are you planing to add '*=' and '/=' support? I think it would be great for scale attribute...
  5. my code is below the TweenMax skew doesn't work when I add a second line of code altering the skew in waterSkew function. It works fine when the second line of the waterSkew function is not in there. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([TransformMatrixPlugin]); //CHANTEL Timeline variables var cMoveTimeline:TimelineLite = new TimelineLite(); function init():void{ waterSkew(); cMove(); } function cMove():void{ cMoveTimeline.to(C,2,{x:166.9, y:479.55}); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}, "+=.15"); cMoveTimeline.to(C,1,{x:163.3, y:471.25, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}); cMoveTimeline.to(C,1,{x:166.9, y:479.55, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:170.5, y:469.5, rotation:0}); } function waterSkew():void{ TweenMax.to(water, 8, {transformMatrix:{skewX:1, skewY:-1}}); TweenMax.from(water, 8, {transformMatrix:{skewX:1, skewY:1}}); } init();
  6. Climber

    Swinging sign?

    I'm trying to make a sign image look like it's swinging back and forth towards the user with the correct perspective. For example where the sign would get wider at the bottom as it swings closer to the camera and then narrower as it swings back. Can something like this be achieved just with skewing or is there some other kind of perspective property? I guess this is as much a regular css question as it is a tweenmax one. Any tips would be greatly appreciated!
  7. Hi all, I'm working on a tool that gathers info from the xml files of a xfl flash project. I then need to reproduce some of the animations I find in that xml using tweenlite. Within the xml files when I find something like this on a keyframe of an ordinary flash tween: -<DOMFrame keyMode="22017" motionTweenSnap="true" tweenType="motion" duration="10" index="18"> -<elements> -<DOMSymbolInstance centerPoint3DY="-119.5" centerPoint3DX="70.65" libraryItemName="Symbol 12"> -<matrix> <Matrix ty="-124.75" tx="65.4" d="0.998733520507813" c="-0.050689697265625" b="0.050689697265625" a="0.998733520507813"/> </matrix> -<transformationPoint> <Point y="5.3" x="6"/> </transformationPoint> </DOMSymbolInstance> </elements> </DOMFrame> I try gathering the matrix and other info and then doing this: myTimeline.insert(TweenLite.to(mc, tweens[t]._durationFrame, {useFrames:true, ease:ClassicEase.ease, easeParams:[tweens[t]._acceleration], alpha:tweens[t+1]._alpha, transformMatrix:{a:_a, b:_b, c:_c, d:_d, tx:_tx, ty:_ty}}), 0); Most of it works fine, but I've found that animations taht use skew within flash behave in unpredictable ways. It's like the skew from tweenlite is not the same as the flash one. Any help will be appreciated. Thanks.
  8. Hello, is it possible to tween skew and use the bezierThrough plugin at the same time? The following structure doesn't work, just skewing the object: TweenMax.to (_rootRef.logo_01, 1, {transformMatrix:{skewY:30}, bezierThrough:[{x:251, y:247}, {x:305, y:265}, {x:386, y:278}], delay:0.5, ease:Cubic.easeInOut});