Jump to content


  • Posts

  • Joined

  • Last visited


0 Newbie

Recent Profile Visitors

1,757 profile views
  1. @Diaco.AW Thanks for the fast reply, I was unaware of clearProps existence. Is it documented anywhere?
  2. I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel
  3. @Diaco.AW yes, that does answer my question. To clarify, I was asking if GSAP Tween had built in functionality for rotation. Seeing as passing matrix3d or rotate3d is limited to 360º per loop, I was hoping for a better way. The built in rotation parameter seem to do the trick. thanks!
  4. 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)"}});
  5. Thanks man! Works like a charm now ~ Time to ditch my old JSql animation libraries, this seems to cut runtime by a good 20%~ Edit: Ok.., ok yeah sleep... Im just happy to get a dynamic parallax templet working that does not cause servers to burst into flames XD
  6. Yep, it does.... This is why you don't code at 3:00am
  7. I'm trying to make some animations based on mouse location and scroll ~ but the Tweenlite *Autoplays* (aka finishes the animation instead of staying on that frame). So how do I make Tweenlite static so I can manually change frames it via Tweenlite.progress() ? I am having a little trouble finding it in the documentation. Thanks, Daniel ..... I posted the local file .... *Facepalm* but I cant edit it