Search the Community
Showing results for tags 'momentum'.
Found 4 results
-
Hi, Any ideas how to create a tween with momentum effect? For example, in this site: http://tram-house.com / elements continue moving for a while after scrolling has stopped. Thank you in advance!
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo -
Hi all, Trying to make a circular nav with flick, spin and rotating properties. Got it to rotate, but it doesn't seem to flick spin with accelerating and de-accelerating momentum I've added the draggable plugin and set throwProps to true. What am I missing / doing wrong? Any help appreciated.
-
Posting this for future Google searchers: To slow down a repeating animation in GSAP so it seems like it's losing momentum until it reaches the end position, animate both the 'timeScale' and 'progress' properties! Thanks to zadvorsky and zachsaucier for their help. var spin = TweenMax.to('#group',2,{ transformOrigin: 'center center', rotation: 360, ease: 'Linear.easeNone', repeat: -1, paused: true }); document.getElementById('finish').addEventListener('click',function(){ var remaining = spin.timeScale() * ( spin.duration() - spin.time() ) * 3; TweenMax.to(spin, remaining, { timeScale: 0, ease: 'Linear.easeNone', onComplete: function(){ spin.pause(); } },0); TweenMax.to(spin, remaining, { progress: 1, ease: 'Power3.easeOut', },0); }); I haven't figured out a better way to calculate how long the slow-down animation should last. "spin.timeScale() * ( spin.duration() - spin.time() ) * 3" feels right for this animation, but three is a bit of a magic number. Any ideas on how to better calculate that?
