Leaderboard

The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/JjVPyxd

Thanks @Rodrigo for the thorough explanation. That was my hunch and you've confirmed it for me. I was just reading another post you had commented in (https://gsap.com/community/forums/topic/29470-gsap-page-transitions-in-nextjs/) that had me question if React was the best choice for my interest in a heavily animated website. While it's certainly possible, it seems to me that Vue is more intuitive and easier to work with from an animation perspective. Thanks for the resources appreciate the help!

Hi, Here is a simple demo using GSAP MatchMedia with the useGSAP hook: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx&terminal=dev Hopefully this helps. Happy Tweening!

Well I don't see the issue then. If you click a link then it'll take the user to a different page, right? So what could be the problem with your GSAP implementation since you'll be landing in a different page? But I see that you found a solution for it which is great! Also thanks for sharing it with the community! 🥳 Happy Tweening!

Hi, In no case this means that React can't work with GSAP, you can use GSAP in react environments without any issues. The problem stems from a shortcoming (and this is 100% a personal opinion and in no case a reflection of the thoughts of GreenSock on the subject) in the way React was created, since at no point a native animation solution was considered. By this I don't mean React creating an animation library or anything like that is about controlling animations, that's why developers have to resort to external libraries and packages to handle some aspects of the animations (like animate before unmounting, right after mounting, control render states, etc.), which sometimes feels quite hacky and convoluted. On the other hand Vue did considered animations and added them to it's core: https://vuejs.org/guide/built-ins/transition.html Using the JS hooks in Vue is super simple and reduces the hassle you have to go through in order to create animations and you don't need any external libraries to make it work. Of course Nuxt abstracts this even more making something simple even simpler: https://nuxt.com/docs/getting-started/transitions If you're still on the fence of which framework to choose, I'd strongly recommend you to go the Vue/Nuxt route (again 100% personal opinion), they general approach is simpler and cleaner. Directives are far more intuitive IMHO than JSX, you can scope your styles on an easier way with Vue, they keep JS out of the HTML and Vue is compatible with the web component API: https://developer.mozilla.org/en-US/docs/Web/API/Web_components I haven't dig on Svelte but I heard nothing but great things about it. I know that @Dipscom uses it on his projects and that's good enough for me. Also @SteveS one of our superstars here in the forums made a nice presentation for the Svelte summit that you can find here: Finally demos, because those speak more than words. Page Transitions in Next: https://stackblitz.com/edit/nextjs-13cw4u Page Transitions in Nuxt: https://stackblitz.com/edit/nuxt-starter-bthjlg Hopefully this helps. If you have more questions feel free to ask. Happy Tweening!

hi @Ev1lMush unfortunately, the demo is not loading but i would recommend using only scrollTrigger to do all your scroll-related animations for you, scrollControls was killing me also, and I didn't find a clear fix for making them both work together in most cases drei is great but still not enough to use it alone for everything something like where i was trying to make drei scroll and scrolltrigger work together but in the end, i only used scrolltrigger maybe its different in your case idk what you are building https://garden-self.vercel.app/ (Hit a refresh if it doesn't work it was a demo for testing so it's a mess and dusty) I am not R3F expert so keep looking for a solution that suits you also since you are using react you can check the new useGSAP() its a replacement for useEffect and useLayouteffect https://gsap.com/resources/React#usegsap-hook- and here are some templates you can fork one , for me its easier to work with React on stackblitz https://stackblitz.com/@GreenSockLearning/collections

hi @Umberto you can check this demo to see how container animation works https://codepen.io/GreenSock/pen/WNjaxKp hope it helps

Hi Rodrigo thx for fast reply. I realized I maybe didn't provide enought explanations: this codepen demo demonstrate a post loop where each cards (spl-post) are posts of the loop, so I want the <a href="something"> link to the related post. I first create the hscroll animation without using the <a> tags, then when I implement them, I discover the issue... So I need to use them, not in order to trigger specific code, but just doing a simple link ^^ Edit : I've just add css : .hscroll a { display: block; width: 100%; height: 100%; } which look to be the solution of my issue

Hi @JLernDesign, Have you looked into Barba.js along with its router plugin?

Hello @Rodrigo, thanks for answering. I believe I have just realized my mistake, I manually added "@gsap/business" : "3.12.2" to package.json dependencies and ran npm i, when really I should have just followed the installation notes and ran: npm install gsap@npm:@gsap/member thanks for your answer!

Hi, In this cases is better to pin the outmost HTML container and not just a specific section which, as you already found out, creates a space between that section and the next, which is not a bug but the way ScrollTrigger works. Maybe something like this: https://codepen.io/GreenSock/pen/YzMyroW Hopefully this helps. Happy Tweening!

Let's focus on one question at a time to prevent confusion and make answering more manageable. When pinning something ScrollTrigger will at empty space underneath the element you want to pin, to make scrolling still feel natural (because you're still scrolling) and set the element you pin to position: fixed. This empty space is needed for the effect to work, but what you can do is hide the empty space offscreen, so that you don't see it. In the demo below I've wrapped all your content in an element called .pinMe and used that as the pin element. So at the bottom of .pinMe will be a bunch of empty space, but because that is offscreen you'll not see it! https://codepen.io/mvaneijgen/pen/yLrYzGq?editors=0010 Is this working as you expect? What is the next most proponent question you're having with this setup?

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Below your pen with ScrollTrigger removed and GSDevTools installed, so you can really focus on the animation an make sure it is doing what you want it to do I've just written a guide how to create any cards stacking effect with GSAP (and ScrollTrigger), the most important point is start with all your elements in a known position and start animating from there. In your demo on line 40 you tell it to animate '-=0.3' seconds before the start of the timeline, that seems weird to me. The start is zero, but you tell it the start is -0.3. The property autoAlpha sets the visibility, so no need to also set it in your tween. To make it simple on your self I would create just one timeline and add all the tweens to there, when you think everything is working you can always optimise it later and split it out to separate timelines. https://codepen.io/mvaneijgen/pen/WNWQEWx?editors=0010 The pen below might really help you in your setup, from my post above. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV

The syntax of the media you're trying to match is the same as the CSS spec, so you need to make sure you write it like you would write it in CSS. The useGSAP() is a new plugin special made for use in React, so if you use React or its other frame works, check out our Stackblitz starter templates, React (please read this article!), Next. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyaxQV?editors=0010

That's exactly what React Context does, it removes the need for forwardRef and useImperativeHandler by using an approach that relies on state management rather than direct event handlers. I don't have time to go through your code with a lot of detail but both seem to work as expected. The most important part here is if both approaches work pick the one that makes your life easier in terms of debugging and code maintenance, that's it. At least that's how I make my decisions in these subjects. Sometimes the fancy code that gets everything done in 20 lines can be a pain to decipher and you might find yourself looking at that code in six months and saying: "What the heck was I doing here??!!" So it could take some time to wrap your mind around it and be able to solve any issues or make improvements. Most times the simpler solution that might seem ugly and it doesn't cause any performance issue is the best. Just my two cents. Happy Tweening!

Yeah that's to be expected. In order to work it's magic Flip does a LOT of stuff under the hood, so when a Flip animation is done it has to run some code in order to clear some styles that are added while the Flip animation is running. This seems to fix it though: tl.add(Flip.from(stateInit, { absolute: true, onComplete: () => gsap.set(el_scalingTile, { opacity: 1 }), })); Hopefully this helps. Happy Tweening!

Interesting, thanks for the insight! I'll be back if I need a hand ~

Just have two images and set one to opacity: 0, and one to opacity: 1 and then in the timeline at the end switch the opacity of the two.

I can't figure out the logic you're using, but the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. So the reiterate, just build the animation you want to happen on a timeline, then when you're happy with that add ScrollTrigger. For the scrolling part you can use the scrollTo plugin and add labels to the timeline at spots you want to scroll to. You can give them logical names like "About", "Project", ect or label${i} like I did and then add that to the clickable element data-label="label0" and then with the scrollTo plugin you can do something like this gsap.to(window, { scrollTo: tl.scrollTrigger.labelToScroll(e.target.dataset.label) }); Hope it helps and happy tweening! https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/ https://stackblitz.com/edit/stackblitz-starters-oy3ouw?file=app%2Fpage.tsx

Hi @iamruletik The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I would start with just the animation on a timeline and get that to work exactly how you want and only when that is done hook it to ScrollTrigger. I've just written a post how I see people start optimising their code before it is working and how this stops you from progressing. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQmKOd?editors=0010