All Activity

The main issue is here: onDrag: function (ptrEvent: PointerEvent) { console.log(ptrEvent); timeLineAnimation.progress(wrapProgress(ptrEvent.x / wrapWidth)); }, You're getting the pointer event's X value which will always start at zero, what you need to do is get the Draggable instance X value. Draggable will keep track of the current X value as it changes on every Drag/Throw, so it'll update the progress of the timeline as expected. In a normal function expression you can access the Draggable instance using the thiskeyword: onDrag: function () { timeLineAnimation.progress(wrapProgress(this.x / wrapWidth)); }, Here is a fork of your demo: https://stackblitz.com/edit/stackblitz-starters-zhaewk?file=src%2Fmain.ts Hopefully this clear things up. Happy Tweening!

Good morning Rodrigo, thank you for the advice, they have definitely been very useful to me, with the demo you attached I consider that it is not the result I want to obtain, what I am looking for is that the children of the sections have an entrance and exit animation with the scroll, that the sections can have a scroll snap effect and also that you can navigate between sections with tabs or dots. However, I found a way where the tabs work perfectly, and it is also not blocked with sections at the top and bottom, the only thing is: 1. I can't find a way for the sections to have a scroll snap 2. When I scroll down the children of the sections do not have an entry animation I attach a demonstration, always grateful for the help provided https://codepen.io/Front-end-Dev-the-looper/pen/yLWPEoK?editors=0110

I've been exploring a solution to keep ScrollTriggers working smoothly. In my case there are several timelines, ScrollTriggers, and svelte components that are modifying the DOM at different places on a long page. To help with this I created a function that calls ScrollTrigger.refresh()every couple of seconds, and it does not refresh if the user is scrolling. So far it's been working pretty well, but I wanted to post the solution here to get input on pros and cons. The JS looks like this, where the imported refreshScrollTriggers function is a debounced call to ScrollTrigger.refresh(): import { refreshScrollTriggers } from './events' /** * Refreshes GSAP scroll triggers at a specified interval, when the user is not scrolling. * * @return {void} */ export default () => { const interval = 2400 const waitAfterScroll = 400 let isScrolling = false let timer = null const handleScroll = () => { isScrolling = true requestAnimationFrame(() => { clearTimeout(timer) timer = setTimeout(() => { isScrolling = false }, waitAfterScroll) }) } window.addEventListener('scroll', handleScroll) setInterval(() => { if (!isScrolling) { refreshScrollTriggers() } }, interval) } Feedback welcome.

Hey, this sounds like an annoying one. My gut feeling would be to set the height of the images in CSS, then there isn't a layout shift when they load in? I assume this is triggering a refresh and janking the scroll briefly. It would be interesting to see how you're lazy loading too though? It's possible it's a JS bottleneck from the image loading rather than ScrollTrigger doing a refresh? If you can pop together a simple demo that would be great, the I can take a proper look

If you can explain a little more clearly what you want to do maybe I can help? Here are some starting points for now? How to make a minimal demo - Working with Pixi and GSAP using the Pixi plugin https://gsap.com/docs/v3/Plugins/PixiPlugin/ Some Pixi demos https://pixijs.io/examples-v7/#/gsap3-interaction/gsap3-basic Page transitions are quite complicated in themselves though, I'm a little confused about what you mean by "home screen" and "game scene" and why you want to use Pixi. More info would really help us help you, your question is just a little too broad/vague currently.

Hello @Rodrigo Thank you so much, I couldn't see my incorrect writing in the code. There is the code fully written in angular for people who will need: Sample code My last question, I hope, is when you grab the picture and grab another there is a "back effect", I don't know how to explain it and what it is. Thanks again for your help

https://github.com/pnpm/pnpm/issues/4724#issuecomment-2174349045 If you have a project with such issue, then just create .npmrc in the root of the project with: strict-store-pkg-content-check=false

Thanks Rodrigo, I did try with disabling scroll using the overflow property initially, which wasn't working, maybe because I'm using lenis, and then using Lenis' stop/start functions, which worked wonderfully when navigating from another page, but after a refresh it wouldn't do the re-enabling part, so that users would be stuck at the hero section. Seemed like such a trivial task, so I got frustrated! I'll come back to it. Thanks for your feedback

Hi @Rodrigo, thanks for your help. I have tried to put my json file locally in the above stackbiz but it is showing error like this. and while I used this method in my site the animation starts while it reaches at middle of the screen horizontally so I tried to change the start point of animation in scrollTrigger but then the character jumps down like a jerk happens.

Hello. I'm completely new to gsap and now struggling with some issues. I have written the code below in React/Next js & tailwind, I don't set the p-s-content to overflow hidden because I need to track the scrollbar, when the user gets to the .p-s-content just begin the horizontal scrolling with .parent-section pinned. <section className={`${className} parent-section w-full h-fit flex flex-col justify-between items-center gap-8 mt-[120px] mb-16`} > <h2 className="w-full h-fit text-left text-section text-[40px] font-bold"> {title ?? "Title"} </h2> <div className="p-s-content relative w-full h-full flex justify-between items-start gap-11"> {contents?.map((item: IContent, key: number) => { return ( <div ref={sliderRef} className="w-fit flex flex-row justify-between items-center gap-8 flex-nowrap" > <div key={key} className="w-max h-full flex flex-col justify-between items-start gap-12" > <h3 className="text-[200px] text-left pl-[10px] font-bold text-blue-1"> {item?.title} </h3> <div className="w-full max-w-[546px] h-full flex flex-col justify-between items-center gap-8"> <p className="text-paragraph text-paragraph-size font-normal leading-10 tracking-[0.8px] pl-[10px]"> {item?.abstract} </p> </div> </div> <Image key={key} className="p-s-img aspect-square max-w-[515px] max-h-[515px] object-cover" src={item?.image} alt={item?.title} /> </div> ); })} </div> </section> I tried some demos of the forum but it just didn't suit my case but got me to the code below . (Calculations just made me more and more confused) the pinned element, when I reach the "start" of it , it just get to the bottom of the page and wouldn't stick in it's initial location, so the scrolling, consume I have five items, just went to the middle of the second one and stops. imageSliderRef && gsap.to(".p-s-content", { ease: "none", x: () => +(imageSliderRef.scrollWidth - window.innerWidth), scrollTrigger: { trigger: ".p-s-content", pin: ".parent-section", start: "top", end: () => `-=${imageSliderRef.scrollWidth - window.innerWidth}`, scrub: 1, invalidateOnRefresh: true, markers: true, }, }); Actually I want the .parent-section stuck to it's position and the scrolling reach the end of the width of the .p-s-content. I Couldn't provide any Codepen example but I just made sure I've explained clearly. Thank you.

Hey everyone, I'm trying to make a horizontal scroll, and it is working fine as I want. However, at the last part, I'm not able to reveal the hidden div as shown in the video. What I want is that after the horizontal scroll is completed, the horizontal card should start moving up so that I can see my hidden div. When I can see my complete hidden element, I want it to get pinned at the top so that I can animate the elements of that hidden element, just as shown in the video. it is quite hard for me and im stuck. you can see in this youtube video, its only 20sec long : https://youtu.be/cUU-9TOSqac

Hello GSAP community, I'm currently using GSAP's SmoothScroller in my project, and I've encountered an issue where the scrolling becomes jittery and experiences small bumps whenever an image is loaded via vanilla lazy loading. Here's a bit more detail about my setup: I’m using GSAP SmoothScroller to achieve smooth scrolling effects. Images on my page are being lazy-loaded using vanilla JavaScript. The problem arises when I scroll through the page, and as the images load, the SmoothScroller seems to refresh, causing a noticeable interruption in the smooth scrolling experience. My Question: Is there a way to prevent SmoothScroller from refreshing or recalculating when images are lazy-loaded? I'm looking for a solution that allows for a seamless smooth scrolling experience without these interruptions.

Hi, I'm looking for a freelancer to help with a quick GSAP animation using ScrollTrigger + MorphSVG. The animation and base code are already done, just need quick help with some tweaking to make it work on Safari (the clip-path is a video) and resize responsively with the viewport.

Hi Mitchel! if possible can you please guide how to add class or highlight active blade in below tutorial. https://codepen.io/mvaneijgen/pen/gOJmVzG thank you for your help so far.

I'm sorry but currently, i have no idea about doing that. I just need a direction 😢

Hi @DeveloperMan and welcome to the GSAP Forums! That is mostly a one-off horizontal animation (Timeline) with a couple of elements being controlled by a container animation, the flair (asterisk) below the text and the easing curve above the text. I would recommend you to get the horizontal animation working as you expect first and then add ScrollTrigger to the mix. Keep in mind that ScrollTrigger just controls the progress of an animation based on the start and end points you pass in the config object, nothing more, so it's always a great idea to have a working animation first (especially a more complex one) before adding ScrollTrigger to the mix. If you keep having issues, please include a minimal demo using this starter codepen we have that loads all the GSAP Plugins: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi, This is a simple horizontal section using ScrollTrigger in React (is a Next app, but the approach is basically the same): https://stackblitz.com/edit/stackblitz-starters-zsu4zc?file=app%2Fpage.tsx Hopefully this helps. Happy Tweening!

Yeah, one of the SrollTrigger instances that is calling the gotoSection method is clearly interfering with this, as well as this logic in the gotoSection: scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut" }, Basically for the first instance that tells the ScrollTo Plugin to go to y: 0, so that's the top of the page. Right now I don't have time to review all the logic and come up with a solution for this particular scenario. I'll see if I can make some time in the coming days to solve this, but I want to manage expectations regarding timing. Finally I would strongly recommend you to extend from this demo which is simpler and less convoluted than yours and should give you an easier way to solve this (this is the one I'll be tweaking actually): https://codepen.io/GreenSock/pen/YzQOxxO Happy Tweening!

Hi, I have zero experience with R3F so I can't really tell you much about it. Maybe this thread can provide some help: Hopefully this helps. Happy Tweening!

Hi, As mentioned before without a minimal demo there is not a lot we can do, a live production site it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. The only advice I can offer you is to try ScrollTrigger's clearScrollMemory method and see if that helps: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() Sorry I can't be of more assistance, but basically I'm troubleshooting blind here 🤷‍♂️ Happy Tweening!

Hi, Unfortunately I don't use instagram so I can't really tell you, but maybe you could try combining ScrollTrigger's isTouch property with normalizeScroll(): https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Something like this: if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } That would use normalizeScroll only in touch devices. Maybe you could add a URL check and see if there is some instagram referral or add a query to the instagram URL in order to know that the user is coming from instagram and take the corrective measures soto speak. Have you tried this without any GSAP animations in it? Just the Instagram browser, in order to see how the layout and styles work? As far as I can tell this seems more related to a browser specific issue rather than a GSAP one, since we've had no reports, until now regarding something like this. Hopefully this helps. Happy Tweening!

Hi, Just if you are curious we have this demo of two Draggable instances that control each other! 🤯 https://codepen.io/GreenSock/pen/BaEMOrd Happy Tweening!

Perfect! These were the answers I was looking for. Thanks @GreenSock

Hi, Indeed there is nothing we can do with a video recording, even less a recording of a figma design/concept. But base on that I can tell you 100% that this can be achieved with ScrollTrigger with pinning and scrubbing and, any Tween/Timeline controlled by a scrubbed ScrollTrigger instance can be made longer with more pixels between the start and end points in the config object: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end Take a peek at our ScrollTrigger codepen collection: ScrollTrigger how to collection https://codepen.io/collection/AEbkkJ ScrollTrigger showcase collection https://codepen.io/collection/DkvGzg Happy Tweening!