Leaderboard

Update: The job has been closed and I want to thank @Sahil for a really professional job and a quick turnaround. If you're looking to hire GSAP professional I would happily recommend Sahil. 👍😀

Hi, Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳) https://codepen.io/GreenSock/pen/VwNZaxQ Hopefully this helps. Happy Tweening!

Hi Thanks so much for this. The fixed values were exactly my issue. @mvaneijgen kindly helped me out with the second loop which was my initial problem. So many thanks to both of you for your expertise and help!

Hi, I have a Problem with my project on Vercel and GSAP Bonus Plugins. I don't know if i can paste the code in CodePen since it's Typescript and Next.js so i added some screenshots of the code. Locally everything works fine, but on Vercel i get this Building Log Errors: I have generated a PRIVJS_TOKEN and installed all Bonus Plugins via npm locally. In the console of the browser i get this errors:

Well as @mvaneijgen says: "If it works it works". If the code you have does what you need it works: "If it ain't broken, don't fix it!" 😉 If your dimensions are always the same regardless the screen size then it should work, otherwise you should tack into a window resize event and run your logic there and when you cross some value of the ratios that should change the code, kill and revert the timeline and start it again. Hopefully this helps. Happy Tweening!

Hi, If I'm following correctly what you're trying to do, this might be best suited for the Flip Plugin, specifically the fit() method: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here is a demo of a scrubbed Flip instances that is fully responsive: https://codepen.io/GreenSock/pen/JjVPyxd Here is a simpler demo that follows the same pattern though: https://codepen.io/GreenSock/pen/bGxOjeP As you can see there is no need for doing all the calculations by hand since Flip handles all that hassle for you. Hopefully this helps. Happy Tweening!

Hi @peter. welcome to the forum! I've used the smooth origin helper function and one tween on a timeline that gets its transformOrigin updated on each repeat. I'm not sure what you want to do with the rest of the animation, but this show you how you can update the origin (smooth) on each tween. You can also set an onComplete: on each subsequent tween (not on the timeline) and do the same logic. Hope it helps and happy tweening! Edit: I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/ZEZzeWj?editors=0011

Nahh honestly thank you so much you lot. I figured it out now. I modified both of your codes to accomplish my goal. Unfortunately, I don't know how to post a CodePen link on the replies, so I'll just leave the link to it here along with the code so you guys can see my solution. Once again, thank you so much! https://codepen.io/we-fw-riann/pen/gOyYawN // initial tagline animation let taglineAnimation = gsap.fromTo( ".tagline", { y: -10, opacity: 0, }, { y: 0, opacity: 1, stagger: 0.1, ease: "sine.out", paused: true, } ); gsap.utils.toArray(".tagline").forEach((span) => { // let animateThis = para.querySelector(".tagline"); let hoverAnimation = gsap.to(span as HTMLElement, { y: -10, duration: 1, paused: true, }); (span as HTMLElement).addEventListener("mouseenter", () => { hoverAnimation.timeScale(20).play(); }); (span as HTMLElement).addEventListener("mouseleave", () => { hoverAnimation.timeScale(1).reverse(); }); });

Hi, The main issue is this: let animateThis = para.querySelector(".tagline"); The querySelector method returns just the first element with that particular query it finds. You should use querySelectorAll or even better gsap.utils.toArray(): https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://gsap.com/docs/v3/GSAP/UtilityMethods/toArray() I created a simple demo that randomizes some of the span elements in your string and then animates them using stagger: https://codepen.io/GreenSock/pen/vYMBGXW Hopefully this helps. Happy Tweening!

Hi @riann welcome to the forum! I'm not completely sure what it is you want to your animation to do, but I have the feeling this is a scoping issue in Javascript. I've uncommented some of your code and just focused on the mouse enter animation. The .tagline element is used for the forEach and this is also what gets hovered and animated, so now when you hover over letters they will animate in one by one. I've set a border around the .para element, because I couldn't find it while debugging 🤣 This is probably not what you want, but it shows you if you want to hover over each element you have to create an addEventListener for each of those elements. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyYrpv?editors=0010

Hi @jernst146 welcome to the forum! You can set the transformOrigin: '90% 65%', of a tween (here I just used random values), but you can set it so it scales to a specific point you want. I have the feeling something is setting the CSS position of the text which makes it stay in place which is conflicting with pin in ScrollTrigger, but I couldn't debug your CSS/Tailwind. I've disabled one tween, because I was not sure what it was doing and change your .fromTo() tween to just .to(), no nee for them GSAP is smart and just animates from browsers defaults. I hope this shows how how you can go about these things. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-qxhv8f?file=components%2FHero.tsx

If you remove yoyo: true, change to a .to() tween and set repeatRefresh: true, it does wat you want right? https://codepen.io/mvaneijgen/pen/GRLKKRy

Yes, that's exactly correct. ✅ Good job getting it solved. 🙌

Hi, I checked your last demo and it seems to be working as expected. What exactly is the issue you're having? I forked your demo and instead of using hardcoded values for each element's offset I used the getBoundingClientRect method: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect This is a fork of your latest demo: https://codepen.io/GreenSock/pen/mdoNxoe Hopefully this helps. Happy Tweening!

Right now you only loop through the sections, but you want to change the .nav-link one by one, so you need another loop that does this but then for each .nav-link, this does mean that we're creating as many ScrollTriggers as there are sections * .nav-link items, which means there are a lot! You do have to calculate the offset of each .nav-link I now used some random fixed values which are good enough to show in the demo and explain the concept, but you probably want to get that dynamically so that it is more robust on different screen sizes. There is probably a better way of doing this. A timeline animation with a stagger what just changes each .nav-link color one by one instead of a class and than setting the ScrollTrigger to scrub: true, so that it plays the animation on scroll, but that is why Codepen is great. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. https://codepen.io/mvaneijgen/pen/poYqNPx?editors=0010 In this case if you're not going to animate things why not just set mix-blend-mode: difference; in CSS I'm not sure if there is a better blend more for the colors you use, but this gets you 90% there for free. https://codepen.io/mvaneijgen/pen/zYbyopO?editors=0100

Hi and welcome to the GreenSock forums. First of all, your portfolio looks really good, nice work!!! ?? In the codesandbox sample you forgot to add the class className="g__body-lg" to the <p> tag. It seems that the issue resides in the fact that the DOM element is not rendered when the saveStyles method runs. If you move that to the useEffect() hook it seems to work as expected. Also you already have a reference to the actual DOM node, so there is no need to pass the selector string to GSAP, you can avoid that extra processing (which is not much though): useEffect(() => { // Save Initial Styles ScrollTrigger.saveStyles(leadTxtRef.current); const tl = gsap.timeline(); ScrollTrigger.matchMedia({ "(min-width: 768px)": function () { // Kill animations return function () { tl.kill(); }; }, "(max-width: 767px)": function () {// Kill animations return function () { tl.kill(); }; } }); }, []); Give that a try and let us know if it works. Happy Tweening!!! PS: Well, what Zach said