Search the Community
Showing results for tags 'carousel'.
Found 45 results
-
Infinite Scrolling, Draggable, Clickable, Speeding Ramped Carousel/Slider - Am I going down completely the wrong path?
willdoforabigmac posted a topic in GSAP
Hi there, I'm new to GSAP and new to development in general, I'm coming from Webflow as a designer. Anyhow, I've been trying to make - as the title states - a carousel/slider with all the features I want for UX purposes. I intend on reusing this code on future projects. I the features I set out to achieve are: Smooth motion Draggable for mobile mainly Clickable for desktop mainly Infinite scrolling I have made something that works the way I want using the Infinite Scrolling helper function from the GSAP Docs page and added my own alterations, but I am not sure if this is how it is supposed to be done, since I started with an existing function I might have accidentally "doubled down" on the wrong solution, I would love some pointers to the right direction. I've attached a demo here so everyone can see what I'm trying to get at, it's quite a specific thing I'm looking for so it's really hard to find good information. P.S. I'm very new to coding in general, I absolutely am not expecting a full-on tutorial or anything but even some pointers to like "hey learn this one first" would be appreciated, I'm also not at the stage to fully commit to pure code and will be utilizing a lot of Webflow in the foreseeable future hope this add all the necessary context. Thank you everyone in advance. -
I'm trying to get this carousel to be infinite, but still snap in place. Right now it gets to the last slide and scrolls back to the first one. How would I achieve that? It seems like the issue only happens when dragging.
-
I tried to create an on-scroll horizontal carousel by nesting it inside a GSAP timeline (tl), but it’s not working. I’ve been attempting this for a while without success. Please help me fix it. and after whole carousel get completed uncomment these codes in js : // .to(".black-screen", { visibility: 'visible' }) // .to(".ourProjects-wrapper", { bottom: '0%', duration: .5 }) These commented codes are incomming animtions.
-
Hi GSAP community, I’m a beginner with GSAP, and I’ve used the seamlessLoop helper function (with some modifications) to create a carousel that slides automatically every few seconds. I also added custom snapping functionality for Draggable since it wasn’t included in the original helper. The carousel works fine initially, but I’m facing two major issues: Resizing Issue: On the initial window load, the slides are perfectly aligned and animate correctly. However, when I resize the window, the slides go off their positions, and the animation becomes misaligned. This issue is especially noticeable if I resize mid-animation. Important Note: When I don’t use the seamlessLoop function, the slides are perfectly aligned even after resizing, which suggests there’s no issue with my CSS. Dragging Snap Issue: On the first slide, when I drag to the right to go to the previous slide (which is the last slide due to the seamless looping), the carousel slides all the way to the first slide and then snaps. For other slides, the dragging snap works perfectly. Things I’ve Tried So Far: Verified that the issue isn’t caused by CSS by testing without the seamlessLoop function. Checked the distanceToStart and distanceToLoop calculations in the populateTimeline function. They appear to be miscalculated during resizing. Added logging to debug these values and noticed inconsistencies when resizing. Ensured proper cleanup of event listeners like resize and visibilitychange. Experimented with adjusting margins, including the spaceBefore and xPercents arrays, but couldn’t resolve the issue. Here’s the CodePen with my implementation: https://codepen.io/Mohd-Usaid/pen/bNbLBBw Since I’m just a beginner, I’d really appreciate any help or advice on how to resolve these problems. Thank you for your patience and support!
-
Hi all, I have created this carousel, How can I adjust the spacing so the each item is spaced equally? https://codepen.io/ginthozan-v/pen/BaXwpjd
-
Hello everyone. I want the card with the active class to be centered on top initially. And it is also unclear why draggable does not work properly. It is necessary, if we did not move the circle to the next card, then return it back to the active one, and if we moved the circle a little further and stopped, then move it to the next card and make it active. The wrapper block must not drop the rotate value below 0. I really need your help, I've been working on this task for a very long time
-
Hello, I need a banner like in the following example: https://www.moxionpower.com/industries/ It should work without jQuery and should use only the Gsap library.
-
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.
-
Hi community, https://htxrgj.csb.app/ I want to animate my animation using scroll within 1/4 or circle, or in arc shape, please checkout for code given on codesandbox. The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth. I hope you got my point..! Thanks in advance..!
-
carousel.mp4
-
Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the transition controlled by the dragging. Any helpful ideas? Thanks https://codepen.io/gooogooo/pen/oNjzpor
-
Hello all! It's been a while! I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of ? I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part). The difficulty comes when I have an interactive component above the carousel, like an accordion. When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap. I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck. Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet? Steps to replicate in codepen: 1. Click on any item in the carousel 2. Scroll to bottom of page. The carousel works fine, providing no accordion items are open. Any help is appreciated, thanks!
-
Hi, I want to create a carousel slider (200x100) that will animate on scroll. I am not an expert and still trying to figure out GSAP. I want to pin the section which will contain the carousel as the user scrolls down. Thanks in advance :D
-
For real this time. I have codepen above showing an animation and currently the autoplay(carousel) is disabled, what I am trying to get to happen is once the animation plays it rotates to a new slide and replays the animation. I just need it to replay since all that will change per slide is the background image, front square image and text(swatch). So simply just need it all to repeat and to start over once finishes. Any help/insight? Thanks! EDIT: I am trying to get the js as repeatable as possible since the user can have between two and four slides and I will not know how many they add so I just need a repeated animation between slides however many they add and just to restart until the user leaves this screen.
-
Apologies for starting yet another "carousel" related topic, but I was hoping some of the brilliant minds here could help me out. Is there a way to use GSAP to create an infinite looping "carousel" style animation that doesn't repeat the first element in the list, like this embedded CodePen? Mind you: I'm not looking for fancy controls to start or stop or reverse anything, just a simple, clean way to loop a bunch of items that also makes sense in a screen reader type of environment—no repetitions of items in the source code.
-
Hi, I would like to create a carousel. Carousel has 2 parts, if i scroll 2nd part then it should fade in/out 1st part and show its content.
-
I've seen a lot of posts about trying to create a marquee section similar to the one on Cuberto's home page. I'm trying to recreate the marquee but the animation seems to "jump" when looping. I'm thinking my math maybe off in the modifier callback? EDIT: Inspecting the dom elements it seems the row items are overflowing the row slightly possibly because of whitespace generated from using inline-blocks.
-
Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time
-
I'm trying to use slickslider in collaboration with gsap for all the extra features slick has to offer. What could be best practice to hide all slide elements on non-active slides ? I tried to query them all on line 112 and adding them to the mastertimeline but this seems bad practice and deliveres undesirable results (janky, can't get it fixed with split text, gsap can't find certain items) Slick provides a 'slide-current' class with which i query the active slides and have managed to get the animation part going for just the active slide. I'm struggelig with - settings opacity 0 for all items whithin all slides untill the animation starts and the slide is active (when dragging the content of the next slide should be invisible) - furthermore with this approach in codepen i notice splittext keeps nesting upon every slide, i'm trying to style the period (color:red in styles) at the end of the title but can't get consistent behaviour and this seems like bad practice. In stead of trying to reach the last child in css, are there other methods in gsap/splittext i could use te get this result ? Any help would be appreciated
-
Hi, I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code. I have added the codepen below. Can anyone help to see where i am going wrong. Thank you very much
-
How to make automatic and dragable infinite carousel with 3.5.0 version. I try multiple solutions but not working.
SebastianBz posted a topic in GSAP
As all my attempts were unsuccessful I don't add codepen. -
Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete
-
Hi, I have a draggable horizontal carousel, but on mobile it prevents the vertical scroll of the webpage. How do I stop it from only allowing horizontal scroll across the slider? When a user drags their screen to move down the page if they have the slider section on their screen it won't allow them to get further down the website? - This seems like a silly issue so I am aware I am probably missing something simple, any help is appreciated. Thanks Kieran
-
Trying to create a smooth scrolling carousel that also behaves like a marquee scroller
Matt DD posted a topic in GSAP
Okay so as you can see I have built one. I originally used Slick and hacked it about to make it auto advance but it was super laggy and not very reliable. Slick created a good basis (cloned slides etc) so I left that in but disabled the rest of the slider functionality I've then created functions to move the slides with GSAP and re run the function on complete to auto advance the slides. I've also added a pause on hover and next and previous arrows to navigate more quickly. This all generally works but it is slightly laggy on safari (It's okay but if i add text to the slide it becomes hard to read, I've tried creating a CSS animation which is smoother but I can't get the extra features to work) Also I'd need to do some tweaking to get the timing to work consistently with different width items as it's set to a fixed 3s per slide Any help much appreciated, I feel like there may well be a much better way to do this with timelines or something similar -
How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });
.thumb.png.ff08a29e7d321b3dff6d2d8622eb4a67.png)
