Leaderboard

Just add an extra div to the sidebar, and set that as the pinned element. Hope it helps and happy tweening! https://stackblitz.com/edit/vitejs-vite-znkfam?file=src%2FApp.jsx

Hi Fatima, when I built banners, we normally embedded type as compressed PNG images. The trade-offs -- SEO, accessibility, responsiveness -- are more acceptable in ad banners, since they run in i-frames of fixed dimensions. Long blocks of legal text were sometimes done with system fonts, or as limited palette PNGs. good luck!

I've restructured your layout a bit, so that you don't have the fight the height of the elements. Everything is stacked on top of each other on page load and then with a .from() tween the elements get moved and animated in to place. https://codepen.io/mvaneijgen/pen/RwOPGZm?editors=0110 If you want the border back, you'll have to create an extra element that is not part of the pin and is the window height, which then gets scrolled away or maybe make it part of the animation and have it also move the same distance as the image. I've also set ease to "none" for all tweens, made them both the same duration, and set the scroll distance to the windowHeight. Be sure to read through the JS comments! https://codepen.io/mvaneijgen/pen/MWRwjPO?editors=0010

When sharing a Stackblitz link be sure to include the file we should be looking at. For your setup I would start with all the elements at a known position eg the center all stacked on top of each other. Then you can move them .from() some position and then .to() some other position. If you use staggers you can just write one tween for all elements and with some clever position parameter you can have another tween start animating when the first one is done. Also be sure to use xPercent and yPercent when wanting to tween percentage based values. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ I think this is going to be your next questions, so I'm going to put this here. If you want things to stagger seamlessly check out the awesome tutorial our own @Carl I couldn't work in your Stackblitz, because you had not setup GSAP in the proper way Check out our React guide https://gsap.com/react. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLrNeRz?editors=1111

So, I've solved the problem: the SSR was indeed the issue, so I created a service: platform.service to call it whenever I need it: constructor( @Inject(PLATFORM_ID) private platformId: Object ) { } isOnVue(): boolean { return isPlatformBrowser(this.platformId); } isOnServ(): boolean { return isPlatformServer(this.platformId); } And I simply put my GSAP inside an if (this.platform.isOnVue()) { // GSAP code here } Problem solved! 😄 Thank you very much!

Check out @Carl's SVG viewbox tutorial. If you need further assistance be sure to include a minimal demo with what you've already tried, that way we can see your thought process and thus better help you understand the tools!

Hi, @mvaneijgen is right, is better to just focus on getting the Flip animation happening first and then add ScrollTrigger to the mix. Adding ScrollTrigger to this is the simple part of the whole process. Also as Mitchel mentions when animating using Flip's from() method you need to get the state of the element, change the element in some way (reparent, change styles, etc.) and then animate from the initial state. In this case you can also take a look at Flip fit() as well: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here are a few demos using ScrollTrigger and Flip: https://codepen.io/GreenSock/pen/ZEmQBQg https://codepen.io/GreenSock/pen/RwqJBEa https://codepen.io/GreenSock/pen/JjVPyxd This is just a Flip demo that shows reparenting a group of elements using Flip fit(): https://codepen.io/GreenSock/pen/JjVPyxd Hopefully this helps. Happy Tweening!

Hi @Destro and welcome to the GSAP forums! You can use the CSS Rule Plugin but we strongly recommend not to because it has been deprecated in favor of using CSS Variables instead: https://gsap.com/docs/v3/Plugins/CSSRulePlugin/ As mentioned we recommend using this approach: https://codepen.io/GreenSock/pen/PowWgOz Hopefully this helps. Happy Tweening!

Hi @Destro welcome to the forum! You can use the CSS Rule plugin https://gsap.com/docs/v3/Plugins/CSSRulePlugin/ but as stated on that page it is much easier to create CSS variables for the properties you want to change and then just tween those variables. If you need further assistance be sure to post a minimal demo, so that we can take a look at your setup. Hope it helps and happy tweening!

Hi @Ysrbolles welcome to the forum! Without a minimal demo there isn't much we can help with. The animation you shared comes close to the demo I've linked below, so maybe you could use that as a starting point. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/eYEXmJm

That's really helpful thank you, I now understand how to use it

Thank you to all of you and maybe see you next time ! Have a nice day 🚀

Hi @Rondi welcome to the forum! Without looking at your code it sounds like you're trying to tackle the scrolling part first instead of focusing on the animation part. This is a classic mistake people make when working with ScrollTrigger. All ScrollTrigger is doing is animating your animation on scroll, so before you add ScrollTrigger you first have to make an animation! Check out the video below I would remove all ScrollTrigger code from your setup and just first focus on the animation. Get what you want to happen on page load. And when you got that happening it will be trivial to hook it to ScrollTrigger. I'm no flip expert, but I don't think it magically changes all elements. Flip always needs 3 steps. Get the state, change the state, animate the state. I only ever used it to tween one element and I think that is also how it works. If you need more elements to change you need to create a Flip state for each element. Below a fork of your pen where I crate a flip state for '.hero_bg-white' which changes shape via a class and then add a random other tween to the timeline to rotate it. I've enabled GSDevTools to it will be easier to debug the animation. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PogqoGa?editors=0010

Hi @destroksie welcome to the forum! You'll want to use the https://gsap.com/docs/v3/Plugins/SplitText/ plugin for that. Last week a forum user asked a similar question on the forum, maybe you can use this as your starting point. Hope it helps and happy tweening!

Yeah, here's an example that animates the scaleX, scaleY, and opacity: https://codepen.io/GreenSock/pen/rNbaXMG?editors=1010 I hope that helps.

Hi, Yeah you should definitely use another scrolltrigger instance in order to pin another section. Happy Tweening!

Hi, I just checked both yours and Mitchel's demos and can't replicate the issue you're referring to. Unfortunately I we can't see a minimal demo that clearly illustrates the problem there is not much we can do. If is not happening in codepen that means that something else in your setup is causing this, so you should check other parts of your project and see if removing them makes a difference. Happy Tweening!

Sure here are a couple of demos: https://codepen.io/GreenSock/pen/rNJQPXz https://codepen.io/GreenSock/pen/BarmbXq Happy Tweening!

Hi @alx23 and welcome to the GSAP Forums! As far as I can tell, no is not possible. The browser will simply take you to to the scroll position where that word/text is but it won't move the content horizontally to get there. This is neither a shortcoming of GSAP nor the browser, keep in mind that with GSAP we're creating horizontal movement through vertical scroll or other events so is not the native way browsers work so the native find/search will not account for that. Maybe this could be done but it would require a bit of custom logic and I'm not 100% sure that it can be done. Finally thanks for the kind words 💚 Happy Tweening!

Hi, Nope, that's done with GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() You can create your GSAP and ScrollTrigger instances inside a GSAP Context instance and then you can revert it, that will revert all the instances inside it which should help in this case. const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { ... }, }); }); // Later in your code when you change routes ctx.revert(); // <- Cleanup! every GSAP instance is removed I'm not familiar at all with SWUP but it seems that is a library for page transitions like Barba. That should have some specific hooks in it's API like when the previous page animation is completed, that would be the moment to revert the GSAP Context Instance. I'm not 100% sure of what you mean with this, can you be more specific about what should happen and what is actually happening right now? Happy Tweening!

I would strongly encourage the use of markers: true, this way you can see what ScrollTrigger is doing and thus see if that is inline with your assumptions. Having end: "bottom center" on small screens will probably mean that the ScrollTrigger is already at the end when it has not even started, so nothing will happen of at least your animation will jump to the end. Also you're media queries overlap, max with 320px is inside 1920px, usually you do something like this, where when one media query ends the other takes over. mm.add("(min-width: 800px)", () => { // desktop setup code here... }); mm.add("(max-width: 799px)", () => { // mobile setup code here... }); // or write it all the way out "(min-width: 371px) and (max-width: 1920px)" Keep in mind that ScrollTrigger.matchMedia() has ben depricated (https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()), it is now build in to GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYeWzxW?editors=0010

For those looking for the solution. This will fix your issue, but looks like it won't be necessary in this scenario once Jack's beta code becomes part of the main build (correct me if I am wrong @GreenSock. ScrollTrigger.config({ ignoreMobileResize: true });

In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. For example, trying to animate from this: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); to this: clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%) wasn't working, but when I changed the zero values to percentages, it worked perfectly. // From clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) // To clip-path: polygon(-100% 0%, -100% 0%, -100% 100%, -100% 100%)