All Activity

You have a typo in your script tag. It's src and you have scr in your tag: <!-- Wrong --> <script scr=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> <!-- Right --> <script src=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> Hopefully this helps. Happy Tweening!

There are a few helper functions that can save you from figuring out the math/logic: To find the scroll position of a particular element: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/ To find the scroll position of a particular animation: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition If you want to scroll to the start of the 2nd animation, for example, you could do this: https://codepen.io/GreenSock/pen/vYMqVVL?editors=1010 function getScrollPosition(animation, progress) { let p = gsap.utils.clamp(0, 1, progress || 0), nested = !animation.scrollTrigger, st = nested ? animation.parent.scrollTrigger : animation.scrollTrigger, containerAnimation = st.vars.containerAnimation, range = st.end - st.start, position = st.start + range * p; if (containerAnimation) { st = containerAnimation.scrollTrigger; return (st.start + (st.end - st.start) * (position / containerAnimation.duration())); } else if (nested) { let start = st.start + (animation.startTime() / animation.parent.duration()) * range, end = st.start + ((animation.startTime() + animation.duration()) / animation.parent.duration()) * range; return start + (end - start) * p; } return position; }

Hey, is great to hear that you were able to solve this. Honestly I never used Vitest before, the few times I worked with Jest and before that with Mocha and Chai. Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity 💚 Happy Tweening!

Hi, Great to hear that you were able to find a solution and I hope that you get good news from the agency Thanks for sharing your solution 💚 Happy Tweening!

Thank you @Rodrigo I have been able to solve the issue, but your explanation nudged me in the right direction on solving the issue. Since I had to wait for GSAP instance to complete running. I was able to solve this by putting the test assertion in a waitFor function. So by doing this await waitFor(() => { const element = screen.getByText("String") expect(element).toHaveAttribute("aria-current", "page") }) All test passed

Hi, The ideal way would be to register the plugins is to do it in the outmost layout file, as shown in this demo: https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Flayout.tsx Is worth mentioning though that there is absolutely no issue if a plugin is registered more than once, so you won't run into any issues if you do that. Hopefully this helps. Happy Tweening!

Omg, that was exactly what I wanted! Thank you!

That's because you're using xPercent which is based on the width of each element. For example, xPercent: 100 would be a different number of pixels for an element that's 200px wide vs. one that's 500px wide. I think you meant to do something more like this, right?: https://codepen.io/GreenSock/pen/abxgjrp?editors=0010 It just involved using pixels instead of percentages.

Hi, thanks for the reply! From what I understood, the animation makes it go all the way to the end of the element, right? What I'm trying to do is a horizontal scroll of the divs marked as sections and the problem I'm facing (I think I forgot a line in the demo above) is that when I have different values for the sections, for example, the middle section (the purple one) is larger than the others, there's a white space between the purple section and the blue section. Could you tell me what's causing this bug?

Hi @claraapta welcome to the forum! As with anything in GSAP everything starts with an animation, so if the animation is not working it will never work on scroll. For now I've disabled ScrollTrigger in your demo, but be sure to enable it again when you think everything is correct. In the demo below we just get the total width of all the sections add together and use that as your x value. Bonus point for using a function based value https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values so that it gets recalculated on resize. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQLBzJ?editors=0010

Hi! I was using the Horizontal Scroll that was working perfectly, but then the child divs (sections) have different sizes and the Scroll started to break. How do I adapt my code for this?

Hello, This question builds off of a previous question about multiple scrollTriggers, with some added elements concerning page refresh and triggering the scrollTrigger from the reverse direction. Outline: Page has a small header logo, that only appears when the user begins to scroll. Page has a large logo that appears on page load, that disappears when the user begins to scroll. Problem: The scrollTriggers work well on first load, but when the page is refreshed the #headerlogo appears immediately regardless of the scrolled position. Toggle action to play in reverse when scrolling back to top not working for me currently. Aim: Both logos should not be visible at the same time. #headerlogo fades in when scrolling past scroll trigger at top of viewport. #largelogo fades out when scrolling past scroll trigger at top of viewport. Animations play in reverse when returning to top of viewport. This site has the exact behaviour I am trying to achieve: https://www.magdabutrym.com/de-en Here is my current progress in this Stackblitz demo: Stackblitz link Many thanks for reading!

Thank you for what you say @mvaneijgen ! This gives me the idea of creating my animations first on codepen so that I can share them later 💪

Hi Rodrigo, Thank you for your reply; that was very useful for me to realise those selectors of course had no elements to refer to in the DOM. It seems that Radix's forceMount prop would force the modal portal to be present in the DOM on mount, and then it would be a matter of animating the visibility of the modal. I will test whether this works well for a modal (I would need to manage pointer events so that with visibility hidden the portal is not blocking other interactions). If all works well I will post the results here for others who might be interested in the future.

That is extremely helpful, thank you so much for both examples and the link to the docs!

You are god! Works super good without ease 💪 From your phone too, you're magic! Thanks!

Hey Sam, I'm on my phone now so no chance at looking at the site. On a quick glance at the snippet you posted, I see that in your horizontal tween you're using the default easing function which is power1.out, that will make the motion start fast and end slow. When mimicking horizontal scroll always use ease none (see the ease visualizer on our learning center). Give that a try and let us know how it goes Happy Tweening!

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug. I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working! Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation!

Hi @simran_evoco welcome to the forum! I've just written a post how you can do this using the ScrollTo Plugin, check it out. Hope it helps and happy tweening!

I see a lot of people hung up on creating buttons to scroll to a particular point on a page while using ScrollTrigger. Of course GSAP has you covered with this! See the ScrollTo plugin! But as with everything in GSAP it starts with an animation. First of please read my post about creating a stacking card effect, it will be used for the bases of this post So as usual everything in GSAP starts with an animation, so you first have to have an animation before you start doing anything on scroll, first focus on creating the animation you want to happen and when that is done we can worry about enhancing it with some scrolling https://codepen.io/mvaneijgen/pen/WNWqEYx If you’re happy with the animation you can add some ScrollTrigger logic to see how your animation works on scroll. https://codepen.io/mvaneijgen/pen/OJGevrB?editors=0010 Ok, now for the reason you’re here. How can we have a button that scrolls to a certain position on the page? That is where the ScrollTo plugin comes in, if you check the docs (https://gsap.com/docs/v3/Plugins/ScrollToPlugin/), the most simple setup is to just animate to a pixel value, let’s see how that works! The below example scrolls to 1000px, simple enough but I hope it illustrates what it is doing under the hood, because scrolling to a specific section will be nothing more than getting the pixel value you want to scroll to and using this as the value in the scrollTo: property! https://codepen.io/mvaneijgen/pen/JjVQOyK But now we want to scroll to the third card in the animation, how can we do this? We know the total scroll distance of the ScrollTrigger because we define that in the start and end properties, right now the ScrollTrigger starts on the top of the browser and has a distance of 4 times the current window height (end: `${window.innerHeight * 4} top`) and we have in total 4 animations! This means each slide animates over the hight of the window, so what do you think will happen if we animate to the current window hight times 2? Well let's see! https://codepen.io/mvaneijgen/pen/BaEgwoz It animates to the third slide! As you can see I’ve wrapped the code in an arrow function, this indicates to GSAP that we want to recalculate this value if ScrollTrigger.refresh() is triggered, which happens on a page resize, because when the page resized probably the height of the browser changes, so we need to get new values. If you do not use a function based value you indicate to GSAP that it should not recalculate it’s values and can use its cached values. If you want to read more please check out the docs https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values Great we’re done! lets add some more content to the page and everything will be working just fine! But wait!? Why does it now only scroll to the second slide? Before it was scrolling to the third slide. Well all ScrollTrigger is doing is animating to a specific pixel value and because we’ve add another section before it, the scroll distance will be different. What you can do in this case is add the ScrollTrigger start value to the calculations, so instead of just animating to twice the window height, we animate to tl.scrollTrigger.start + window.innerHeight * 2, just try it your self and you’ll see it will always scroll to the top of the ScrollTrigger + twice the window height https://codepen.io/mvaneijgen/pen/BaEgwoz Ok, I hear you thinking, but I want to animate to each slide, and what if my scroll distance changes then I need to update my calculations every where! You are totally right! And the folks on the GSAP team has thought of everything! So what you can do is add labels to your timeline and then scroll to those labels! This can be as simple as scrolling to a specific label eg tl.scrollTrigger.labelToScroll("label3") or this can be be fancy like the example below by getting the next label in the timeline and scrolling to that, I hope you see that you can as easily scroll to the previous label. https://codepen.io/mvaneijgen/pen/gOyNeqj?editors=0010 If you don't have labels in your timeline you can also do some math to scroll to a specific point in a timeline. The progress of a timeline is always between 0 and 1, so what you can do is get the end and start values of you ScrollTrigger and then subtract and then multiply that by 0.5 to that the halfway point of the animation or any other value! Again to emphasise all ScrollTo need is a pixel value and it is up to you to get the correct value. GSAP gives you all the tools you need, but it is for you to figure out what the math is behind the logic you are looking for! Hope it helps and happy tweening!

its good my code dont work but i havent errors i wrote scr and not src.

That is called Flash Of Unstyled content eg FOUC, check out this post https://gsap.com/resources/fouc/ Best is to have GSAP fire when everything has loaded especially images, fonts ect, because if you use ScrollTrigger the hight of everything is really important. Sadly we don't have the time and resources to provide free general consulting, but your code looks fine. I would not worry about it the only thing I can see is that you use x: "120%" and especially for percent based values we have xPercent: 120, same as x: `${distance}px`, I would write it like x: () => distance, this will get distance again if ScrollTrigger.refresh() is called (which happens on page resize) read more about function based values https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values Hope it helps if you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Happy tweening!

Bubba can you show your code because i also did same but mine still not working

*%$# it, close that. Long gone are the days when people could help out without having to transfer everything to codepen 😤