Search the Community

I'm using this slider from an other gsap question, however I would like to add buttons to go to next and prev slide. However I'm not totally aware in how can add this functionality. I've been looking on "startDrag()" method but didn't get it. Can someone help me with that?

I need to create this Slider with GSAP free. please help me

Hello, I would like to control a video frame by frame via a slider. As It is a short video, my idea was to embed it in a sprite sheet and then move it along a slider. My Sprite sheet is 11*10 and the size of each 300x250. I found this great CodePen: http://codepen.io/astrogastro/pen/Cvidl Which basically do what I am looking for (just need to add a slider rather than a mouse drag and it is all good) However, The sprite sheet used was on 1 line only and I cannot do that as I would end up with a 31000px jpeg, which I guess is not good. How can I modify the code pen to force the sprite to go to the line every 10*300px? Sorry if it is a little bit confusing, I am not familiar with JS, I just want to show the front end, the type of animation I am looking for. Cheers Nico

Hi boys, I'm using Gsap for almost a year and I love it. i finished a new website, with my first draggable slider. The problem with the slider (is a fullscreen one), is that I can't scroll down in mobile. You can try to scroll simulating a phone with the "Togle device toolbar" from Chrome dev tools. Of course is possible with the mouse, but not dragging. Any idea? Thanks a lot!! https://dominiotemporal.com.ar/perifa/ My slider config (taken from an answer in this forum) var slideDelay = 6; var slideDuration = .3; var slides = document.querySelectorAll(".slide"); var prevButton = document.querySelector("#home-slider-next"); var nextButton = document.querySelector("#home-slider-prev"); let slideButtonContainer = document.querySelector(".home-slider-nav"); var numSlides = slides.length; for (var i = 0; i < numSlides; i++) { gsap.set(slides[i], { xPercent: i * 100 }); } var timer = gsap.delayedCall(slideDelay, autoPlay); var animation = gsap.to(slides, { duration: 1, xPercent: "+=" + (numSlides * 100), ease: "none", paused: true, repeat: -1, modifiers: { xPercent: gsap.utils.wrap(-100, (numSlides - 1) * 100) } }); var proxy = document.createElement("div"); gsap.set(proxy, { x: 0 }); var slideAnimation = gsap.to({}, {duration: 0.1}); var slideWidth = 0; var wrapWidth = 0; resize(); var draggable = new Draggable(proxy, { trigger: ".slides-container", throwProps: true, onPress: updateDraggable, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { x: gsap.utils.snap(slideWidth) } }); window.addEventListener("resize", resize); prevButton.addEventListener("click", function() { animateSlides(1); }); nextButton.addEventListener("click", function() { animateSlides(-1); }); function updateDraggable() { timer.restart(true); slideAnimation.kill(); this.update(); } function animateSlides(direction) { timer.restart(true); slideAnimation.kill(); var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth); slideAnimation = gsap.to(proxy, { duration: slideDuration, x: x, onUpdate: updateProgress }); } function autoPlay() { if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) { timer.restart(true); } else { animateSlides(-1); } } function updateProgress() { animation.progress(gsap.utils.wrap(0, 1, gsap.getProperty(proxy, "x") / wrapWidth)); } function resize() { var norm = (gsap.getProperty(proxy, "x") / wrapWidth) || 0; slideWidth = slides[0].offsetWidth; wrapWidth = slideWidth * numSlides; gsap.set(proxy, { x: norm * wrapWidth }); animateSlides(0); slideAnimation.progress(1); } function snapX(x) { return Math.round(x / slideWidth) * slideWidth; }

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

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.

Hello folk i am trying to do like this slider and i make the base html, but i need your help of how i can make this animation , like first revele animation and those scroll, if there is any example that will be great, https://grege-interieurs.com/

Hello! First of all, thank you for everything related to Gsap, you guys are great. Second, I came with a little problem, I created a carousel using gsap and the progress is controlled with draggable. The thing is that it works great in a project I created using Vue.js but when I built it using only javascript it does not work properly. The actual problem is that it does not snap as the one created with Vue. This is the codepen, I commented out liveSnap, so you can see how it works but if you uncommented liveSnap you will see the problem. https://codepen.io/maxrpark/pen/ZEvmEJp I am also sharing a gif of the one I made with Vue, to show how is supposed to work. Many thanks in advance Max.

Hello , i am sorry to make full slider circular , i found a good example on this amazing forum , but i don't have too much experience to make it alone and i need to under stand it , so i need some one to help me all i want the same code pen but i want to rotate circle with drag mouse and the circle have a infint rotate then if i have a buttons like pre and next but for category , like if i press a fruit button the number change to fruit i know that is bad but i need some help thank you

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

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

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

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. Ran into a problem. I am trying to animate wheel like draggable. function is "slideAnim". Can you tell me what I'm doing wrong? Thanks .

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.

Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving

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 guys, This is my first time working with gsap and I'm running into an issue with my slider. I've created this slider, now it's starting on <div class="first"> on the left. What I'd like to do is to center the slider on <div class="third"> on render. I'd appreciate your help

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

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