Search the Community

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

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.

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.

I'm trying to move the carousel to the left 50px and pause 1 second in an infinite loop, but the carousel doesn't move. In addition, how can I add a margin of 10 px to each box? I'd greatly appreciate your help.

Hi there! I'm having a lot of problem to implement gsap scroll trigger with a carousel from react-spring-3d-carousel. I need that when I enter the carousel container, the slides swipes along with the scroll (this is working), but my problem is that I need the scroll stay in the carousel container until all the slides finish, because now the scroll keeps going to the bottom of my site and it's not keeping in the carousel container. I have tried a lot of resources here from the forums and from youtube but nothing makes work it well. I will be very grateful if someone can give me a hand with this issue. I'm new in gsap so I want to still learning and participate in this great community. Thank you very much! I will let my deploy link and my github code here below. Carousel:

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 });

Draggable carousel works improperly if I set repeat: -1, when it finishes a lap and I want to drag it, it seems to go crazy. https://codepen.io/GreenSock/pen/zYRWmOb just add: const loop = horizontalLoop(boxes, { paused: false, draggable: true, repeat: true }); how i can fix it?

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!

Hello Guys, is it possible to create a carousel like the one in the demo with gsap? so when i click the arrows, the images change and go in the main-image on top?

Hello Everyone, Trust you are great. Please I need your help to make my slider scrollable. I have tried to kill the timeline at the end of the the scroll and it restarts but it does not scroll until I scroll back to the previous slide and then forward. I sincerely appreciate any help provide. Thank you.

Hello, I have been working on an animated, looping banner text carousel, and I have provided a slightly simplified code pen example. The animation seems to work smoothly, but is interrupted every so often by an inexplicable flicker. You may need to watch the loop quite a few times before this flickering occurs for you. I want to maintain document flow for my purposes so I'm adjusting the text display settings as part of the animation. I have a hunch that this might have something to do with the issue. I was hoping someone would be able to take a look at my animation and be able to help me resolve this. Thanks in advance.

For everyone who will look at this topic in the future, here is the code for an ellipse carousel, which includes a function to display the inner div for the active element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

Hi everyone and thanks in advance! I had this problem a few months back and now I'm having the same problem again. I use to work with this Owl Carousel for the websites I work with, and when combining the Owl Carousel with Gsap, the Star and End triggers are placed in different locations than they should. On the websites I made, the Start is located wayyyy downwards. In this example it's upwards. I guess that Gsap is making all the calculations before the images are placed. I thought that with ScrollTrigger.refresh(); it should solve this but I guess it's for another case. Again, thanks in advance! Sebastian

I have figured out the solution to the first question using a simple function. Now, I will attempt to make it dynamically adaptable to a changing number of divs on the path, and to add a div displaying for the active element. Thank you very much with this help, such a small change and everything now works perfectly. This is the code for the ellipse carousel activated by clicking on some element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

I currently have a carousel(attached codepen). I would like the items to fade in from opacity 0 to 1, center viewport being where I would like the opacity of 1. Then once it moves past the center it then fades back out. When I add opacity to the fromTo it applies the same value to all of the links. I suspect that there is some equation that could be used, much like the rotationX, but I am just not good with equations/math. I am also aware that the whole thing might need to be redone to accommodate. Any help would be greatly appreciated.

Hey there. Unfortunately safari/IOS is pretty frustrating when it comes to animation. I've noticed far more rendering issues recently as well 😕. You're already using transforms to animate and (if you copied this demo) you have will-change: transform on your element, so that's good. Those both help with performance. Next up I'd check the contents of the cards, do you have incredibly large images or any filters/drop shadows on then. If you can reduce the size of the images that may help, similarly removing filters or drop shadows. Sometimes certain animations just aren't possible on mobile though. If you do test and run through these steps with no luck, it may be time to look at making a simplified version for mobile. You can use matchMedia for this. https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ I would initially try and see how the carousel responds without snapping, and with and without inertia. If you can show us the code you're actually using we might have other advice, but for now that's all I can give you. Sorry there's no magic bullet! Good luck!

I am not able to make proper co-ordinates and structure of carousel which i have in mind so somehow i have done some static code and in my codepen we can see UI. it is not at all working . Can anyone help me and give some tricks on task which i have.

hi there I need to build a slider, where centered slide is active and larger than other slides. I've been wondering if there is a way to detect active slide in gsap carousel (in my case it should be the one in the center)? here is a picture of what I'm talking about:

carousel.mp4

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

Hi team! How can I make this slides automatically play in every 10 seconds or so... When it reaches the last slide, animation starts from start thanks)

I have started with the card carousel here, and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things: 1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center. 2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa For the first idea, I have tried setting the scale in the initCell method with let scale: number = 0.6; if ([0, 6].includes(index)) { scale = 0.3; } which sort of has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses. The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt. I would be grateful for any help here. Thank you.

I built this little slider based off of the codepen below, and have added a few tweaks. https://codepen.io/osublake/pen/ZOgGXB The slider starts automatically, and then on mouseenter/mouseleave the animations pauses or plays. Once paused, you can drag through the carousel as you please, until you mouseleave again at which point the slider will resume playing from where you left off. The only problem I am running into is figuring out the actual progress value once I start dragging. I figured I would have to grab the current progress, and then add the dragging progress to it, but this results in some crazy dragging stuff. Any ideas on how I can seamlessly maintain the correct progress value between the autoplay and the dragging?

I'm creating a 3D Carousel based on Tom Miller example. The only difference is that my carousel has more images (20 instead of 10). The problem is: now, the images don't have the same width of the reference and the space between them is gone. Is there a way to increase the width of the carousel?

Hello All I am working on a Vue3 component with two parallel vertical carousels. The one on the left is moving from top to bottom, while the other on the right is moving from bottom to top. My problem is that the left carousel is working well with an infinite loop of the cards, but the right carousel is not infinite. Thank your for your help in advance! <template> <div class="100vh overflow-hidden" :class="`wrapper-${name}`" > <div :class="`pictures-${name}`" class="" > <img v-for="(card, idx) in props.cards" :key="idx" class="w-[14vw] block py-3" :class="`picture-${name}`" :src="cardURL(card)" alt="card" > </div> </div> </template> <script setup> import { onMounted, ref } from 'vue'; import { gsap } from 'gsap'; import { Draggable } from 'gsap/all' import { InertiaPlugin } from 'gsap/all'; gsap.registerPlugin(Draggable, InertiaPlugin) const props = defineProps({ cards: { type: Array, required: true, }, name: { type: String, required: true, }, reverse: { type: Boolean, required: false, default: false, } }); const cardURL = (img) => { return `/card/${img}.png` } const pictures = ref(null); let counter = ref(0); function startAnim() { const totalHeight = pictures.value.querySelector(`.pictures-${props.name}`).offsetHeight; pictures.value.querySelectorAll(`.picture-${props.name}`).forEach((picture, i) => { const pictureHeight = picture.offsetHeight; const pictureOffset = picture.offsetTop; const pictureDistance = pictureHeight + pictureOffset; const tl = gsap.timeline({ repeat: -1, defaults: { ease: "none", duration: 20 } }); if (props.reverse) { tl.to(picture, { y: `+=${totalHeight}`, modifiers: { y: function (y, target) { y = parseFloat(y); if (y >= pictureDistance) { y -= totalHeight; } return y + "px"; }, }, }, 0); } else { tl.to(picture, { y: `-=${totalHeight}`, modifiers: { y: function (y, target) { y = parseFloat(y); if (y < -pictureDistance) { y += totalHeight; } return y + "px"; }, }, }, 0); } }); } function incrementCounter() { counter.value++; if (counter.value === pictures.value.querySelectorAll(`.picture-${props.name}`).length) { startAnim(); } } onMounted(() => { pictures.value = document.querySelector(`.wrapper-${props.name}`); const allPictures = document.querySelectorAll(`.picture-${props.name}`); allPictures.forEach((picture) => { if (picture.complete) { incrementCounter(); } else { picture.addEventListener('load', incrementCounter); } }); }); </script>