All Activity

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, 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.

Hi @mvaneijgen Thanks a lot for your response and suggested improvements. I really appreciate it. The codepen you improved looks really great!

@Rodrigo Sorry for the late reply! That's awesome, thanks for taking the time to make the example, it seems I was over complicating things for myself as usual 😄

I am using Next JS App router, and I am confused while registering the plugin. Is there any way where I can register all plugins at once? or any other way for this?

Yeah I dont know. Nothing on Stackblitz loads for me. No errors or anything, it just sits there with a blank screen trying to load something. This isnt GSAP specific, but the entire Stackblitz site. Its not critical as codesandbox seems to work fine.

Hi @Robin Dhama welcome to the forum! I'm not completely sure what all the code is doing in your setup. It seems fairly complicated for such a simple animation. Good to keep in mind is that all ScrollTrigger is doing is animating your animation on scroll, so I recommend first focusing on the animation at hand and only if that is correct adding ScrollTrigger. Right now I've removed some of your logica and just add one timeline with one ScrollTrigger, if I resizes this logic everything works as expected. For some reason the text in the red box has disappeared? Also a good rule of thumb is that you should never animate your trigger element, in your case you animate the element box, this then can't be the trigger element, because you are moving the box the calculation ScrollTrigger needs to do will never be correct. I’ve placed some comments in your JS to better explain things, please be sure to read through them! For instance you had a gsap tween that set the box to scale: 0.3, but you can just as easily just use a .from() tween in your timeline and then the box will scale to it's initial value eg 1. Also I recommend taking a look at the ScrollTrigger docs and just read through some of the properties and what they do. As you can see there is no delay property in ScrollTrigger and also no duration. (docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/). I find the following video really explains how to work with ScrollTrigger really well, and how durations work when working with ScrollTrigger Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLBVzb?editors=0010

Hi, thank you, indeed I continued searching for hours yesterday and found this solution using gsap: function resizeAd () { var scaleRatio = adcontainer.offsetWidth/sc.offsetWidth; gsap.set(scalableContent,{scale:scaleRatio}); } window.addEventListener("load", resizeAd); I'm not sure it's the most optimised but it seems to work, I'm waiting for a live test of the media agency. I cleaned up the code a little and maybe this will help others in the futur.

Hello GSAP Community! Thank you so much in advance for your help! I am trying to create a scaled animation on scroll. When user scroll down to section a box will appear from down to center and when it hits center of the screen then start to scale upto 1. It is working on reload window but when i resize window on this section, it suddenly beaks its scaled position. All your help is greatly appreciated!

Hi, it would be of great help if you could help the same to work with counters showing active states of slides and redirecting to the slides when clicked, Thank you!

Can anyone help with a source code where there is a vertical sliders which has clickable target pointers to the slides

Hi @Sharath Lingam - welcome to the GSAP forums! I glanced at that link you provided, and I'm not really sure what effect you thought required inertia. 🤷‍♂️ Inertia is more like for something that has a dynamic speed, often based on user interaction (like drag-flicking), helping it glide to a stop naturally. If you need help with a particular effect, feel free to create a minimal demo showing us your attempt. Please also keep in mind that Club GSAP provides the funding mechanism that makes all of what we do possible. So it feels a little odd for you to pop into our forums that we invest time in for free, asking us to burn time helping you to find a way NOT to join Club GSAP which is the very thing that pays for our time. 🫣 Hopefully you'll find that the membership fee more than pays for itself in a single project. Think about how much you bill for your time, how many hours it'd take to recreate what the bonus plugins do for you, and I bet you'd spend 10x more by trying to do it all on your own. But please don't join Club GSAP if you don't see incredible value there. 👍 Good luck with the project and research.

gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': The provided value is not of type 'ScrollToOptions'. at PropTween._setterFunc [as set] (gsap.min.js:10:43103) at PropTween._renderComplexString [as r] (gsap.min.js:10:43596) at PropTween.render [as r] (gsap.min.js:10:70502) at Tween.render (gsap.min.js:10:38427) at ma (gsap.min.js:10:1833) at _initTween (gsap.min.js:10:34477) at Ma (gsap.min.js:10:4555) at Tween.render (gsap.min.js:10:38041) at Timeline.render (gsap.min.js:10:26036) at Tween.render (gsap.min.js:10:38451) this error appears if I just reload the page when the viewport is in a certain place after that the parallax animation breaks when scrolling becomes fixed

Hi @MDesigns and welcome to the GSAP Forums! You're looking for ScrollTrigger's refresh method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Something like this: $('.post-list-footer a').click(function(e) { e.preventDefault(); $('.post').show(); $(this).hide(); // After adding the new elements refresh the ScrollTrigger instances on the page ScrollTrigger.refresh(); }); That will tell ScrollTrigger to run all the calculations again, updating the start and end points accordingly. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbEyGw Here is a demo that emulates an API callback using ScrollTrigger's batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() https://codepen.io/GreenSock/pen/YzOzjbL Hopefully this helps. Happy Tweening!

Hi, As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️ Maybe you could check GSAP MatchMedia, but I'm not sure if your question/issue is in that realm: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Sorry I can't be of more assistance, if can please be more specific about what should happen in your demo as you reduce the screen width. Hopefully this helps. Happy Tweening!