Jump to content
GreenSock

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

Climber

Members
  • Posts

    14
  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

2,307 profile views

Climber's Achievements

Newbie

Newbie (1/14)

3

Reputation

  1. @diaco Any idea how to add easing to this kind of animation?
  2. Does anyone have any idea how to get the percentage of a dragged item using the Draggable plugin? I'm looking through the docs and I don't think percentage a property/method, unless I'm overlooking it. I'm guess I probably need to rock my own logic on the drag event. Thanks for any tips!
  3. Some progress... I was able to import ScrollToPlugin by using a direct path to it: 'gsap/src/uncompressed/plugins/ScrollToPlugin.js' The problem is getting webpack to include ScrollToPlugin in its bundle since it doesn't see "scrollTo" in the TweenMax line below as being a module. It just thinks it's a random object property so it doesn't pull in the ScrollToPlugin when it bundles. TweenMax.to(window, 2, { scrollTo: {y: 200}, ease: Power2.easeInOut}); As a work around, I created a variable: var test = scrollTo; This forces the plugin to be bundled since it has to resolve scrollTo. Not super elegant, but works for now unless anyone else has a better approach.
  4. Related to this, does anyone have any tips for using the ScrollToPlugin with Webpack? I installed gsap via npm and was able to get TweenMax to import properly by using TweenMax:'gsap' in ProvidePlugin. I'm confused how to import and use the ScrollToPlugin though. Any help would be greatly appreciated!
  5. Thanks for the replies, guys! Some good stuff to consider.
  6. Back in the Flash days, animating a bitmap or sprite would yield better fps/performance than a movieclip. I'm curious if this translates to JavaScript as well. For example, do you get better performance animating an img directly vs animating a div that contains an img? Both anecdotal and technical replies would be greatly appreciated. Thanks!
  7. Climber

    Swinging sign?

    Thanks so much for the help. This got me on the right track. Here's the code I ended up using if it helps anyone: $('.swing img').mouseenter(function(event) { var sign = event.currentTarget; sign.rotationX = 0; TweenMax.to(sign, 0.2, { rotationX:-20, ease:Power1.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"]}); TweenMax.to(sign, 0.4, { rotationX:8, ease:Power1.easeInOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.2 }); TweenMax.to(sign, 3, { rotationX:0, ease:Elastic.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.6 }); }); function onUpdate(tween) { var target = tween.target; target.style.webkitTransform = target.style.transform = target.style.msTransform = target.style.MozTransform = 'rotateX('+(target.rotationX)+'deg)'; } .swing { -webkit-perspective:300px; -moz-perspective: 300px; -ms-perspective: 300px; perspective: 300px; } .swing img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -transform-origin: 50% 0%; }
  8. 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!
  9. Found a workaround. When you tween the "scale" you should also tween the "rotation" property. Even changing it a very small amount like 0.01 degrees will make the tween perfectly smooth in Firefox. Found this through a comment on this thread: https://bugzilla.mozilla.org/show_bug.cgi?id=663776 Example (test in Firefox): http://jsfiddle.net/mennovanslooten/rNBGW/
  10. Doing work in onUpdate to force the object's bounds to land one whole pixels seems very difficult and I'm not confident it would work anyway. Or maybe I'm not confident in my ability to do it Alright so I guess I'll have to live with jerkiness in Firefox or simply not do the scaling. Thanks for the quick response!
  11. I know Firefox is notorious for having choppy playback. If I'm animating an image down the screen using the "top" property, using roundProps definitely helps make it less jerky. I think Firefox doesn't like things sitting on half-pixel values. How do I accomplish the same thing using the "scale" property? When I try, I think the scale value is properly rounded, but I'm still getting choppy playback. I'm not sure what's going on under the hood, but it seems like even if the scale value is rounded, the item I'm scaling will potentially still have half-pixel values for its width/height/marginLeft/marginRight/top/left (or however it's technically rendered behind the scenes). Anyone have any tips here? Thanks!
  12. Shoot, just realized I posted this under actionscript not javascript. Not sure how to move...
  13. I know Firefox is notorious for having choppy playback. If I'm animating an image down the screen using the "top" property, using roundProps definitely helps make it less jerky. I think Firefox doesn't like things sitting on half-pixel values. How do I accomplish the same thing using the "scale" property? When I try, I think the scale value is properly rounded, but I'm still getting choppy playback. I'm not sure what's going on under the hood, but it seems like even if the scale value is rounded, the item I'm scaling will potentially still have half-pixel values for its width/height/marginLeft/marginRight/top/left (or however it's technically rendered behind the scenes). Anyone have any tips here? Thanks!
×