[Text Carousel Flickering Issue]

I observed the flickering you point to and noticed that it occurs randomly in terms of timeline repetitions, but definitely after a full timeline repetition has occurred — right before button 1 appears. I tried to use the property refreshOnRepeat: true and it seems this makes your animation work much better.

[ScrollTrigger and Draggable - possible conflict]

Jack, thanks a lot for your help! Both problems are solved. I really appreciate your quick response and a very detailed explanation.

[ScrollTrigger and Draggable - possible conflict]

Hi!

I can't figure out how to solve two problems. 

1. I use ScrollTrigger to pin top elements of each section during scrolling. Everything is ok until the window width is less than 600px or something. Top elements kind of jump out from their container.

2. If I turn on Draggable then ScrollTrigger works incorrectly at all. It looks like there is a conflict between ScrollTrigger and Draggable.

Thanks in advance for your help!

See the Pen vYvwMMM?editors=0011 by inteltone (@inteltone) on CodePen

[Two draggable synchronized elements and inertia property]

6 hours ago, Rodrigo said:

You were missing the onThrowUpdate callback to run the same logic you already have in your onDrag callback

Rodrigo, thanks a lot for your quick response! It is exactly what I looked for. Your help is priceless!

[Two draggable synchronized elements and inertia property]

Hi!

I am working on a project in which there are two elements: carousel and slider. They are draggable. While dragging any of them their synchronization is ok. But after turning on the inertia property a problem arises. Their synchronization is not that good any more. How to fix that?

Thanks in advance for your help!

See the Pen vYvbZvM?editors=0010 by inteltone (@inteltone) on CodePen

[GSAP Slider/Carousel, Next and Previous Buttons]

@GreenSock You are right. I am a beginner so sometimes I can consider things in the wrong way((

Thanks for your help!

[GSAP Slider/Carousel, Next and Previous Buttons]

I think I solved my problem with the slider. Now the slider works the way I wanted, but the solution in CSS-code itself is not as beautiful as I would like. Just look at the class "box" in the CSS panel. The solution of the problem is based in general on CSS. Still, it seems to me that accounting for gaps between slides should largely be implemented through a function horizontalLoop in JS.

See the Pen jOQgbJw?editors=0100 by Valeriy-Medvedev (@Valeriy-Medvedev) on CodePen

Thanks to everyone who helped me!

[GSAP Slider/Carousel, Next and Previous Buttons]

@mvaneijgen Please note that the last slide in the row is only partially visible. This is the only problem for me that I can't solve. And I don't think it can be solved with CSS.

[GSAP Slider/Carousel, Next and Previous Buttons]

@mvaneijgen Thank you for your response.
You are absolutely right - it is much more productive and useful to write the code yourself, look at what comes out of it, and so on.
But I'm not too advanced in JS programming. I am just learning. This slider example is almost exactly what I need at the moment. I tried to understand its code, but so far it is too complicated for me, so I turned to this forum for help. The only thing that I lack in it is that the slides are shown in full when there are gaps and the last one among visible is not cut off.
I think that if such an adjustment was added to horizontalLoop function, then it would only benefit from this. But that's my personal opinion.
GSAP is just great! I started working with it and am very satisfied. Many thanks to the creators!

[GSAP Slider/Carousel, Next and Previous Buttons]

Thanks for your quick response! But is it possible to make all the slides that are visible to be visible in their full width? The last visible slide in your example is shown only partly.

[GSAP Slider/Carousel, Next and Previous Buttons]

On 12/15/2021 at 7:04 PM, PointC said:

hmmm... maybe I'm not understanding, but I think the helper function would work for that. I've forked that example and switched it to go forward/backwards 5 at a time.

 

This function that you pointed out to is very helpful indeed! But what about adding gaps between slides? How to do that? And slides have to remain responsive as before. It's a common thing these days these gaps between slides!

[GSAP Slider/Carousel, Next and Previous Buttons]

@PointC, This function that you pointed out to is very helpful indeed! But what about adding gaps between slides? How to do that? And slides have to remain responsive as before. It's a common thing these days these gaps between slides!