Search the Community

I want to create a slider like this website https://props.studiolumio.com/ How can I do this in react js

Hi everyone, I've been using GSAP for so long that I think I am having a weird brain freeze and I am unable to create an indexing where the middle image on the slider will take a, let's say, "selected" class. I have used a previous implementation I found in my codepen and I have commented the section where I started my effort of getting an index value for start. Under the snap function. Any help would be greatly appreciated!

Hi @Rodrigo, I've tried with all kind of resistances but yet the problem still occurs in any situation. For better understanding I am sending a video recording over. As you may see even if I am dragging slowly the carousel (touch device) the carousel at some point triggers an extremely fast rotation that doesn't make sense. I've tried changing the ration onPressInit function to half that seems to make things a bit slower but still doesn't help me that much. Weird behavior at the end of the video. gsap_carousel.mp4

Thank you for the quick reply @Rodrigo, dragResistance is already tested but it doesn't prevent that weird behavior where the carousel will randomly on drag loop through all the items like 10 times in a sec... That's why I asked if I should search for an option where the carousel would rotate only a couple of items at each drag. I would try inertia resistance since I haven't tested it yet and come back with my results.

Hi there, Hoping someone out there might be able to point me in the right direction 🤞 My goal is to create a circular carousel/slider with Next & Previous buttons, pretty much the same concept as a traditional slider but in circular format. The onclick of the next button, the carousel would rotate counter clock-wise and snap to next item in carousel. Onclick of the prev button, carousel would rotate clock-wise and snap to the previous item. I'm also hoping to make each item/slide clickable, so the carousel rotates that item/slide to the starting arrow making that slide active. Where I've got to..... I've managed to get the "items/slides" set to an svg circle element using the Motion Path Plugin and have setup two timelines which are actioned on next/prev button clicks. At the moment the carousel animates a full +360 or -360 and the items/slides also animate full +360 or -360 as I'm trying to keep them upright as the carousel rotates. Same as the baskets in the GSAP Ferris Wheel demo here - https://codepen.io/GreenSock/pen/wBbKs. I'm unsure on the steps to getting it to snap to the next or previous item and also how to keep the items/slides upright on rotation. Any help would be much appreciated! Cheers,

Hello, I have a couple of questions and one dead end that I can't seem to solve. I am attempting to create an ellipse carousel, essentially similar to this one made in a circle: https://codepen.io/GreenSock/pen/GRMqWvW My main issue lies in the fact that I'm attempting to move objects along the path using the progress parameter, and I don't know how to achieve this functionality. I have tried to add animation to the timeline, but currently, it isn't moving even with the basic rotation for the div, which acts as a wrapper. I've added numerous console.log statements to track progress changes, and they seem to be updating correctly. The relevant code for inspection is from line 65 to 177, with some comments interspersed. From the side problems I'm also struggling to track the active element using animation added to the timeline, similar to the example provided by GSAP example pin (lines 83-97, currently commented out). Currently, I am changing this value within the 'moveWheel' function at line 162. Here's StackBlitz link for the above questions: https://stackblitz.com/edit/stackblitz-starters-4p7twq?file=src%2Fcomponents%2FroundComponent.js Another issue I need assistance with is the 'convertToPath' function. I am attempting to obtain a path from an ellipse, but when I position the SVG beforehand (for example, by centering it using cx and cy values), obtaining the path doesn't reflect this position. Additionally, if I try to directly add a translate into the generated path, it doesn't work. How can I accomplish this correctly? I have provided separate code to visualize this problem: https://stackblitz.com/edit/stackblitz-starters-6mzrk4?file=src%2FApp.js P.S. Regarding the issue with converting the ellipse to a path, I've noticed that if I comment out line 57 within my code, it looks as it should, but now the entire path isn't visible 😕. I've saved the StackBlitz project with a comment on that line. Perhaps you could provide me as I think with some simple solution to get a whole path of svg visible? Thanks in advance.

Hi everyone! @GreenSock Coming back with an update on the horizontal loop helper. It looks like that the carousel gets to scrolled way to fast in some situations whilst dragging, especially in touch devices. Is there a way to minimize or declare the items that it should scroll into view? I've tried to change the snap function but doesn't seem to work... snap: value => { let time = -(value * ratio) * tl.duration(), wrappedTime = timeWrap(time), currentIndex = tl.closestIndex(), targetIndex = getClosest(times, wrappedTime, tl.duration()), maxMove = 2, newIndex = Math.max(currentIndex - maxMove, Math.min(currentIndex + maxMove, targetIndex)), newTime = times[newIndex], dif = newTime - wrappedTime; // Adjust the difference to wrap around the timeline if needed if (Math.abs(dif) > tl.duration() / 2) { dif += dif < 0 ? tl.duration() : -tl.duration(); } return (time + dif) / tl.duration() / -ratio; },

Changed it up, slightly, based on one of the demos (https://codepen.io/GreenSock/pen/PoyJpMY) and seems to work now. Changed the distance to scroll calculator into a function and then made the pin almost most of the scrolling content and not just the carousel container. https://codepen.io/richardcool/pen/yLrqdQm

I am trying to make this 3d carousel gallery to horizontally scroll using Scrolltrigger(gsap), but I kept failed. Can anybody help me please? I tired tons of ways, but all failed What I am trying to make: If I scroll down or up, the 3d carousel gallery also rotates following scrolling.

Hi, I am using Next.js with GSAP. I discovered that the horizontal length does not expand according to the width of the images when users redirect from other pages. Somehow, it works if the home page is refreshed. In the horizontal helper function, I noticed that items[length - 1].offsetLeft is not the total width that should be added up. Any help would be greatly appreciated! https://codesandbox.io/p/devbox/gsap-horizontal-infinite-carousel-lzn99z?file=%2Fapp%2Fcomponents%2FSlider.jsx%3A41%2C16

I keep getting this error when I scroll past a section on a page that uses ScrollTrigger and MagicPin() and then go to another page and then hit the back button. "ScrollTrigger.js:1384 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')". See the code for the component below. I keep doing console.log, but I can't figure out why the pin parameter is still undefined and it only happens when using the back button. I added "await" to it in "async" and everything. import {Component} from 'bona'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import {magicSlideElementAppear} from '../lib/transitions'; import Swiper from 'swiper'; import {Autoplay, Navigation} from 'swiper/modules'; export default class Worth extends Component { constructor() { super(...arguments); this.header = this.el.querySelector('.worth-header'); this.action = this.el.querySelector('.worth-action'); this.carousel = this.el.querySelector('.worth-carousel'); this.items = this.el.querySelector('.worth-items'); this.item = this.el.querySelectorAll('.worth-item'); this.main = this.el.querySelector('.worth'); this.mm = gsap.matchMedia(); } async onInit() { await this.magicPin(); this.magicShow(); this.initCarousel(); } async onDestroy() { this.mm.kill(true); } magicPin() { ScrollTrigger.matchMedia({ '(min-width:768px)': () => { ScrollTrigger.create({ trigger: this.main, pin: true, pinSpacing: false, }); }, }); } initCarousel() { this.mm.add('(min-width: 768px)', () => { this.worthCarousel = new Swiper(this.carousel, { modules: [Autoplay], wrapperClass: 'worth-items', slideClass: 'worth-item', slidesPerView: 'auto', speed: 8500, loop: true, allowTouchMove: false, autoplay: { delay: 0, disableOnInteraction: false } }); return () => this.worthCarousel.destroy(true, true); }); } magicShow() { if (this.header) magicSlideElementAppear(this.header); if (this.action) magicSlideElementAppear(this.action); if (this.carousel) magicSlideElementAppear(this.carousel); } }

Hi everyone, I'm trying to create an infinite carousel following this example by @OSUblake. You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?) I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion. thanks

Hi GreenSock community. Novice GSAP user here. Used it to create some custom animations for our agency site last year but not used since. I need some help creating a slider that scrolls as if it's on a circular path very similar to this https://yolele.com/ - looks like the effect is created using css rotation attached on scroll in this example. I found one or two topics that mention the MotionPathPlugin which I've never used used but wondered if that's overkill for something like in the example? Any pointers in the right direction would be really appreciated. Many thanks

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 used @Carl's excellent code for creating a seamless loop to create a nice "testimonial slider" section on my websites. Now I'd like to update it with some prev/next controls so visitors can jump ahead or back through the testimonials. Maybe I didn't search hard enough, but i couldn't find an instance of the seamless loop code I'm using where someone has modified it to do this. I did find this related post GSAP Slider/Carousel, Next and Previous Buttons, but the approach there seems different enough from my current code that I'm reluctant to completely overhaul what I have. Before I do an overhaul, anyone know of a "simple" update to my current seamless loop code to add prev/next functionality? My code: https://codepen.io/clayteller/pen/gOmBGEG Thanks for your help!

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

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.

Can anyone help me transform this carousel into infinity? Every time it reaches the end it returns to the beginning, leaving it infinity? I believe you should use wrap but I couldn't understand how to do that. 'use client'; import { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/all'; const Carousel = () => { const slider = useRef(null); const firstSlider = useRef(null); const secondSlider = useRef(null); let xPercent = 0; let direction = -1; useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.to(slider.current, { scrollTrigger: { trigger: document.documentElement, scrub: 0.25, start: 0, end: window.innerHeight, onUpdate: (e) => (direction = e.direction * -1), }, // x: '-500px', }); requestAnimationFrame(animate); }, []); const animate = () => { if (xPercent < -100) { xPercent = 0; } else if (xPercent > 0) { xPercent = -100; } gsap.set(firstSlider.current, { xPercent: xPercent * -1 }); gsap.set(secondSlider.current, { xPercent: xPercent }); requestAnimationFrame(animate); xPercent += 0.01 * direction; }; return ( <div ref={slider} className='flex flex-col items-center justify-center w-full h-full gap-y-10' > <div className='flex gap-x-10' ref={firstSlider} > {Array(20) .fill(null) .map((item, index) => ( <div key={index} className='bg-blue-500 w-36 h-36' > {index} </div> ))} </div> <div className='flex gap-x-10' ref={secondSlider} > {Array(20) .fill(null) .map((item, index) => ( <div key={index} className='bg-purple-500 w-36 h-36' > {index} </div> ))} </div> </div> ); }; export default Carousel;

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

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, If this is working as a standalone component but it breaks in your app, that means that something else in your app is breaking this and is not a GSAP related issue. You should remove other features of your app and start adding them until this breaks and you'll have the culprit of the situation. Sorty I can't be of more assistance but as mentioned this is more related to something else in your app rather than a GSAP issue. Finally this looks odd to me: 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 }, }) Why are you doing this? loop.timeScale(Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY) // whichever direction is bigger slow.invalidate().restart() // now decelerate Just create a timeline and be done with it: let loop = horizontalLoop(`.carousel-${section} li`, { repeat: -1 }) let t; loop?.timeScale(0) Observer.create({ target: `.carousel-${section}`, type: 'pointer,touch,wheel', wheelSpeed: -1, preventDefault: true, onChange: (self) => { t && t.kill(); loop.timeScale(Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY) // whichever direction is bigger t = gsap.to(loop, { timeScale: 0 }); }, }) Creating a new GSAP instance won't have any negative effect performance wise and the previous one that is being killed will be sent to garbage collection and the small amount of memory it uses will be released so there is no downside to it. https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx Happy Tweening!

Hi, The demo I shared in my previous post was a way to show you how to do this a learning resource of sorts, nothing more. We don't have the time resources to provide fully working solutions for our users or give free general consulting in these free forums. We have to keep our focus on solving GSAP related questions and issues. In order to understand how this works I recommend you to check this guide by David DeSandro: https://3dtransforms.desandro.com/carousel Finally if you want to use the Motion Path Plugin you can check any of these threads: Also you can see this video where @Carl goes into a lot of detail about this: Hopefully this helps. Happy Tweening!

Hi. I was trying to reverse engineer this demo using the Modifiers plugin: https://codepen.io/GreenSock/pen/QEdpLe I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.

Hello everyone, I've tried to fix the navigation bar, but it works not fine; what should I change to make it visible when the first section is in the viewport more than 90% and unfix it when the last section is strolled more than 10% down? It should refresh when we get back to the container. Here is my code for this: const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".carousel-inner", start: "top-=100px", end: "0", marker: true, toggleActions: "play none none reverse", endTrigger: panels[panels.length - 1] } }); tlfour.to(".carousel-navigation", { position: "sticky", bottom: 100 });

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