Search the Community

Hi, i am starting a new project where a slider has already been set up with swiper js. Now i was wondering if its possible to add a cool animation when i drag or scroll through the slider like on this website: http://manifesto.clapat.com/index-showcase-carousel.html the images seem to be cut on the sides and seem to have more depth also they skew in the direction they are dragged. I was just wondering if someone could give me some direction on how to approach this kind of effect with GSAP or if there is a tutorial that someone could point me to. So no debugging for now^^. Also i wanted to know, if this effect is possible with a slider made with swiper JS or if there are any complications. Additionally i would like to implement the transition effect when clicking on the slider images. I saw that it can be made with the FLIP plugin, i just hope it works within Swiper JS. Thanks

Hello, I am new to frontend development and currently working as an intern in the frontend field. I have been assigned a task to create an interactive news app with a scrolling carousel feature. While researching, I came across a sample slider that seems similar to what I need. Could you please assist me with creating the carousel in gsap? I have attached the sample for your reference. Thank you!. 1c100da3-07dc-4b76-8f9d-4efb14afa2f4.mp4

Hi all! I've made a carousel where you can scroll through a series slides, each with its own image + captions. For each slide, I set up two captions (one on top and another at the bottom) and set them in a fixed position so that the captions remain in place as you scroll through the carousel. However, even though the captions stay in place, all the text is overlapped on top of each other, and I can't figure out how I can get the fixed captions to update when changing slides. I'd be eternally grateful if someone out there can help me out! I've included a link to a codepen I've been racking with for a while now. Thanks all!

hi. I need to make a circular slider like in this example, maybe gsap has something for this. I thought about motion path plugin, but since I'm new to gsap I'm not sure where to start: https://i.stack.imgur.com/rGlyB.gif I also wondering about how it would be possible to animate those orange dots on slide change. maybe there are some tools that I could use to make it more right way. I'm a total newbie in such animations, so I would really appreciate any help.

Hello! I'm working on a slider with an overlapping slide transition. It's based on Craig’s response in this post: I've made a demo of my work so far, in the attached pen. I can make the slider auto-play forward and loop, with no buttons, but I’d like to have buttons too. This is what I’m trying to figure out: I'd like the slider to loop forward automatically, but if the Next or Previous buttons are pressed, it should move forward (or backward) 1 slide and continue looping forward from there. I'd like the Previous button to decrement from the first slide to the last slide and continue decrementing from there. It’s glitchy decrementing from 1-3 back to 0, always going to slide 4 if you’re on the second loop through the array. but won’t loop backwards past 0 at all. Any help or advice would be much appreciated - including "hire yourself a programmer!" Thank you!

This 3D Image Carousel has been implemented in the old GSAP version and such methods are used: TweenMax, staggerTo, and circle. https://codepen.io/qakxhzvo-the-encoder/pen/ZEmXrGw Maybe someone knows how to modify to the new version of GSAP? Did I remake it correctly for the new GSAP? console write error (rotationY undefined). But in the element exists this data

Are there any methods of creating a vertical carousel, with the selected item fixed in the center of the screen? I've tried something based on this project, but the results have been unsuccessful. Found alternatives on the forum, codepen didn't give any results either Modifiers Plugin for Infinite Image Carousel - GSAP - GreenSock

Hello everyone, My GSAP timeline loops 3 times. I use Splide.js to display my products. I can't make that when my timeline restarts, the product carousel also restarts from the beginning. That's why I come to ask for your help Adel Link to Splide JS : https://splidejs.com/ Link to banner : https://images-armis-staging.s3.eu-west-1.amazonaws.com/bricorama/newtemplates2023/appnexus/html/slideshowV2_300x600.html

Hi! We really like this 3d carousel idea and tried to implement our own version. We have two main problems: 1 - Can't figure out how they made the scrolltrigger infinite 2 - Tried to add a drag option as well with Draggable plugin and wanted to bind it to the scrolltrigger so the card positions are in sync with it. Here is our implementation (couldnt make it as a pen because I'm lazy and dont know how to create a react envo in codepen but hey, here is the live demo if you wanna see how it looks and behaves): vars and useEffect: const numberOfCards = allCases.length; const angleOfCards = 360 / numberOfCards; const cardGaps = numberOfCards > 6 ? Math.pow(numberOfCards, 2.2) : -angleOfCards / numberOfCards; useEffect(() => { gsap.registerPlugin(ScrollTrigger, Draggable); const root = rootRef.current; const container = containerRef.current; const cards = cardRefs.current; const dragProxy = dragProxyRef.current; // Mouse Tracking animation const onMouseMove = (e) => { if (!root || !container || !cards) return; const { clientX, clientY } = e; const { width: clientWidth, height: clientHeight } = root.getBoundingClientRect(); const rotateXVal = (clientY - clientHeight / 2) * 0.06; const rotateYVal = (clientWidth / 2 - clientX) * 0.01; container.style.transform = `rotateX(${rotateXVal}deg) rotate(${rotateYVal}deg)`; }; document.addEventListener("mousemove", onMouseMove); // Gsap Animations with scroll and drag const ctx = gsap.context(() => { if (!root || !container || !cards || !dragProxy) return; // Drag Draggable.create(dragProxy, { type: "x", trigger: cards, bounds: container, onDrag: function () { const progress = (this.startX - this.x) * 0.008; cards.forEach((card, idx) => { card.style.transform = `rotateY(${ (idx + progress) * angleOfCards }deg) translateZ(320px) translate3d(0px,0px,${cardGaps}px)`; }); }, }); // Scroll ScrollTrigger.create({ pin: true, scrub: true, invalidateOnRefresh: false, start: "top top", end: "+=10000", //i set the end as a big number to at least rotate the carousel one whole turn since i can't make it infinite tried to mimic it trigger: root, // markers: true, }); cards.forEach((card, idx) => { ScrollTrigger.create({ scrub: true, start: "top top", end: "max", trigger: container, onUpdate: (self) => { gsap.delayedCall(0.1, () => { card.style.transform = `rotateY(${ (idx + self.progress * 10) * angleOfCards }deg) translateZ(320px) translate3d(0px,0px,${Math.abs( (cardGaps * (cards.length + 5)) / cards.length )}px)`; }); gsap.delayedCall(1, () => { card.style.transform = `rotateY(${ (idx + self.progress * 10) * angleOfCards }deg) translateZ(320px) translate3d(0px,0px,${cardGaps}px)`; }); }, }); }); }); return () => { ctx.revert(); document.removeEventListener("mousemove", onMouseMove); }; }, []); JSX: <section className={s.root} ref={rootRef}> <div className={s.carouselContainer} ref={containerRef}> {allCases && allCases.map((c, idx) => { return ( <div key={c.id} onMouseEnter={() => setSelectedCaseIdx(idx)} style={{ transform: `rotateY(${ idx * angleOfCards }deg) translateZ(320px) translate3d(0px,0px,${cardGaps}px)`, }} ref={(e) => createRefs(cardRefs, e, idx)} className={s.carouselCard} > <CustomLink link={c.caseLink} className="z-10"> <NextImage layout="fill" media={c.bgImg} objectFit="cover" className="rounded-lg" /> <div className={s.content}> <p className={classNames(s.description, "text-lg")}> {c.description} </p> <h3 className={s.bigTitle}>{c.bigTitle}</h3> </div> </CustomLink> </div> ); })} </div> <div ref={dragProxyRef} className="invisible absolute" /> </section> Here is the related css classes just in case something is wrong with it? .root { @apply pt-20 2xl:pt-32 px-20 min-h-screen text-primary relative; } .carouselContainer { @apply relative flex justify-center items-center; min-height: 650px; width: 100%; transform-style: preserve-3d; perspective: 1300px; /* transform-origin: center center calc(-300px / 100); */ } .carouselCard { @apply rounded-lg; overflow: hidden; width: 320px; aspect-ratio: 0.67; position: absolute; transition: transform 1s; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); }

Hi everyone, I`m new to the forums.I'm currently working on a project and want to implement a vertical animated carousel using GSAP . However, I'm facing some challenges and could use some assistance from the community. The goal is to create a visually appealing carousel that displays content in a vertical orientation as in the https://digital-cover.com/. I want to achieve smooth transitions between slides, with each slide animating into view as the user navigates through the carousel. If you have any insights, code examples, or tutorials that could help me get started or improve my current implementation, I would greatly appreciate it.

Hey all, I've run into an issue when porting the code in the attached codepen into my local environment, and i just hoped that someone may recognise the symptoms and have an idea of a fix. The codepen (seems) to work fine, however when I use in my local environment (WordPress) I'm unable to drag the carousel. After some hours of investigation with dev tools, it turns out that, in my local environment, the UL is not calculating the full width of all the LIs and is reporting it at just 1485px (the width of the element in the browser); whereas codepen, is reporting the width of the UL correctly as 7000px. Hence, no drag. If I manually add a specific width to each LI, it does then calculate the width correctly, but there are a lot of pages with different image sizes so doing it manually isn't really possible. From what I've read, the calculated ul width is not based on the content of the li and you have to specify the width of the li elements, but if that is the case I don't understand how codepen is working it out. I just wondered if anyone knows if codepen is doing something behind the scenes that i'm not aware of, or if anyone has experienced anything similar in their coding travels and managed to overcome it somehow ? EDIT: one other point, if i remove the bounding locally, then I can drag the carousel OK, but of course everything disappears as there are no bounds! The UL is still reporting as the width of the browser rather than full width of the content, but I can drag. With bounding, I can't drag at all. EDIT: one final difference I noted, on codepen, I can see the LI elements get a style of "touch-action: pan-y;" added, however locally, no style is added at all. I'm not sure if this has any affect on anything o.O Thanks!

Hi dev, im trying to reverse the direction of carousel on scroll, but as you can see on demo something go wrong. Where i'm going wrong ? https://codepen.io/Antonio-Nocella/pen/gOQwLLw Regard, Antonio.

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

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.

Hello everyone, I'm trying to achieve what it seemed to me to be a simple task but it's driving me mad. I have a web page with some content, so the user scrolls vertically, at some point instead of the classic scroll should be a vertical carousel in fullscreen with some nice animation while scrolling. Starting from a demo of GSAP ScrollTrigger I managed to implement this in a test page with my content; but if I add element on top and after the scroll go crazy. https://codepen.io/Roberto-Pelonara/pen/gOBzNzJ - Here a little example of what I mean I need some tips on how to fix it and have the effect of snapping only on the carousel while rest of the scrolls normally. Thank you!

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.

Hi, I'm looking for some assistance with GSAP. I'm trying to connect two GSAP examples which incorporate infinite scrolling and containerAnimation. The problem I am having is the containerAnimations are not triggering when the slides comes into view. The 2 examples I have been working of are https://codepen.io/andrei-savu/pen/BaPqzvX https://codepen.io/GreenSock/pen/NWMxRvM The goal is to add some parallax elements to each slide. We have been working on a mini project for a story feature where a rabbit runs to explore Irish Folklore stories. It's using GSAP plugins ScrollTrigger and Observer and it's nearly doing everything we need other than the parallax elements. https://nationalleprechaunmuseum.flywheelstaging.com/test/ It would be very helpful if someone could give me a few tips or help here with my problem. Thanks

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

I'm trying to modify this code snippet (which I got from the forum here) to make it so the cards are stacked on top of one another a bit more (see attached image). I tried adjusting the "spacing" value and it almost works but is a bit glitchy with the opacity. I'm afraid I do not know my way around gsap enough yet to be able to get it to look decent. Is there any chance I can find some help here?

https://codepen.io/NikiKarai/pen/GRBGXeO?editors=1111 Need help with snapping to correct values at onStop, spinning correctly, as right now it spins out of control

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?

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!

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?

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