Leaderboard

Hey @Claire. I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums.... Keep it simple. Don't list a bunch of requirements ("it should start in the middle, then fan out, then have a spotlight, then an SVG appears, then it scales, pinned until finished..." - that's way too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, only post a question focused on that one thing, like "how do I trigger the pinning when the SVG is in the center of the viewport?" Keep your CodePen focused only on that one piece. Then once that's answered, move on to your next question. Baby steps Again, don't list out all your problems (the list of requirements that you're having trouble with). You'll get a lot more people willing to help you if you show a willingness to keep things simple and clear for them. And definitely keep your questions focused on GSAP-specific things (like the API) rather than general logic stuff (if possible). Good luck with your project. 👍

I wouldn't worry about it at all. It's cheap. ScrollTrigger.create({ ... onUpdate: self => { if (self.direction !== self.prevDirection) { console.log("toggled!"); self.prevDirection = self.direction; } } });

Sorry, we can't really provide a release date but you're welcome to use that beta version in the meantime if you'd like. You don't need to wait. Yes, exactly. And if it's used in a site/product/app for which a fee is collected from MULTIPLE users, that'd require the special commercial license that comes with "Business Green" memberships. 👍 Hopefully you'll find that the membership more than pays for itself very quickly. Good luck with the project, @coolDev!

Yes! The batch() method is totally worth it. Many thanks GreenSock Team.

https://imgur.com/a/0IBWb7T Works just fine for me. Maybe you need to resize your viewing-window and reload, to make sure locomotive-scroll actually uses the transform-smooth-scrolling ? ...because as already mentioned, it will revert back to native browser scrolling when loaded below a certain window width. Which is also why you should not remove this line pinType: document.querySelector(".App").style.transform ? "transform" : "fixed" because that line makes sure that when locomotive-scroll reverts back to native browser scrolling, ST will use position fixed for the pinning. As your scroller is not the body, otherwise it will be using 'transform' by default, which will make your pins appear rather jittery when locomotive-scroll reverts back to native browser scrolling. Edit: My demo actually still does have some issues - with regard to things not working quite right on resize - but for the time being I don't have time to tinker with this some more.

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad(). Update : Solution found, thanks in advance

Hi @Koriane and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! 🥳 What exactly do you have in mind? Have you created anything that resembles what you want to do. This could be a very deep topic to dig into with different alternatives. We have this example of route transitions using Next13: https://stackblitz.com/edit/nextjs-13cw4u Also I just updated our example using Flip in different routes: https://stackblitz.com/edit/nextjs-bti25c As you can see that example has a component that checks for route changes and creates a Flip animation for some elements in it without re-rendering. It might not be what you're looking for but without a minimal demo is really hard for us to know exactly what you're trying to do. Let us know if you have more questions. Happy Tweening!

Thank you it works

Update: I also tried to make an example that is a bit more condensed, to make it at least a little bit easier to see through what's going on there. @Rodrigo would you mind having a look at this if you find the time, to see if this is somewhat acceptable from the React side of things? https://codesandbox.io/s/gsap-scrolltrigger-with-locomotive-scroll-in-react-ux8nlv Worth mentioning on the side: Since elements and even whole sections kept disappearing on me when scrolling, I added a suggested sort of workaround to that known locomotive-scroll issue to the end of the styles.css

Hi @dinoiam and welcome to the GreenSock forums! I see a few issues here: The i and the dot are separate paths, hence using stagger adds a weird effect. You should try to combine them into a single path in order to animate them at the same time. You are currently using the default duration (0.5 seconds) and a longer stagger time, so there will be a pause of 0.5 seconds between each path being animated, which is kind of odd. The stagger easing you're using might not be helping too much neither, I'd start by not using any easing function and then add something to the animation instead of the stagger. Maybe this comes closer to what you're trying to do: https://codepen.io/GreenSock/pen/JjBOjoK I added some extra height to the elements before and after the signature and the markers for better debugging. Also take a look at this articles by @PointC about animating handwriting with GSAP: https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Finally take a look at the DrawSVG Plugin which should make this super easy: Let us know if you have more questions. Happy Tweening!

I think faking 3D with shadows will be hard because of the perspective. But I'm sure someone has done similar to that before on CodePen. When I need to see how an effect is done, CodePen is always the first place I search. So when you are going to learn WebGL? 😉 I'm not saying it will be easy, but it is definitely worth it. It opens up whole new world of animation possibilities.