Jump to content
GreenSock

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

Climber

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

3 Newbie

About Climber

  • Rank
    Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

2,516 profile views
  1. Thanks for the replies, guys! I just tried playing with tweening a single diamond shape around manually using scale with x/y changes. It's hard to make this look like it's following a circular path in a realistic fashion. The easing just doesn't feel right. I think using a 3D library like three.js is probably where I'll have to look to get this perfect. Thanks for the feedback.
  2. Hey there! I'm trying to reproduce the helix animation in the attached video which was created in AfterEffects. I'd like to create this as closely as possible using GSAP. Has anyone done anything like this, or do you have any general tips for the best approach to take on this? SVG with a motion path? TimelineMax? Any help pointing me in the right direction would be greatly appreciated. Thanks, Ryan helix.mov
  3. @diaco Any idea how to add easing to this kind of animation?
  4. 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!
  5. 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 scro
  6. 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!
  7. Thanks for the replies, guys! Some good stuff to consider.
  8. 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!
  9. 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
  10. 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!
  11. 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/
  12. 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!
  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/margin
  14. Shoot, just realized I posted this under actionscript not javascript. Not sure how to move...
×