All Activity

Thank you so much for the quick feedback, you're a top team. This complicates things quite a bit, my sections in the real case have different sizes, and I don't know how to adapt the draggable that I had in place on the Horizontal scroll. I think I'll abandon this structure for something simpler 😪 The goal was to create the same effect as the 4th part of this fantastic website by Aristide Benoist. https://canals-amsterdam.com/

The key to creating a smooth infinite scroll is to duplicate some of the list items and place them at the beginning and end of your list. This creates the illusion of an endless scroll. house of hazards

Thanks for sharing, is there any YouTube link where I can watch video on this?

Recent update to that github thread: https://github.com/pnpm/pnpm/pull/8201 TLDR: Might get turned from an error into a warning.

Unfortunately, we just don’t have the resources to build custom demos for people. I would suggest that you give it a try and then if you get stuck, post your demo here and we will do our best to help. we really tried to keep the questions in these forms GSAP-specific. Maybe somebody else has a demo or is willing to build one for you. I just don’t have time at the moment.

I have a one more demo for you but it's to confusing code and to hard to understand for me🙂. And also this is not work properly in responsive part https://codepen.io/alig01/pen/eYQVaQL

Can you give a demo? coz I have less knowledge about clip-path stuff🙃

Hi, I've been fiddling with the live page for a while and can't seem to replicate the issue. Are there any specific steps to reproduce the problem? Maybe I'm missing something obvious here 🤷‍♂️ I tested in the latest Chrome and Firefox on Ubuntu 22 & 20 without any luck. Sorry I can't be of more assistance 🙏 Happy Tweening!

From a quick glance, it looks like that site just uses two identical copies of the text lines on top of each other, and animates the clip-path of each one with an inset() and a CSS "--size" variable (in percent).

@GreenSock I want this text animation to have a COLOR FILL, filling the characters the same way. However, I don't want it to go from the first line to the last line. I want the animation to work line by line. For example, in the code I gave you, there are 5 lines in the paragraph, meaning the text is written in 5 lines. I want the COLOR FILL to happen in a staggered way across these 5 lines separately...And I did some research recently and I found a website with a 'WHAT I DO' section, which has this kind of line-by-line animation. Check it out; it might help you understand better https://minhpham.design/,

Hi @janivibe. I read your question several times and I still don't quite understand what you're asking. Can you please be more clear? That CodePen appears to be working correctly, right? What exactly is the issue?

Hi Rodrigo, Thanks for this video. yes it works, but the problem is I have to make the section height 4000px. where my actual content height is 1920px. Also, I set the pin true

Yes. thank you!!!

Hi there, Recently i'm using this text plugin called split text by gsap, and i'm facing one issue while making a text animation, i want this scroll text color fill animation in "stagger way". i don't know how can i explain this but try to understand what i mean, i want this color fill in .chars but i want lines like stagger way

Hi, I think you are overcomplicating this a bit. I don't have time to go through all the logic in your demo and adapt the original ones from our collection so I came up with this: https://codepen.io/GreenSock/pen/ZENaWVw Is mostly about the logic of the next transition, if it's vertical or horizontal and apply that in a couple of conditional operators. Of course you can create a couple of variables and update them inside one if statement and apply them in order to avoid the double ternary operator, but I doubt that checking for that twice will have any impact in performance. Hopefully this helps. Happy Tweening!

Hello. I trying to add scroll smoother to wordpress site. When I have document at top and reload page than it loads with document scrolled down few humdred pixels. Any ideas? Is it becuase I append content into scroll container? https://darraghkerrigancreative.ie/gormleyconstruction/ document.addEventListener('DOMContentLoaded', () => { var outerContainer = document.createElement('div'); outerContainer.className = 'scrollon'; var outerContainerh = document.createElement('div'); outerContainerh.className = 'scrollon-h'; const container1 = document.querySelector('.l-canvas'); const container2 = document.querySelector('.l-footer'); outerContainerh.appendChild(container1); outerContainerh.appendChild(container2); outerContainer.prepend(outerContainerh); document.body.prepend(outerContainer); ScrollSmoother.create({ wrapper:'.scrollon', content:'.scrollon-h', smooth: 1, effects: true, smoothTouch: 0.1, normalizeScroll: true }); });

Hi @tohma and welcome to the GSAP Forums! Horizontal pinning is not possible in the scenario you have in place because the horizontal movement of the element is not tied to a native horizontal scroll, is just GSAP moving the container on the X axis. One way I can think of tackling this is to stop the horizontal movement of the container, to move the inner elements of that section and then finish the horizontal movement of the container. All this using a Timeline for that with the same ScrollTrigger configuration you already have in place. Something like this maybe: https://codepen.io/GreenSock/pen/KKLyzpX Hopefully this helps. Happy Tweening!

Oh my, thank you for the effort. Now I'm confident to use matchMedia in useGSAP!

Hi GSAP community, I'm trying to embed and pin a section containing long content who overflow in an horizontal scrolling. My goal is for this section to remain pined and the content inside to scroll, before the rest of the content continues to display. Despite several attempts, I am unable to obtain the desired result, which is why I am asking for your help with hope. Here is a simplified version of my code in the following codepen, hoping you can give me a solution. Thank you in advance 😀

Hm, perhaps I'm misunderstanding you or I'm not explaining things well, but here's a fork that illustrates a little better: https://codepen.io/GreenSock/pen/xxNPGMx From what I can tell, everything is working perfectly. Notice that in every case, it is indeed moving the image from top to bottom inside the container(s). I think what might be confusing you is that based on the height of the image/container/viewport, they move at different speeds, thus sometimes it's slower than the scrolling speed of the overall page, and other times it's faster, thus they APPEAR to be going in different directions but that's only because of the relative speed of the page scrolling speed. Right?

Thanks Rodrigo! I just thought there was more of an elegant way of achieving this and if there's "rules" to this sort of effect, like "when scrolling back up, at what point should the previous section trigger the background change?" For instance, when there is a lot of content in the first section, if you scroll all the way down and back up to the first section, the first section's background image doesn't fade in because it still thinks the next section index is active. I guess I can add a position check to see where the scroll position is vs the active scroll trigger. Any suggestions welcomed! Thanks.

Hi @ixdf. Thanks for being a Club GSAP member! 💚 I've never heard of anything that can just automatically convert a Lottie animation to GSAP. I don't really think that's feasible, partially because Lottie files contain actual artwork. Perhaps there'd be a way to parse through all the JSON data to only isolate the animation aspects and then delete all of that from the JSON and rebuild it in GSAP commands, but I'm really not sure. I'm curious what is driving your decision to try to keep Lottie artwork and move the animation part to GSAP(?)

Hi @Jerry55 and welcome to the GSAP Forums! Unfortunately there is not a lot we can do without a minimal demo, there is not a lot we can do in a live production site. What I could suggest is to use the load event in order t o create your ScrollTrigger instances there or to call ScrollTrigger.refresh(): https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Another option is to use ScrollTrigger's clearScrollMemory method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() Hopefully this helps. Happy Tweening!

Hi, Here is a simple demo that uses MatchMedia inside the useGSAP hook: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!