Leaderboard

Indeed without a minimal demo seeing the code in action it is hard to help you debug. That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOdJGQq

Yeah that is an easy fix, check out the video below if you need any help

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.

Yep, same issue - you're creating things out of order, thus they refresh in the wrong order. For example, let's say elementA is 100px from the top of the screen, and there's a ScrollTrigger that triggers when that hits the top of the screen ("top top"). So normally, the start would be 100. But what if there's another ScrollTrigger that pins an element above that one for 1000px - that'd push everything down, thus that element should trigger at 1100px instead of 100px. If ScrollTrigger calculates them in the wrong order, it'd set the first one to a start of 100px (because the pinning one hasn't been factored in yet). Here's a helper function that you can call after all of your elements are in place, and it'll order things based on their proximity to the top of the viewport: function verticalSort() { let scroll = window.pageYOffset; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); } https://codepen.io/GreenSock/pen/ZEZPqyd?editors=0010 Better? Of course you could solve everything by explicitly stating the unique refreshPriority for each, but the above function seemed easier and it should work in most cases.

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.

Hi @spotipre welcome to the forum! The angled black part you can do with a clip-path animation, see simple demo below https://codepen.io/mvaneijgen/pen/MWLxyPp And the weird image effect you can probably do with something like Pixi.js. Keep in mind that this question is kinda outside of the scope of these forums, we like to focus on GSAP specific questions, so if you still need help be sure to post a minimal demo focused on an issue with one of the GSAP tools. Hope it helps and happy tweening! https://pixijs.com

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it! // From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQOGpa?editors=0010

Oh yes, that's exactly what i was looking for ... wouldn't have guessed i could morphSVG from a class name to another class name. Best library ever! (I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)

hi @alexr8 maybe these 2 demos help 1 with draggable and 1 without https://codepen.io/GreenSock/pen/BaQXjWw?editors=0010 https://codepen.io/GreenSock/pen/RwKwLWK

Your video is around 15 seconds long, so I've split it up in three sections of each 5 seconds. First of 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've enabled GSDevTools for the animation, so we can first fully focus on the animation and create what we want to happen on scroll. I've modified your HTML and CSS, I've created a .trigger element and have everything stack right on top of each other with CSS (please disable all the JS to see what it looks like) I've taken this logic from my stacking cards post I encourage you to read through it, see below Then on the timeline I've put all the tweens, frist the video tweens to 5 seconds over a duration of 5 seconds, then the video tweens to 10 seconds over a duration of 5 seconds and at the same time the first card animates in from of screen, and them the same for the next card. This is probably not fully correct, but it shows you how you can create a timeline and have things happen at the same time. I've add some ScrollTrigger code but this is commented out, but you can enable it to see what this would do on scroll, but be sure to disable it again when you want to tweak the animation. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out this awesome tutorial how to work with ScrollTrigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJOQzq?editors=1010

You where almost there! I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBwLJXX?editors=1010

Hi, I think the main issue here is the fact that you're using the same element as the scroller (the document element). ScrollTrigger allows you to define a scroller which is the element where ScrollTrigger will look for the scroll position in order to update any Tween/Timeline you pass to it. From the ScrollTrigger docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Here are a couple of demos that use a similar approach: https://codepen.io/GreenSock/pen/yLRQozy https://codepen.io/GreenSock/pen/OJBvBjB Hopefully this helps. Happy Tweening!

Although this didn't feel intuitive to me in this scenario, autoScroll did fix the issue. Thanks a lot!

Hi @Sikriti Dakua welcome to the forum! What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. Also keep in mind 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. Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

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

Thank you guys! I have a rather long page with 3-4 sections in between which are dynamic and slow. Simply using the .sort() method didn't work But using the verticalSort() helper function you suggested did the trick. I just had to include ScrollTrigger.refresh() after the sorting to make it work properly: function verticalSort() { let scroll = window.scrollY; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); ScrollTrigger.refresh(); }

Mhh... Why are you using intersection observer for something that can be done with ScrollTrigger? I think you are overcomplicating this quite a bit. If I was you I'd create an extra prop for ScrollTrigger and if that prop has a ScrollTrigger configuration, you just need to check if is not falsy, instead of using just SplitText use ScrollTrigger to handle when the animation plays, something like this: https://codepen.io/GreenSock/pen/abxMRgp I updated the demo I posted before so it uses ScrollTrigger https://stackblitz.com/edit/nuxt-starter-vzsxyp?file=app.vue The only detail is that this check is not needed with ScrollTrigger: completed && tween.progress(1); Hopefully this helps. Happy Tweening!

Yes, like @Rodrigo said, you're creating your ScrollTriggers out-of-order. You're supposed to create them in the order they would be encountered (top to bottom). You're creating the top and bottom first, then the middle, so the refreshing order goes: 1, 3, 2 instead of 1, 2, 3. For relatively simple setups, it could be adequate to just call ScrollTrigger.sort() which will order them by whatever their "start" is calculated to be. But you can explicitly control the order of things by setting a refreshPriority on each one so you have total control of the order. https://codepen.io/GreenSock/pen/PogLyGO?editors=1010 And here's a verticalSort() helper function that'll sort them by their proximity to the very top of the viewport: https://codepen.io/GreenSock/pen/ExJMdXj?editors=0010

No problemo! Also in these forums there are no stupid questions 👍 That's just the Logical AND operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND Basically it checks if timer is truthy, if it is it'll clear the timeout. By default the timer variable is undefined which will return falsy and the clearTimeout won't be executed, same with the completed boolean. I want to set the progress of the tween to 1 only if the tween has run completely. Hopefully this clear things up. Happy Tweening!

Hi @fraserYT and welcome to the GSAP Forums! You are using an extremely generic selector. I'd strongly recommend you to use a unique class in your elements even if it doesn't have any styles, just for selecting purposes. This seems to work the way you expect: <div class="header-icons"> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> </div> gsap.to(".header-icons .menu-item", { opacity: 0, y: -80, stagger: 0.1, scrollTrigger: { trigger: ".full-row", start: 0, end: 230, scrub: 0.5, markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNOVqKm Hopefully this helps. Happy Tweening!

Hi @CRE-ATE welcome to the forum! What for me works best is having the scale always between 0 and 1, where 0 is the minimum and 1 is the max it can have, setting scale beyond that will result in rendering bugs/issues. So in your case make the logo as big as you want it to be and then scale it .to() the value you want it. See demo below. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PogLKwP?editors=0010

In some cases, it's adequate to just call ScrollTrigger.sort() after all the ScrollTriggers are created which will set the refresh order according to the "start" value: https://codepen.io/GreenSock/pen/YzMgQrR?editors=1010 Is that what you're looking for?

Many Thanks, @mvaneijgen Though it is a little fast now I think I can manage to fix that myself Thank you very much for answering my doubts. Have a good day!

Unfortunately it's just not feasible to make ScrollToPlugin accommodate that automatically. There's no way it could understand which elements are affected by which ScrollTriggers. It's essential that you, as the builder of the page, provide that information. But here's a helper function you could try - it lets you create several lookups that get added together into one big lookup. Splitting them up like this allows you to segregate elements according to whether or not they're in a containerAnimation and/or pinnedContainer: function getScrollLookup(targets, {start, pinnedContainer, containerAnimation}) { targets = gsap.utils.toArray(targets); let initted, triggers = targets.map((el, i) => ScrollTrigger.create({ trigger: el, start: start || "top top", pinnedContainer: pinnedContainer, refreshPriority: -10, onRefresh(self) { if (initted && Math.abs(self.start) > 999999) { triggers[i].kill(); triggers[i] = ScrollTrigger.create({ trigger: el, start: start || "start start", pinnedContainer: pinnedContainer, refreshPriority: -10, }); } }, containerAnimation: containerAnimation })), st = containerAnimation && containerAnimation.scrollTrigger, lookups = [], lookup = target => { let t = gsap.utils.toArray(target)[0], i = targets.indexOf(t); if (i < 0) { for (i = 0; i < lookups.length; i++) { if (lookups[i].targets.indexOf(t) !== -1) { return lookups[i](t); } } return console.warn("target not found", target); } return triggers[i].vars.containerAnimation ? st.start + (triggers[i].start / containerAnimation.duration()) * (st.end - st.start) : triggers[i].start; }; lookup.targets = targets; lookup.add = (targets, config) => { lookups.push(getScrollLookup(targets, config)); return lookup; }; initted = true; return lookup; } So you'd use it like: let lookup = getScrollLookup("section.project", { containerAnimation: tween, pinnedContainer: el }); lookup.add("section.other", {}); // no containerAnimation or pinnedContainer lookup.add("section.pinned", {pinnedContainer: el}); // just a pinned container // then later... let position = lookup(".any-of-the-above-elements"); Hopefully that helps.

I use scrolltrigger and observer for an animation in my website, for mobile it created a problem of not pinning accurately so I used normalizescroll. It does work great but, when I scroll, it scrolls really fast. is there any solution for it?

Hello @Rodrigoyes I will try to do it I just have to take the time given the work I have at the moment thank you

Thanks for your detailed answer buddy. You have done a very good job so far. Carry on!

It's pretty similar in this test. https://codepen.io/GreenSock/pen/PogVJNe

Hi, Yeah this is not the easiest thing to achieve. Luckily @ceribbo was super kind to share a solution for a similar situation with the community in this thread: Hopefully it helps you and if it does, remember to thank @ceribbo for it. Happy Tweening!

Hi, Is great to hear that you were able to solve it! 🥳 The site looks amazing, really nice animations and story telling, excellent job 👏 Happy Tweening!

Yes this is what I was looking for!!! I never knew about the immediateRender: false! Just one question: you removed toggleActions, but As I scroll back it it moves in reverse, why? Thanks for solving my problem!

ah i see! i would have to create instance variables for each of the parts, and then retrieve their height values onMount. Ok i'll give that a go. Many thanks!

Hi @Sandeep Choudhary welcome to the forum! You just needed to scope the pin: ".right" element eg pin: galleryObj.querySelector(".right"), otherwise it would always gets the first .right element. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExJGMed?editors=0011

Thank you very much. This is exactly what I needed. Your help has solved my long-standing problem. Now I can achieve the effect I need. Now I just need to integrate it into the Vue framework. Thanks again. https://codepen.io/sw355498/pen/ExJGpQe

Yeah the issue could be that the fact that the boolean on your state is updated that doesn't necessarily means that the elements are rendered yet, especially when you run that ScrollTrigger.refresh() method. Any particular reason for that? I don't really see any reason for having that code in that component. Removing that single line seems to fix the issue. As far as I can tell there is no real need to have that refresh call there, since when that component is unmounted the useGSAP hook will revert everything inside of it, so there shouldn't be any reason to globally refresh ScrollTrigger, unless there are other ScrollTrigger instances in your parent component, but still if you need it you can add the revertOnUpdate option to the useGSAP hook to revert everything: useGSAP( () => { if (feedLoaded) { ScrollTrigger.refresh(); // rest of your code } }, { scope: curatorContainer, revertOnUpdate: true, dependencies: [feedLoaded], } ); Hopefully this helps. Happy Tweening!

Hi, Jack is right, the issue is that in a Nuxt app you can access the runtime context with the useNuxtApp hook, but for using something from the app's context it has to be there first. In your demo I don't see any composable neither in the composables folder or in our package.json indicating that you installed a composable that abstracts GSAP's import statement: https://nuxt.com/docs/guide/going-further/nuxt-app https://nuxt.com/docs/guide/directory-structure/composables I think Jack's final suggestion is the best, just import GSAP in the files you need it and that should work. Happy Tweening!

Hi, Sorry to hear about the issues but unfortunately if we can't see it on the demo there is not a lot we can do. That also means that there is something else in your setup that could be interfering with this. A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: Try setting will-change: transform on the CSS of your moving elements. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). Check if you have any CSS transitions to any of the elements you're animating with GSAP. Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" I hope this helps!

Hi @Renson Ralph Bitara and welcome to the GSAP Forums! There is a lot of code in your demo and we don't have the time resources to comb through all that and find what the issues could be. After a quick glance I can see some issues in your code though. What is this actually doing? What's the purpose of this? window.addEventListener( "load", function (e) { init(); setInterval(function () { ScrollTrigger.refresh(); }, 100); }, false ); A setInterval will keep executing over and over. That doesn't look right to me, to be refreshing every ScrollTrigger instance every 100 milliseconds. I don't see the use of that particular code. Then you have this: gsap.fromTo( ".services-content-heading-inner", { yPercent: 100 }, { yPercent: 0, autoAlpha: 1, duration: 2, ease: easeInOut } ); ScrollTrigger.create({ target: ".services-content-heading-inner", start: "top top", end: "bottom bottom", markers: true }); You are creating an animation, then you create a ScrollTrigger instance, but what's the objective of that ScrollTrigger? What is actually controlling? For what I can see nothing really. Finally this: ScrollTrigger.create({ start: 0, end: "max", onUpdate: updateValues }); By default this ScrollTrigger instance will work with the window element and scroll position, so that means everytime the user scrolls that function will be called. Again I don't see the use of this. If you want to know if something is in the viewport, why not create a ScrollTrigger instance for that specific element that can tell you whether or not that element is in the viewport? I think you are overcomplicating things quite a bit and you should take a few steps back and go for simpler things first and then start adding more animations and complex stuff to your app. Finally I suggest you to take a look at our getting started guide: https://gsap.com/resources/get-started and a closer look to the ScrollTrigger docs and demos in order to get a better grasp of how ScrollTrigger works: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Happy Tweening!

Happy to share my solution: https://codepen.io/ceribbo/pen/ZEZmqvL By editing the one found on this post:

Why do you have to change the token in dev mode? Surely reading it from the .env file should be adequate? Having to change this every time you want to make a commit is a massive headache. I've tried time and time again to use the gsap token from the env file and keep getting the same 'bad auth' error. I've tried setting it as a plain env variable, I've tried exporting it in the env file, I've tried prefixing it with NPM_CONFIG, nothing works. Nevermind, I didn't realise that you had to store the env variable in bash for it to be replaced in npmrc locally. Today I learned.

I complain about using pre-fab code as it's generally too much work to reverse-engineer and tweak but that's what I was doing right here. Came up with a straight CSS/jQuery solution in like 30 minutes versus the hours I was working on the previous code. Plus I can expand with GSAP if need be but works great just like this if anyone else is looking for the same thing (and can add in GSAP) *I'll add to this CodePen if I end up infusing some GSAP though to keep it relevant to the community https://codepen.io/ilrobinson/pen/ExJOvga

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.

Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!

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

@gaggo I believe this problem is caused by the pnpm not handling package name aliases properly. Unfortunately this problem is a bug in pnpm at the moment. I'll try to find a workaround, will comment here if successful.

I couldn't help myself - I imagine this may assist others looking to do something similar so I went ahead and created this solution: https://codepen.io/GreenSock/pen/zYRmbEM?editors=0010 The basic concept is to create a simple ScrollTrigger for each box and then use the "start" of each of those to calculate the 0-1-based progress value for snapping on the overall section ScrollTrigger. Does that help?

@OSUblake, thank you for your response. At the moment, I set for the trigger end '3000px', but I would like to have this value dynamical because my users will have different number of items there. So I need to calculate the height of the trigger dynamically. Hopefully I express it clearly. Would it be possible to use something like this to get the height of all images (or something else with a clear height) there and use this value as trigger end? let contents = document.querySelectorAll('.image-container') let contentHeight = gsap.getProperty(contents, "height"); Here my .js gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: ".layer-story-pinned-content", scrub: true, pin: true, start: "top 30", end: '3000px', //endTrigger: '.layer-story-pinned-content', markers: true } }); tl.from( ".layer-story-content-wrapper", { y: 20, autoAlpha: 0, stagger: 0.5 }, 0 ).to( ".layer-story-content-wrapper", { y: 0, autoAlpha: 0, stagger: 0.5 }, 0.4 ); tl.from( ".layer-story-image", { y: 0, autoAlpha: 0, stagger: 0.5 }, 0 ).to( ".layer-story-image", { y: 0, autoAlpha: 1, stagger: 0.5 }, 0.4 ); https://codepen.io/jankout/pen/ZEJOypz

Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Hope this helps.

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!