Search the Community
Showing results for tags 'slider'.
Found 71 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. -
Hello, I want to recreate the slide transition effect on this site: https://elementis.co/destinations. If anyone can help me, here is the CodePen. Thank you in advance.
-
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
-
Hi Everyone, I'm trying to create a smooth staggered fade out/float up animation for partner logos but having loop as well. My main issue here is that once the last desired elements are visible, it's not animating properly the same way to show the first ones. It's kind of resets the entire timeline without smooth transitioning. That's probably because of set method that I use to reset the animation, but didn't work anything else properly. Any advice or help please? Here's the codepen. https://codepen.io/VahahBio/pen/oNrGydp P.S. trying to make the replica of partners section from https://www.humaan.com/
-
Hello everyone, I need to create a timeline that must adhere to the following behaviors: - Both the timeline and the slider must scroll automatically - The user should be able to take control of the scrolling with the slider - When the user finishes dragging the slider, the timeline AND the slider should resume their automatic scrolling Today, I have an issue. Everything works well in auto-scroll, but as soon as I drag the slider, it stays frozen and doesn't start moving again. I don't understand why, onDragEnd, my autoScroll method restarts fine but the .to related to the slider doesn't ? If anyone has a solution, I'm all ears, Thanks in advance. === FRENCH VERSION === Bonjour à tous, Je dois réaliser une frise chronologique qui doit respecter les comportements suivants : - La frise et le curseur doivent défiler automatiquement - L'utilisateur a la possibilité de prendre la main sur le scroll avec le curseur - Quand l'utilisateur a terminé de drag le curseur, la frise ET le curseur reprennent leur défilement automatique Aujourd'hui j'ai un soucis. Tout se passe bien en scroll auto, mais dès que je drag le curseur ce dernier reste figé en ne repars pas Je ne comprends pas pourquoi onDragEnd ma méthode autoScroll se relance bien mais pas le .to lié au curseur ? Si quelqu'un a une solution, je suis preneur, Merci par avance
-
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.
-
Dear GSAP Community, I hope this message finds you well. I am currently working on a project involving a GSAP double slider, and I find myself facing challenges in achieving the desired functionality and animation consistency. Despite my best efforts, I am struggling with overlapping issues when scaling down the browser window, and I'm encountering difficulties in ensuring the slider's timing, smooth animations, and effective control. I am reaching out to this vibrant GSAP community to seek assistance and guidance from experienced members who can share their expertise. Specifically, I am looking for insights on optimizing the slider's performance, refining animation timing, and establishing a stable control mechanism. As a novice in this area, I greatly appreciate any assistance, advice, or code snippets that could help me overcome these hurdles and enhance the overall effectiveness of my GSAP double slider. Thank you in advance for your time and support. I have attached image to illustrate how I want it to look on all screen sizes. Best regards, René
-
Hello! I am using this useful resource https://codepen.io/GreenSock/pen/JjZdPWj to create my custom circle cards slider. I'm triying to spread all the cards around the main circle with a small rotation to get an effect like the image provided, because my cards are overlaping in both sides of the window, but I don't know how to approach this, it would be necessary to animate the rotation of the cards when the animation of the carrousel is executed to keep cards circle. Anyone could help me? Thanks!
-
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..!
-
Dear Coding Wizards, I've reached the limits of my current GSAP knowledge and require your expertise to realize my dream of launching an artwork gallery. The primary challenges I'm facing with my scripts are: Scroll Wheel Issues: Difficulty with implementing smooth navigation for next and previous slides using the scroll wheel. Keyboard Arrow Navigation: Challenges with enabling seamless navigation using keyboard arrows (up and down) to switch between slides. Mobile-Friendliness: I believe my project is mobile-friendly, but I'm not entirely certain. If there are any elements I might have overlooked or opportunities to make the project more contemporary and lightweight, your insights would be highly appreciated. Thank you in advance for your valuable assistance. Warm regards, René
-
Hi Guys, I have a slider here, on desktop autoscrolls, scrubs through on scroll, is draggable & also works with next & prev buttons, but want it to be much simpler on mobile—just draggable and snappable to center. All's working well on desktop, however on mobile the Interia goes crazy and swipes through. I just wasn't sure where I was going wrong with the interia and snap. It's a bit of an amalgamation of a couple of found sliders so could potentially be simplified and tided, but any point in the right direction for interia, draggable and snap would be great. Appreciate the help guys
-
Hello everyone and thanks in advance for those who want to help me. I am new to the GreenSock world and am trying to reproduce a vertical slider as you can see in the CodePen example. However, I cannot understand how to make the text of the first (lorem ipsum) disappear when the second slide appears. I've tried to do this with a simple toggleClass, but it doesn't work and I don't understand where I'm fossilizing. Can you help me? Thank you
-
How to create infinite horizontal sliders with some sliders moving in opposite direction
dupechuks posted a topic in GSAP
Hello, Please I need help recreating this using gsap because i want to have smooth scroll. Every attempt I made using gsap meant that I lost the infite loop effect. I really do not know how or what to do. I went through this demo it did not have an infinite loop and also I did not really understand the code. I would be glad if i could find a solution with helpful explanations so that I learn aswell. -
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
-
Problem with making a timeline that dynamically animates a different element every repetition, with Vue
Sameh_07 posted a topic in GSAP
I'm trying to make a simple slider that animates-in then out one slide after the other according to the currentStep variable, which gets incremented by 1 at the end of every slide, but nonetheless , I end up getting the same slide over and over again and can't figure out why... -
slider All sliders number are showing in one place whenever I come from another tab
Araf Hossain posted a topic in GSAP
I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing_LI-min.thumb.jpg.33e8153522df9f555f232034d112282d.jpg)
-
I have try to make slide image on scroll left to right with change image and change content with fade. 1st and 2nd content fade properly but 3rd and 4th getting wrong. Please help me if you have any idea to solve this issue. Thanks
-
I have a draggable slider/"panner" that is constructed a little differently due to some demands: - It has to work with percentage widths for the slides / flexbox - It has to work with differing slide widths This has worked all right in my solution, but now I'm trying to "loop" the slider and all examples I can find are using a draggable connected to a tween's progress and I'm not able to see how I can make this work in my situation. Any pointers here? I'd suspect I'd have to do some dom manipulation by moving the first slide to the end etc but I'm not really sure where to start. Any and all advice appreciated!
-
I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider = el}> {media && media.map((media, index) => ( <div key={index} className="slideContainer"> <div className="slide"> {media.slide && media.slide.map((slide, index) => ( <div key={index} className="img-wrap"> <Img key={slide.id} fluid={slide.remoteFile.childImageSharp.fluid} /> </div> ))} </div> </div> ))} </div> </section> ) } export default MediaGrid
-
Hello. I need your help. I don't know gsap well yet. But I need to create an animation, and I don’t know how to do it. This is the slider. Can you make it infinity? And also do it on a scroll, but not so as to turn the mouse wheel on the slide. Can smoothly wheel the slider, and when you stop turning, the slide that is more captured is the one that becomes active? I understand I probably want a lot. But I already don’t know what to do. Help me please. Thanks to everyone who will respond. Perhaps there are other options for how you can do this. I will be glad for any help Here is an example site and I want to repeat this slider https://damiankujawa.pl/en
-
I'm looking for a developer to be able to convert this exact slider to React. – https://codepen.io/jeffdfarr/pen/qBOzVwb?editors=1010 Here's what I'm looking for it to do... Auto scroll Ability to be draggable Infinite loop Ideally I'm looking to have this done in a 1-2 weeks.
-
Hi All, I'm having two issues with my current pen: • The draggable bounds don't seem to be working correctly. I'd like them to stop at the min and max. I've tried them as a query-able element or as an object (maxX, minX). • My proxy element is moving and affecting the drag space when it moves. Here's the pen I've been trying to emulate in gsap 3. This one is written in gsap 2: https://codepen.io/GreenSock/pen/JawEyN
-
Hey, I'm back and still lost about onWheel events with React and GSAP (I'm sorry.....). I read a post (here) weeks ago, and I still don't understand. I hope someone can help me... Here's a simple example of what I'm expected to create: a simple slider that can change with the onWheel event with React JS. https://codesandbox.io/s/elegant-voice-8kqcb?file=/src/App.js Perhaps I'm doing wrong, I don't know... When I'm scrolling, the third element appears directly and I don't know why. Thanks a lot in advance
-
Hi there, I am trying to add a next and previous button to the scroll slider (see codepen), so that when you click on next it move to the next slider page, and also maintain the scroll on the slider. I tried to add the below code but did not work <div class="controls"> <button id="prevButton">Prev</button> <button id="nextButton">Next</button> </div> var prevButton = document.querySelector("#prevButton"); var nextButton = document.querySelector("#nextButton"); prevButton.addEventListener("click", function() oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; }); nextButton.addEventListener("click", function() { oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; });
-
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
_LI-min.jpg.963ad853a3c5c0cced6a7dfdd1211e55.jpg)
