Climber

Bruh, this is from a few months ago. This project is already done. Thanks though!

Hey there! We need help building out a small ScrollTrigger project. We have the design just about ready and it just needs to be programmed/animated. Please message if you're interested in taking a look. Please include details on: * What's your experience with GSAP * Where are you located * What is your hourly rate * What is your availability over the next few weeks Thanks! Ryan

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.

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

@diaco Any idea how to add easing to this kind of animation?

Bam! Thanks man!

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!

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.

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!

Thanks for the replies, guys! Some good stuff to consider.

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!

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%; }

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!

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/

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!