Leaderboard

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/bGJxXXG?editors=0010 For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have Stackblitz starter templates for all the major frameworks. Again hope it helps and happy tweening!

Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools. To achieve this effect in ScrollSmoother, you will need to position the image manually. https://codepen.io/SahilAFX/pen/GRLXaGJ

Hi @Haris Khan welcome to the forum! A timeline is the most powerful tool in GSAP with it you can put tweens in a sequence and thus in this case have ScrollTrigger play your timeline in full. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJxyeV?editors=0010

@Rodrigo Thanks for picking up the call. Yup, I learnt the technique from her video. I was trying my luck to see if I could hear a second opinion. Anyway, thank you so much for all the patience and help. Hopefully, I will be strong enough to be the next contributor soon. And teach people what I have learnt. Take care, mates.

The React way is always something that will lead to discussions and disagreements no matter what. I've worked with react for over 8 years, ranging from small static websites to large SaaS apps with hundreds of files and convoluted state management. At the end you have to decide what's more important the so called component encapsulation and abstraction or a more flat and simpler architecture that makes other tasks easier. Unfortunately we can't have both. On that subject, what is understood with encapsulation? How is not secure if you don't abide to it? How can it lead to issues? Those are not general concepts and cannot be applied in the same way to every project in react, that is something that has to be dealt with on a project basis. Is your project handling any information that needs an extra security layer? If not then the whole argument that component encapsulation could lead to security problems is out the window. Is your project mostly static in terms of what is rendered during the app's life cycle? Then what's the point of having hundreds of refs, use forwarding refs and imperative handlers, if you know that the selectors you're pointing to are going to be there no matter what? See how deep this rabbit hole gets? I'm not a big fan of the react way TBH (is worth mentioning that I'm not entirely against it either) since I've seen it create some confusion from time to time. I'm a believer that these type of decisions need common sense as well as pre-set guidelines. For example in this forum everyone with some experience will tell you: "animate scale instead of height and width because you get better performance". But there are some projects and situations when that is not an option, so you have to use width and/or height. In those cases be sure to make the elements as small as possible and that they affect the document's flow in the most minimal way. The dogmatic approach is to always animate transforms but the realistic one is that sometimes there is no other option and when is done properly you'll get a nice smooth animation that won't hurt UX. Again is a project by project approach not something set in stone. A project in react is no different. Sure component abstraction in order to keep everything as small as possible and make it easier to maintain, is the desired outcome, but if that will imply that you'll have to code through a bunch of hoops in order to get things working the way you want, you might want to re-visit that approach and maybe in a few cases/components, just have a flatter structure with a bit more code in those components in order to make code simpler and easier to maintain. The only rule of thumb I follow no matter what is this: "Test, test, test and then test more". If you break encapsulation and you're not doing things the react-way, but the app works the way you want/need, nothing breaks and development and maintainability is easy, then what's the problem? In this case you have to decide based on what works. Keep everything the way you have it now and find a way to tell the child component that is safe to use a specific selector and only then create your GSAP instances? Somehow pass the parent ref to the child component and use that as the scope in order to create the GSAP instances when that ref is not null/undefined? Flatten your structure in order to make it simpler? I was adamant to a flatten structure because in my experience that is always the best road in the long term, nothing more, but this is your project and your time, hence your decision. I just offer my personal opinion based on my experience, but I don't intend to enforce anything on anyone here or anywhere else. If somehow it felt that way I'm sorry about it and trust me, it was never my intention. Finally if in some way I was rude, blunt, condescending or insulting to you, I apologize for that as well, it wasn't my intention neither. The GSAP forums have been for over a decade a safe place where nobody gets called names, downvoted or anything of the sort. Is a healthy community that aims to give the best possible advice with the time we have in our hands, while making everyone welcome and transmitting the vibe that you're safe here. If I failed in that way, then there is a learning experience for me, for sure. The aim is to be better than I was yesterday. Happy Tweening!

Hi, That's an interesting site to say the least. I inspected with devtools and saw that it actually uses two different sets of images. This is the thumbs container: And this is the feed (single column) one Now how the animation is achieved and which elements are being animated, honestly I couldn't tell you but if you set the opacity of the thumbs container to zero like this: <div class="page__modal home__index__modal" style="visibility: initial; opacity: 0;"> You'll see the scroll bar of the feed element right behind this, so basically the developer uses two different elements, hides immediately the thumbs view using visibility (hidden/initial) and then only animates the elements in the feed section, that's why the scroll position is remembered for saying it in some way, because when you're on the thumbs view only that scroll changes. Here you can see the first image behind the thumbs: The trick in this website is all about timing and which set of images are the ones being animated. As you can see your setup and approach is far different than this website so I doubt you'll get the same result, especially when it comes to the scrolling part. I'd recommend you to have a look at this demo in order to get an idea of switching between a grid and columns, of course this uses Flex and not Grid, but the approach should be similar: https://codepen.io/GreenSock/pen/zYqLjre Hopefully this helps. Happy Tweening!

I mean I could easily be wrong, but I didn't think I was asking about communicating up the react tree? I'd thought I was just asking about having a child component's gsap animation reference a parent - which may not work in React without passing refs, but it *does* work with Gsap, React and Astro. Maybe this is a side effect of SSR and astro rendering html prior to react components, and gsap *shouldn't* be able to select and use parent elements as triggers, but it seems to be able to. And that seemed linked to the idea that you scope your gsap selectors. I was just asking if it's ok to not scope the selectors and allow a child element to keep using the parent as a trigger - which it's currently doing I do understand about not talking about frameworks, but by avoiding talking about astro and react... I've got into a conversation about the best way to structure a framework that I'm not using? Just as a takeaway from this: Is it fair then to say that ScrollTrigger animations must be placed at *at least* the level of the component that contains the trigger? And I would've written it off as a bit of a curt and roundabout way of saying 'do more work' - which is fine, people need/deserve that sometimes when asking questions - if it wasn't in reply to a post where I outlined how and why I structured my app in the way I did, or for the other message that came off pretty condescending too. Hard for "you need to learn more" to come off as more than a skill issue in that context. Either way it doesn't really matter. Meant or not it was just a "let's stop" reply on my part and a brief explanation that I don't take this forum for granted. The replies annoyed me a bit, sure, but it's not a big deal.

Changed it up, slightly, based on one of the demos (https://codepen.io/GreenSock/pen/PoyJpMY) and seems to work now. Changed the distance to scroll calculator into a function and then made the pin almost most of the scrolling content and not just the carousel container. https://codepen.io/richardcool/pen/yLrqdQm

Hi Rodrigo, thanks for your help. I have finally come to this solution: https://codepen.io/iacus/pen/NWmLZMM

Hi, Yeah I think the issue was more an order of operation one rather than anything else. When to clear the styles from the gallery items was the key. Also I used scale: true because in your original demo you have that setting. I changed the image as well in order to make it more clear if it gets distorted as well. Here is the demo updated: https://codepen.io/GreenSock/pen/vYMzKZx Happy Tweening!

Hi @lrc and welcome to the GSAP Forums! The first thing I notice is that you have toggleActions and scrub on every ScrollTrigger instance. Those are not compatible at all since they do completely different things at it's core. Scrub will update the tween/timeline's progress based on the scroll position, so is a gradual update. On the other hand toggleActions will do something on each event (for lack of a better word) on the start and end points, as mentioned in the ScrollTrigger docs: toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Also is super weird that you have this: toggleActions: 'play play play play', That will basically play the instance in all those situations. Also it seems that you're misunderstanding how snap works and the fact that you're creating a single ScrollTrigger instance for each element. This should be as simple as creating a single ScrollTrigger instance that just snaps the scroll position of the scroller, something like this: https://codepen.io/GreenSock/pen/jORvqaL I made some changes in the HTML and CSS since I don't think your current setup will work since it doesn't create the needed scrolling to move the list. Hopefully this helps. Happy Tweening!

Hi @rlaydtjs and welcome to the GSAP Forums! Unfortunately your demo is not working, you can fork one of our React starter templates from Stackblitz: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters Finally since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ Happy Tweening!

Hello @Dennyno For a bit more info, check this recent thread.

Explain which part? The ternary operator? It's a shorthand version of an if/else statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator It gives you the same result as this: if (window.innerWidth < 737) { topScroll = 50; } else { topScroll = 100; } For more info about responsive design, I'd recommend an in depth reading of those threads I listed above.

I'd probably just set a variable depending on window width. Maybe something like this: var topScroll = window.innerWidth < 737 ? 50 : 100; // then add it to your tween TweenMax.to(".signup_header", 0.1, {css:{display:"block", top:topScroll}, ease: Power4.easeOut});