Leaderboard

We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.

We need to keep this forum focused on GSAP questions. This also seems like the same question you asked here: I'd follow the advice in that thread and use the video @Rodrigo posted as a guide. If you have any GSAP related questions, we're happy to help. Best of luck on your project.

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️ From what I can tell, the solution would be to use a shallowRef() instead of ref(): https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue Does that clear things up?

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

Hey @GeS I have been using Locomotive on a few projects and recently switched them all over to the GSAP Scroll Trigger plugin. Once I understood how it all worked the change over was fairly easy. I can achieve the same effect, and more, with so much more control. And it's all in the same comfy GSAP ecosystem This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin. https://codepen.io/andystent/pen/XWXbMLo You can then combine this with something like Jack shared above to get the horizontal scrolling panel. I'm going to be doing this on a new project starting next week. Can't wait! https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d Good luck!

+1 too [Edit] Solution: Use the Ease plugin with this great js library: bezier-easing.js: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing.css.ease)}); (the default css's ease! @Mark) or specify any cubic-bezier: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing(0.25, 0.1, 0.0, 1.0))}); Check also this: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ And this, if you want directly the approximations of the principals cubic-bezier easing functions (in easing.js): https://gist.github.com/mckamey/3783009