Search the Community

I have created this 3D carousel, currently it is working based on click event but I want to get this functionality based on scroll event. I set the height of the container is 100vh that's why scroll event is not calling anyone please help me with this.

Hi, I am building a slider based on this example https://codepen.io/andrei-savu/pen/BaPqzvX It works when it's alone on a page, https://yaojuilan.art/gsap While it isn't working when there is something else https://yaojuilan.art/system_of_conductors/field-walk#kinmen (the slider works sometime. it is unstable. ) I tried logging out the observer onChange, the event does trigger, but the items just would not do the horizontal transition. I am wondering if observer has some sort of limitation, or maybe observer listener is interfering with something? Sorry i did not create a codepen, because this component does works standalone. Here is the slider component export default async function Page() { const data= await getPageContent() return ( <div id='intro' className='relative h-auto w-full overflow-x-hidden'> <div className='h-[50vh] w-full'> some content </div> <Slider items={data?.carousel_img?.images} /> <div className='h-[200vh] w-full bg-red-100'> some content </div> </div> ) } export default function Slider({ items, section }) { useGSAP(() => { let loop = horizontalLoop(`.carousel-${section} li`, { repeat: -1 }) let slow = gsap.to(loop, { timeScale: 0, duration: 0.5 }) loop?.timeScale(0) Observer.create({ target: `.carousel-${section}`, type: 'pointer,touch,wheel', wheelSpeed: -1, preventDefault: true, onChange: (self) => { loop.timeScale(Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY) // whichever direction is bigger slow.invalidate().restart() // now decelerate }, }) }) return ( <div className='absolute bottom-12 w-full cursor-grab overflow-hidden'> <ul className={`carousel-${section} carousel flex flex-nowrap pl-0`}> {items?.map((item, i) => ( <li key={i}> <Image alt={'collective of images'} src={item} width={150} height={150} sizes='100vw' className='pointer-events-none touch-none select-none ' /> </li> ))} </ul> </div> ) } function horizontalLoop(items, config) { items = gsap.utils.toArray(items) if (!items.length) return config = config || {} let tl = gsap.timeline({ repeat: config.repeat, paused: config.paused, defaults: { ease: 'none' }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100), }), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = (widths[i] = parseFloat(gsap.getProperty(el, 'width', 'px'))) xPercents[i] = snap((parseFloat(gsap.getProperty(el, 'x', 'px')) / w) * 100 + gsap.getProperty(el, 'xPercent')) return xPercents[i] }, }) gsap.set(items, { x: 0 }) totalWidth = items[length - 1].offsetLeft + (xPercents[length - 1] / 100) * widths[length - 1] - startX + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], 'scaleX') + (parseFloat(config.paddingRight) || 0) for (i = 0; i < length; i++) { item = items[i] curX = (xPercents[i] / 100) * widths[i] distanceToStart = item.offsetLeft + curX - startX distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, 'scaleX') tl.to( item, { xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100), duration: distanceToLoop / pixelsPerSecond }, 0, ) .fromTo( item, { xPercent: snap(((curX - distanceToLoop + totalWidth) / widths[i]) * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false, }, distanceToLoop / pixelsPerSecond, ) .add('label' + i, distanceToStart / pixelsPerSecond) times[i] = distanceToStart / pixelsPerSecond } function toIndex(index, vars) { vars = vars || {} Math.abs(index - curIndex) > length / 2 && (index += index > curIndex ? -length : length) // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex] if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = { time: gsap.utils.wrap(0, tl.duration()) } time += tl.duration() * (index > curIndex ? 1 : -1) } curIndex = newIndex vars.overwrite = true return tl.tweenTo(time, vars) } tl.next = (vars) => toIndex(curIndex + 1, vars) tl.previous = (vars) => toIndex(curIndex - 1, vars) tl.current = () => curIndex tl.toIndex = (index, vars) => toIndex(index, vars) tl.times = times tl.progress(1, true).progress(0, true) // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete() tl.reverse() } return tl }

Hi @iproum and welcome to the GSAP Forums! https://codepen.io/GreenSock/pen/eYxOXPP https://3dtransforms.desandro.com/carousel Happy Tweening!

Hi, This is not a simple thing to achieve but not extremely complicated neither. Is about layout and the initial setup of your elements: https://3dtransforms.desandro.com/carousel Here is a demo that uses GSAP and ScrollTrigger for this: https://codepen.io/GreenSock/pen/eYxOXPP Hopefully this helps you getting started. Happy Tweening!

You can see in the provided codepen I have a simple setup. If yout try to drag the carousel, the custom cursor does not follow the actual mouse position and updates only when the drag is over. Any idea on how to solve this?

Hi Everyone, Hope everyone is doing good. I am facing a small problem that I cant seem to solve. issue is that while i scroll vertically there a section that scroll horizontally (like a image carousel) then unpin and continou scrolling vertically. ISSUE: the issue is where the trigger should unpin. now it unpin when the left side of last image has touched the left side of parent div leaving a big white space. Example From Images. What I want: when the last image is shown, just stop the horizontal scrolling and unpin the section don't drag the last image to the right side https://codepen.io/Fawad4real/pen/abMRqLZ

I'm attempting to build a product carousel using GSAP. Goal: Be able to click a button to display a new row of products. When the new row of products is displayed, stagger load each product card I'm still actively learning, but cannot figure out to get this to work properly. Would appreciate any advice! Thank you

Hi, I am trying to create an infinite horizontal carousel, but the infinite part is not working. The three slides are cloned one time and after the 6 slide it stops. So what I am trying to create is the following. A horizontal carousel slider where the items are full width. When scrolling down or up, the slider moves to the left or right and snaps into place. The missing part is the infinite slider, where it will scroll infinite, if this can be an optional thing to add, it would be nice. Here you can find my Codepen. If someone have a better solution or example, please let me know. It will help me a lot. Casper

Hi, I strongly recommend you to read this: https://3dtransforms.desandro.com/carousel You can see that this demo is using that logic to setup the elements: https://codepen.io/GreenSock/pen/eYxOXPP Finally you can check this post by @mvaneijgen one of our super heroes to learn about masking: Hopefully this helps. Happy Tweening!

Hello! How are you guys? I'm new to using GSAP, which is awesome, by the way, and I'm having a little difficulty implementing a responsive full-width, draggable, infinite and auto-scrolling horizontal carousel (phew!!! the god of adjectives must be pleased 🤣). The main problem I'm facing is that the every item's speed is completely different from the others. Strangely, console.log(distanceLoopingPoint/timeUntilElementLoops); Prints out "100" for all elements and the actual speed is indeed set to 100 pixels per second. The code I'm using is a simplified version of the helper function that you guys provide. I didn't alter anything meaningful, I simply removed some stuff that wasn't needed and simplified other stuff like removing parameters that are always zero. I also renamed all variables to help me understand what was going on. I made sure that the animation looks exactly the same as before I simplified stuff. Also, it's not draggable. I've tried fiddling with it a lot and asking for the help of every decent AI I know (ChatGPT 4, Phind and Blackbox AI). How can I have every item move at the same, constant speed and still have it be responsive? Thank you so much! ❤️ https://codepen.io/ZeHgS/pen/qBvVmwm

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.

Hi there GSAPpers, I'm aiming to make an element in a vertical scroll of images flip into a central container. The idea is, the carousel of blocks will eventually hold videos. > video (housed in ".stack__item" container) clicked > video flips into a larger, centred container, lightbox style > video plays > click video container again, video stops and returns to original position nested in carousel The trouble I'm having is I'm not sure how best to manage the dynamically added class... I only want the 'flip' to occur on the active highlighted element ('stack__item--current'). I'm stuck on how to manage the logic so that this dynamically added class is available to the Flip function. Maybe it needs to be in some kind of onComplete as part of a timeline? The pen shows it (very clunkily) working on the parent element ('.stack') Here's a pen without the Flip/flip container, for reference: https://codepen.io/matt-rudd/pen/PoLWQdb Hope that makes sense... I'm stretching my knowledge as ever! Any big or small nudges in the right direction greatly appreciated 😬.

Hi, I've been having fun customizing a couple of different scripts I've found. The carousel itself is inspired by this. And the nav dots are adapted (to the best of my limited ability) from this. I think I'm getting really close with it, but the .dots-current keeps bouncing all the way to the right before going back and *almost* landing on top of the current dot. I've also just got a tired brain and haven't figured out how to make my nav arrows also trigger the dots animation at the right time. Any help that can be afforded would be massively appreciated. Edit: And I just realized that somewhere along the way this evening, I've lost the cool hover effect over the "link here" button that's in the original tympanus example. {sigh} I have no idea where I lost it. For some reason in init() I had changed gsap to .to, instead of .set. When I changed it back, my hover effect returned

I'm trying to make them move smoothly and automatic like the codepen example but I don't want there to be moments where there are no images in the viewport. Not as a carousel or slider

Kind of you to respond. It works now. There is some change I want to make to the animation: WHEN SCROLLING DOWN I want the carousel to start moving to left as soon as it comes into viewport and keep doing so while page is being scrolled down and end only when it exits viewport, whereas, WHEN SCROLLING BACK UP I want the carousel to start moving from left to right as soon as it comes into viewport and keep doing so while page is being scrolled up and end only when it exits viewport. Could you please guide how to get this done?

I am a total beginner and trying to introduce the animation to image carousel as is on this page. After running around the web I found this query on GSAP, implemented the code and it started working. BUT the active code in my pen does not work in VSCode, although it works on CodePen, the other one which I have "commented" does work in my VSCode. Could someone please look into this and guide me why is this so? Moreover I would also like to request to know which technique for scroll trigger image carousel animation exactly has been used on this page. Many thanks!

Hi everyone, I'm developing an animation for a set of divs that dynamically display Weather data fetched from an API. The goal is to create a seamless looping animation where three elements (st1, st2, st3) fade in and out in sequence, creating an overlapping carousel effect. The challenge I'm facing is with the transition from st3 back to st1 in the looping sequence. On the first loop, the transition from st1 to st3 is smooth and works as expected. However, in subsequent loops, st1 seems to restart and plays its fade-in animation again, which disrupts the flow. I know this is a very simple issue, but I just couldn't manage to create a seamless loop, and would really appreciate if someone can help me out. Here's my minimal StackBlitz demo for reference: https://stackblitz.com/edit/nextjs-zjgmib?file=pages%2Findex.js Thank you in advance.

Hi, I'm trying to edit a GSAP example called horizontalLoop() I would like to add a scroll listener so that when you scroll up or down anywhere inside the .wrapper, it makes the carousel go left or right, infinitely. I'd like it to have some lerp or inertia on scroll, and I don't need snapping. What method would you recommend to do this? Side note: the horizontalLoop() official GSAP example sometimes goes crazy with drag velocity going extremely high all of a sudden. Has there been an update on this GSAP example where it doesn't do this? (It does it on my CodePen too)

Hi every gsap hero In this case, I want to achieve a carousel-like animation on scroll with couple of card item, so instead of waiting another card item to finish sliding up I want all card items are sliding together with some effect e.g. if the card-item is not on the center it should fade out and scale down. I've tried some couple methods like using position parameter but haven't found the working solution yet, I provide the codepen here with the white rectangle as the card-item carousel center

I don't understand how knowing what direction my carousel is dragged helps me know when a circle within the carousel (a slide, essentially) is overlapping the target circle. I don't want to know when it's finished dragging - I want to know as each circle is dragged. For example, if someone were to drag the carousel from 1 through 8, stopping on 8, it should make 7 clicks, as each circle crosses the target circle. Effectively simulating the common haptic feedback effect you see on things like this.

OK, here is the same pen, but I have now added a 100vh div above and below the div containing the carousel. That is the only difference. Note how the carousel no longer appears, and all the animations are thrown off by the fact that the carousel is now in a div rather than absolutely positioned and pinned to the only div on the page. What I am looking for is the setting that assigns the scrolling context of the carousel to the div that contains it, rather than to the whole page Put another way, I want the carousel to work even when it is not the only section in the document. Is that possible with this strategy? https://codepen.io/benpickle/pen/qBgMQrr

I'm having some trouble getting this example to work in my page. Basically, the non-draggable part of the animation is built around a scrolltrigger so it keys off the scrolling of the entire page. But I need this piece to be contained in a div toward the bottom of the page. If I remove the scrollTrigger stuff, the Draggable animation works, but the Prev and Next buttons no longer advance the carousel. How can I make it so the ScrollTrigger animation only works within the div containing the carousel? Does that question make sense? I'm sure it's a simple setting but i just can't figure it out.

@Toso - I was not able to loop the carousel indefinitely with a pause on each box when utilizing the function. If you have any additional insights or guidance on this matter, I would greatly appreciate your help.