PixeledCode

Oh. Sorry, I think I did a bad job on explaining. I was trying to do this https://gsap.com/community/forums/topic/37731-horizontal-scroll-on-trackpads/

oh this got closer to result. it's still triggering the function 2-3 times before `isTweening` state is changed. I cleaned it up a bit, created different handler https://codepen.io/PixeledCode/pen/JjzyjqQ?editors=0010

Yes that deltaX things is indeed weird. I only added it to showcase what issue I am facing. I only want the wheel to trigger when swiping on a trackpad from laptop

So I tried looking through docs but I couldn't find a way to detect when the wheel event ends when using Observer. Is it possible through GSAP or there needs to be a custom solution to detect when it ends? I only need the function to trigger when the scrolling ends, otherwise it will go to the end on a single wheel scroll. Thank You

Thank you for your detailed thoughts on this. Can you also recommend some more resources on 3d transformations?

Trying to create a 3d carousel thingy and this is one of the approaches which is kind of working. Except that setting rotationY is giving scroll. First it was both side scroll but setting overflow-x: clip fixes one side but drastically increases the other one. Also, the rotation is not looking natural. Bottom side of card is tilted but top is straight. Any help is appreciated

Thanks for replying. This sets in the right direction I think. I used Observer and dragEnd to remove a lot of code and rely on GSAP which was good. Although I am still not sure how to add the final touch of a carousel. I think it will need toLeft/toRight or dragStart and then checking how many pixels are moved. Ideally it should be more than 50% of the card width to trigger the move to next slide. and then there is also the snapping back to original position if drag is not eligible for move.

So I am creating a 3D carousel which goes to next slide on button click/mouse drag/arrow keys. I first tried to merge carousel libraries like splide and embla but couldnt get them to work properly. Now I have moved to custom solution which kind of works but lacks some features. https://svelte.dev/repl/e33b47c769bf49278094746a3af3c547?version=4.2.8 Is it possible to add dragging and snapping to axis using gsap? Unless user drags the slide till a certain number, it wont go to the next one and snap back to it's position, just like how normal carousel works.

Thanks for replying and sorry for not making it clear. Currently, the timeline is starting as soon as the page loads and is really glitchy on scroll for some reason. And I'll definitely look into FLIP plugin.

Hi, I am trying to achieve something like in the CodePen but on scroll. Currently I'm decreasing opacity, translating to top a bit and reducing height of parent. But Ideally, I need to remove the element so that parent can adjust height according so it's responsive. Any help is appreciated.

Thanks Cassie, that's exactly what I was looking for. I should definitely go through Carl's GSAP course again haha

Hi, I'm trying to create a scrolltrigger where I can only target the heading of before a paragraph. On each trigger, I am supposed to add class to some other element. but currently, since I am only targeting h3 tags, scrolltrigger ends just as soon as it starts, as you can see in demo. Since all the trigger belong to same id, I was hoping if there was some way to align end of each trigger just before the start of next one? Thank You

wow, so this worked! I tried searching docs for syncInterval but couldn't find anything. What exactly is it doing? Should I be using it in production? Thank You!!

yeah, it's really weird. I tried removing scrolltrigger and tried both scenarios: 1. Put the input inside a div and gave that div position: fixed. 2. Give position: fixed to input itself without any enclosing div. In both cases, input field worked on android. So I'm not sure position is messing with input anymore...

ah yes, I understand and I really appreciate what you guys are doing. And yes, if I remove the scrolltrigger from input field, I lose the pinning ability but then it works perfectly on android as well. So what I think is that there is some issue in android maybe and gsap scrolltrigger is triggering it?

Hi, I'm actually facing some issue that's only reproducible on android phones. I have tested on iPhone, iPad and desktop but there is no issue there. Problem: While using scrolltrigger pin on an input field, android devices loses the ability to keep their focus on that field. I found some related issues on Stackoverflow, here and here. I am fighting this issue for a week and after losing the battle, I need some help regarding it. Here is the codesandbox to check code and to open output on android. Any help is appreciated. Thanks!

You're right. It's working now. Thanks a lot!

Thank you for this. My problem looks similar to the post you shared. Using normal <a> instead of next/link is working fine. I'll also try with v3.6.1 and see how it goes. And yeah, sorry for slow speed. I connected it with my strapi backend which is hosted on a really slow server so it's taking time for each navigation.

Hi, sorry about that. That was production mode build I made on Codesandbox, I think they don't keep them running for long. Here's the code: https://codesandbox.io/s/mystifying-nash-pp4kd?file=/pages/_app.js

ok so this post helped. ScrollTrigger doesn't work properly on page with lazy load images - GSAP - GreenSock. I'm listening to images being loaded and then refreshing now. Fixing this I found another issue. Next.js have next/link for routing which makes routing possible without reloading. Kind of hot reloading but that also crashes gsap. You can possibly reproduce it by going to the link https://pp4kd-3001.sse.codesandbox.io and selecting first box 'Introduction', go to the bottom and selecting, 'read more'. Next page will be broken with total height similar to previous page but all of it is whitespace. Either removing scrolltrigger or removing next/link and using regular <a> tags fixes it.

Hi @Cassie thanks for replying. So I tried to setup and here is the codesandbox link: mystifying-nash-pp4kd - CodeSandbox I was testing and noticed something. The problem is not on the pages without images and so I believe that the images are being loaded late and then the ScrollTrigger is not refreshing on that change... Could this be an issue, and if yes, any idea on how to fix it? Thank You

Hi, I'm trying to implement a basic ScrollTrigger animation on Nextjs. It's basically changing sidebar background based on current position of scroll. You can check it's implementation here: Introduction - Budget Basics | Open Budgets India. Problem is initial load of page, which messes up the the start/end of scrolltrigger but resizing the browser fixes the position. I tried some solutions from this post: ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs - GSAP - GreenSock but they are not working in my case. All of the code is available here: budget-basic-next/[chapter].js at main · PixeledCode/budget-basic-next (github.com) but basically what I'm doing is useEffect(() => { gsap.registerPlugin(ScrollTrigger) setTimeout(handleSidebarAnimation, 100) return () => { ScrollTrigger.refresh() if (ScrollTrigger.getById('st-id')) { ScrollTrigger.getById('st-id').kill() } } }, []) and the function is function handleSidebarAnimation() { const articles = gsap.utils.toArray('article') articles.forEach((article) => { let sideLink = document.querySelector( `li[keyid=${article.getAttribute('id')}]` ) gsap.to(sideLink, { scrollTrigger: { markers: true, trigger: article, id: 'st-id', start: 'top 22%', end: 'bottom 18%', refreshPriority: 1, toggleActions: 'restart complete reverse reset', onEnter() { sideLink.classList.add('activeSidebar') }, onLeave() { sideLink.classList.remove('activeSidebar') }, onEnterBack() { sideLink.classList.add('activeSidebar') }, onLeaveBack() { sideLink.classList.remove('activeSidebar') }, }, }) }) } I know I'm probably doing something wrong and it's dom order which is creating issues on initial load (eg: coming from home page to the page with sidebar and animation.) but I am not able to find where. Any help is appreciated!

haha, looks like alot of people are into this thing right now. Thanks again!

Thank you for the detailed answer. I'll try all of these!

Hi, I am trying to create something like this What a Tiny Masterpiece Reveals About Power and Beauty - The New York Times (nytimes.com) I think it's possible with scrolltrigger but I am facing few issues. Scrolltrigger is not really working for me, since it's inside another div. I think I am using it wrong. Also transformOrigin works after scaling and animation does not work, even though it's applied in css. Any help is appreciated, Thank You