All Activity

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 😤

Not sure - but that is something you can easily test yourself. I just did, and it looks like you'll have to do some 'manual' cleanup for the ticker bit. When just adding it to the useGSAP hook, it didn't get removed automatically for me when changing routes. So you'll probably want to do something like this. const container = useRef(); function test() { if (ScrollTrigger.isScrolling()) { console.log('scrolling'); } else { console.log('not scrolling'); } } useGSAP(() => { gsap.ticker.add(test) return function() { gsap.ticker.remove(test) } }, { scope: container }); I'm no React expert though. But if the above is blatantly wrong, I'm sure someone will step in to correct me.

Thanks your pen example seems to be what I'm looking for. So in a react example, that gsap.tick bit I would just add together with the if statment into my useGSAP hook correct? I'll tinker around a bit over the next few days and come back here if I get stuck. Thanks again!

Hello Everyone! I have a bit of a generic problem/misunderstanding - basically, i have some animations in GSAP and have a couple of questions to understand it more deeply: When is the best time to load the GSAP animation (when the document is loaded or when everything is loaded (DOM, images, etc))? The first question leads to this one - if I do a hard refresh in the browser my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s but still and then animation kicks in so there is a little flash) because the js file is not probably loaded yet - how do you guys tackle this, especially vital animations like for hero section or the other places when we need everything to be loaded and animated ASAP? Please have a look at the code below all bundled by webpack: $(function () { // Hero section animation const heroBanners = document.querySelectorAll(".section__hero-banner"); heroBanners.forEach((section) => { let imgCover = section.querySelector(".img-cover"); let imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top center", }, }); // Inital state for headings imgTl.set(".hero-text__right", {x: "120%"}); imgTl.set(".hero-text__left", {x: "-120%"}); imgTl.to(imgCover, { opacity: 1, ease: "power4.inOut", duration: 0.4, }); gsap.utils.toArray(section.getElementsByClassName("hero-text")).forEach((heroText, herIdx) => { var container = section.getElementsByClassName("text-wrapper"); let textTl = gsap.timeline({ scrollTrigger: { trigger: section, scrub: 1, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top top-=50px", end: "bottom center", // toggleActions: "restart none none reset" }, }); if (herIdx % 2 == 0) { let distance = $(container).width() - $(heroText).width(); //left imgTl.to(heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", }); textTl.to(heroText, { x: `${distance}px`, }); } else { let distance = $(container).width() - $(heroText).width(); //right imgTl.to( heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", delay: -0.85, } ); textTl.to(heroText, { x: `-${distance}px`, }); } }); }); }); The animation is: hero image fade in then slide two lines of text from left and right. Would be amazing he somebody could point out some bad practises or mistakes or if this could be done in better way. thanks you so much guyz!

Thank you @akapowl, that indeed fixed it! I can't believe it was something so small!

Works fine for me - looks like you just made one of the most common ScrollTrigger mistakes here. You'll need to feed your function to get the value for the x translation as a function-based value, so ScrollTrigger can get it from scratch when invalidating on refresh. gsap.to( '.slides-row', { x: scroll(), // change this... ease: 'none', // ... gsap.to( '.slides-row', { x: () => scroll(), // ... to this ease: 'none', // ... https://gsap.com/resources/st-mistakes/#forgetting-to-use-function-based-startend-values-for-things-that-are-dependent-on-viewport-sizing https://codepen.io/akapowl/pen/YzMoYLd

Hey there. I'd say typically you would want to call it in any type of event when you'd need to know whether or not something is scrolling at the time that event gets dispatched - like a 'click' event or anything else imaginable. If you'd want to know whether or not something is scrolling at any given point in time, you'd of course need something that gets dispatched/called at any given time. You coulnd't for example call the method in a 'scroll' event listener, because then of course nothing would get called if you don't scroll at all. What does run all the time in the background with GSAP is the ticker - it's sort of GSAP's heartbeat/pulse. So adding a function with your logic to the ticker would allow you to get that 'not scrolling' information at any given time. https://gsap.com/docs/v3/GSAP/gsap.ticker()/ https://codepen.io/akapowl/pen/qBwzpBP Depending on what exactly you're up to with this, you might want to also consider having a look at ScrollTrigger's 'scrollStart' and 'scrollEnd' events, that may or may not be suited better for your usecase with regard to performance, as you won't be calling something on every tick, but only at specific events. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()/ Here's a rather minimal example for those from an older thread. I hope that will help. Cheers.

Hello, i have my scripts in the end of my html <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script scr=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> et in file js i write in my first line gsap.registerPlugin(TextPlugin,ScrollTrigger,ScrollToPlugin) all my code works without scrolltoplugin and when i add this in my registerPlugin my website dont work.My second question if this code seems be to good to scroll in section of my horizontal scroll const lis=document.querySelectorAll("li") console.log(lis) lis.forEach((li, index) => { console.log("foreach") li.addEventListener("click", () => { console.log("clicked") gsap.to(window, {duration: 1, scrollTo:{x:".races div:nth-child(" + (index + 1) + ")", offsetX:70}}); }); }); thank you and good day

Hello, Can someone help me create the following figure? Thanks

Hi GSAP community, Can anyone help me with the following issue? I'm using ScrollTrigger to horizontally scroll/pin a few slides. The number of pixels to scroll (x) is a dynamic value: the overflow of the row with slides compared to it's parent. This works perfectly on the initial load of the page. But if you resize the viewport to a point where the parent narrows the pin end point gets off. I made a minimal demo to reproduce the issue. Resize the window to a point where the parent/container (blue border) narrows. You'll see that the last slide (the end of the scrub) won't line up with the parent container (blue border) anymore. I assume my function to calculate the overflow is wrong. Any help is greatly appreciated!

Sup people of GSAP 🖖 First of all, sorry for my bad english hehe.. I'll try my best, but it's sure I'll make some mistakes. I'm starting a website with a horizontal section that you can see here. (For now, it's done only for a screen width 1920px so please, visit the site with this viewport dimension.) If you are ok with that, I'll not props my codes on a codepen because I think you need the entire website. In other hand, because I think the codepen box is too small right now for my non-responsive website. Looking at the site, we can see that the elements in the horizontal section always appear later and later as we scroll down. On the other hand, the section ends at the right moment, with all the elements placed correctly. Could you please help me to understand that? I have see multiples discussions on this forum and stackoverflow, but I can't catch. For help you to understand my result, here is my codes: HTML/PHP <div class="list"> <div class="track"> <?php foreach(scg::field('content_about_list') as $item){ ?> <div class="item"> <div class="int"> <div class="top"> <div class="contents"> <span><?= $item['title']; ?></span> <div class="text"> <?= $item['text']; ?> </div> </div> </div> <div class="bottom"> <?= scg::button( $item['button']['text'], [ 'href' => $item['button']['page'], 'class' => 'reverse circle', 'after' => '<div class="pin"></div>' ] ); ?> </div> </div> </div> <?php } ?> </div> </div> SCSS .list{ opacity: 0; margin: 180px 0 0; padding: 0 0 160px; will-change: transform, opacity; .track{ display: inline-flex; white-space: nowrap; column-gap: 30px; will-change: transform; .item{ background: var(--orange-n1-color); display: inline-block; width: 1035px; height: svh(820px); flex: 0 0 1035px; padding: 0 50px 44px; border-radius: 60px; white-space: initial; will-change: transform; transform: translate(0, 160px); .int{ display: flex; flex-wrap: wrap; width: 100%; height: 100%; align-content: space-between; .top{ width: 100%; max-width: 822px; margin: 125px 0 0 50px; .contents{ & > span{ display: table; font-size: 60px; line-height: 80px; color: var(--blue-n2-color); } .text{ margin: 20px 0 0; p{ font-size: 24px; line-height: 140%; color: var(--blue-n2-color); } } } } .bottom{ width: 100%; .btn{ margin: 0 0 0 auto; } } } &:nth-last-child(1){ background: var(--white-color); } &:nth-last-child(2){ background: var(--orange-n3-color); } &:nth-last-child(3){ background: var(--orange-n2-color); } } } } JavaScript class Front{ about(){ const section = document.querySelector('main:last-child #h__about'); if(!section) return; const list = section.querySelector('.corps .list'); const track = list.querySelector('.track'); const items = track.querySelectorAll('.item'); const toMove = track.getBoundingClientRect().right - list.getBoundingClientRect().right; gsap.set(section, { height: '+=' + toMove }); ScrollTrigger.refresh(); const horizonTween = gsap.to(track, 1, { x: -toMove, scrollTrigger: { trigger: track, endTrigger: section, start: 'center center', end: 'bottom bottom', scrub: true, pin: list, pinSpacing: false } }); gsap.to(list, 1, { opacity: 1, scrollTrigger: { trigger: track, start: 'top bottom', end: 'center center', scrub: true } }); items.forEach(item => { gsap.to(item, 1, { y: 0, scrollTrigger: { trigger: item, start: 'left ' + list.getBoundingClientRect().right, end: 'right ' + list.getBoundingClientRect().right, containerAnimation: horizonTween, scrub: true, markers: true } }); }); } } export default Front; A really big thank you in advance 🙏

Hi everyone ! I'm new to GSAP and I'm currently working on an animation for my website. I have a website with multiple section but in one of them I want to pin the scroll to the section and make images falling from the top and unpin until all images has been displayed. Here is a little schema to understand the idea, I tried a lot of things using ScrollTrigger but even using the pin parameter I can't get this type of effect.

Hi Guys In the docs for Scrolltrigger here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ ...there is mention of this Method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isScrolling() if (ScrollTrigger.isScrolling()) { // do something if scrolling } Would I stick that if statement inside the Scrolltrigger code, or it would be outside of it? Also I want the opposite, I want to do somewthing when its NOT scrolling or between scrolls when the scrolling has stopped when the user is not swiping or scrubbing the scrollwheel, so would that simply be: if (!ScrollTrigger.isScrolling()) { // do something if NOT scrolling } ? It would be great if somebody can show me a very simple example example of any scrolltrigger, with console log "not scrolling" between scrolls so I can understand how to use it please.

Hi, is there any chance you can help me with this issue? https://stackblitz.com/edit/nuxt-starter-xamezl?file=components%2FMenuAdventure.vue can't get it working. Really stressing out, tried multiple things.