Leaderboard

I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .

swampthang is probably the best person to ask about this type of stuff. https://greensock.com/forums/profile/17360-swampthang/ I believe he converts his animations to png, one frame at a time, and then uses ffmpeg to combine everything into a movie.

Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.

We all know @OSUblake wants to optimize and blake-ify that snippet, but fears doing so will cause this thread to also get added to the list of threads causing him perpetual anguish. :--)

I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly: //BAD: .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone}) //GOOD: .to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone}) It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween).

Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active

Hi @Rodrigo, Do you need ScrollMagic for your list? Happy scrolling ... Mikel

I could tell you, but after I'd have to kill you... Absolutely is a matter of having the time to create the samples and update the guide as well. Is definitely in my to-do list:

Convert your animation to a sequence of images, and then to video. There are several threads about that. This one links to most of them.

Hey, I've recently had to implement scroll with momentum/inertia. It's actually incredible simple: 1) animate scroll with basic linear tween with short duration (eg. .15 s) - let it be tween A 2) create second tween with easeOut ease and way longer duration (eg. 1 second)- let it be tween B 3) when user scrolls, use tween A - basic scroll movement 4) whenever user stops scrolling launch tween B - you can measure time from the last event and decide if user has stopped scrolling 5) whole magic is how to make smooth transition between both tweens - you can look for deltaY/deltaX values from the wheel event. For more advanced animations I would recommend looking for some physics library, to make all movements super natural. 6) interpret delta value to get the scrollTo x value in tween B https://codepen.io/FilipWiniarski/pen/OeXYKv I also think you could make a custom dynamic ease to make the momentum feel more natural. It's all about fine tuning.

Hi, In some cases, I recommend the ScrolloMeter if user scrolls too fast. ? https://codepen.io/mikeK/pen/maWvve Be cool. Go-slow. Mikel

Hi nicoladelazzari, It looks like you have not placed the correct version of the plugin in the your vendors folder. Can you check that you have used the ThrowPropsPlugin that is inside the folder: 'bonus-files-for-npm-users'? I have just created a dummy project here in my desktop, added Draggable and ThrowPropsPlugin as a test and it is working as expected. The catch to pay attention to with ThrowPropsPlugin is that you should only require it in the browser side of the build and not import it as if it's a npm package. import TweenMax from 'gsap/TweenMax' import Draggable from 'gsap/Draggable' if (process.client) { require('~/assets/vendor/ThrowPropsPlugin') }