Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'transform'.

  • 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







  1. Hey all! In the attached codepen, my tween causes the element in question (a red treble clef) to become huge before moving. Is there a way to stop it from jumping size and positions like that? As you can see in the codepen: setTimeout(function() { var clef = document.getElementById('Clef_0_1@1'); TweenMax.to(clef, 10, { x: 100, y: 100 }); }, 1000); The JavaScript only specifies a translation, but I get the sense that the original position is shifted first and it's clear that the original scale is obliterated. Many thanks for your help!
  2. I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB
  3. I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing. tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });
  4. so i am building a bike animation, and i want to rotate the pedal assembly while keeping the pedal itself perpendicular to the ground. i am failing on that last bit. current version of the code here http://codepen.io/brountreeRS/pen/mJgNbb
  5. Hey guys, Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info. Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? Thanks, in advance.
  6. Hi! I'm working to new animation engine! Cross-browser and back to IE8 support for transform (rotate, scale, translate), but it's always uses transform-origin is 50% 50% or 0px 0px! I obtained and installed TweenMax.js CSSPlugin IE8 transform script and works on any transform-origin! My project is MIT-Licensed. Is it possible use code on my project free or need BUY license or completely restricted? Sorry for bad english!
  7. Having trouble understanding 3D transformations. I took a look at this page: https://greensock.com/css3/, but while they provide great demos, the code isn't shown so I can analyze and learn from it. In my pen demo ( ), I'm struggling to understand why my transforms do not animate smoothly to a 90 degree rotationY. When the animation starts it jumps and then animates the rest of the way...of course not the intended effect. Any assistance is appreciated. UPDATE: Ok, so I figured out I guess the parent container needed a perspective set. Now they animate smoothly, but at 90 degrees I'd expect them to disappear and I can still see them on an angle?
  8. I think I stumbled on a bug trying to rotate text elements in SVG with Greensock... It completely ignores the rotation of the text for both the house and the sun... TweenMax.set(sunDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); TweenMax.set(houseDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); Any ideas?
  9. Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
  10. Hi there, first of all, wow!! GSAP is very impressive. I have the following code to animate the transform of an element: TweenLite.to(".element", transitionSpeed, { ease: Power2.easeInOut, css:{ transform: "scale("+scaleDiff+") rotate("+angle+"deg) translateX("+left+"px) translateY("+top+"px)" }}); Everything works as expected, except that the rotation is in the wrong direction. Can you give me a hint on how to change the direction of the rotation without loosing the transform property?
  11. Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
  12. This works: TweenLite.to(el, 1, {top: '100vh'}) But this doesn't: TweenLite.to(el, 1, {y: '100vh'}) In the first instance the elements ends up with style="top: 100vh" but in the second it ignores the unit and ends up with style="transform: translate3d(0, 100px, 0)". Any way to force the transform tween to use viewport units?
  13. http://jsfiddle.net/nqdaj3cL/ Hello! I have a (maybe simple) problem with transforms and GSAP: I want to scale a centered object and modify its width but as you can see in the fiddle, the object isn't centered after the animation. It's because the translate(-50%, -50%) isn't honored anymore as GSAP keeps in memory the initial x and y values. But if I remove the matrix in the inspector and modify manually a transform : scale, it centers fine. What can I do in this case? Thank you!
  14. Its quite easy to do a diagonal rotation in CSS. http://codepen.io/moorthyrweb/pen/jEayJL But, using GSAP how can I achieve the same?
  15. Hi, I have a problem with transformations in Chrome (webkit browsers). I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names. In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d. What's the solution? Thanks for the help!
  16. Hi, is there any way to disbale "translateZ(0)" hack in v1.15.0 ? Please check the codepen example in Chrome. When I use v1.14.2 it looks cool, but with v1.15.0 scale looks very blurry on webkit based browsers.
  17. Hi all, It seems the default value for transformOrigin has changed (but not the documentation). It broke some of my older animations that expected the origin in the center. While TweenMax 1.11.8 was fine, my animated bicycle was shattered all over the screen with version 1.15 (or gsap/latest). I thought I'd let you know
  18. Hello, I'm trying to create an effect that several boxes that overlap are rotated and then each one expands from the other in a 3D way. The only way I found that does that is by modifying the transformOrigin property. But unfortunately that property does not animate and simply goes into position. Is there a better way to achieve this? (the codepen sample should illustrate the animation that I'm describing) Thanks. Here's the codepen again: http://codepen.io/netgfx/pen/EaKPdP
  19. I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });
  20. Hi all, I'm having this problem with SVG rotation. Basically it always reset its position once the animation is finished. Codepen: http://codepen.io/anon/pen/QwwEYX During testing, it works fine on Chrome, but not of Firefox and mobile Safari. I'm using Firefox 33.1.1. Anyone's having the same issue? Any pointer is greatly appreciated. Cheers! UPDATE: Apparently the problem is exclusive to FF for mac and Safari mac.
  21. Hi, About me: This is the first day I am trying JSAP. I know using jquery and doing animation. But not expert. I am trying to rotate an element 180 degree, it works perfect using css3 rotation, but using jsap-jquery plugin, it behaves weired. It works for 179 degree and 181 degree. Problem is in 360 degree rotation too - it stays there. The code I used $('.link2').click(function(){ $('.div2').animate({'transform':'rotate(-180deg)'},3000) }) I tried the tweenmax way too $('.link3').click(function(){ var sur = $('.div3'); TweenMax.to(sur, 1.5, {transform:'rotate(180deg)'}) }) again, it works when using other values is there any way to force the direction, so it rotates the way i want?
  22. I'm using a scale transform, when accelerated using the force3D property the elements are not repainted correct at the end of the animation. I believe this is a chrome/blink bug but I wanted to see if anyone had anything to share on the matter here. The issue can be see here: http://jsbin.com/qehuna Using a non-accelerated tween is fine: http://jsbin.com/sureza Accelerated CSS transitions are fine: http://jsbin.com/fomuno As a workaround I've discovered that adding a small non-accelerated transform after the main tween removes the elements from a composite layer and triggers a repaint: http://jsbin.com/vezaxa This issue is not present in Firefox
  23. I've noticed that GSAP applies transform properties to SVG elements via the inline style attribute instead of the native SVG transform attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform. This tends to be a browser compatibility issue, especially with IE. I cross referenced Velocity JS, and it looks like there's some feature detection built in that deals with this issue. Am I missing something? Or does GSAP have a method of accomplishing this easily? I should note that I already have some functional code, but it's a lot more verbose than I'd like it to be; onUpdate functions running after every tween. To be sure I'm clear, I want: transform="translate(40, 60)" or transform="matrix(1,2,3,4,5,6)" instead of style="transform: matrix(1, 0, 0, 1, -45, 75)" (ignore number values) Thanks for the help
  24. Hi all! I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically. But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked. Demo Link: http://theoremcreations.com/undertone/16002/ss/demo/ CodePen Link: http://codepen.io/anon/pen/lnIHg Animation_Demo.zip
  25. Hi, I’ve spent the last day building a working rubix cube demo using TweenMax to position and animate the objects accordingly. Draggable is being used to rotate the cube X/Y and throwProps is used too. Firefox is displaying some very odd, back-face type display issues that I can't seem to resolve, can anybody suggest a work-around or fix to correct this problem? IE10 is simply flattening the whole object onto a 2D plane and not allowing any z-depth. The demo will auto rotate 20 times before allowing user interaction by "swiping" a side to rotate it, or dragging the background to rotate in the cube in 3D space. Any help would be gratefully appreciated. View the demo here: http://www.rogueinteractive.net/rogueiOS/rubix.html Pete