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
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 11 results

  1. Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks
  2. Hello again, I've been using GSAP3' ScrollTrigger plugin for a little while now and managed to make the skew on scroll effect work, which I really enjoyed using. Although it does work perfectly with normal scrolling, I can't seem to make it work while using the SmoothScrollbar.js plugin (https://idiotwu.github.io/smooth-scrollbar/). Please note to the Pen provided: when the SmoothScrollbar is removed, the skew on scroll effect works. I know GSAP and SmoothScrollbar are separate plugins so I'd understand if it just wouldn't work but I hope someone can find a solution. Sincerely, Julius
  3. Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
  4. 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!
  5. 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; }
  6. 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.
  7. 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...
  8. 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();
  9. 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!
  10. 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.
  11. 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});