aydinvivik

I missed it, I did it

I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side? Like this;

I think I did but I'm not sure if I did it right, can you confirm? First I averaged the total number of slides with progress after the animation was completed. onComplete: function () { setActiveSlide(Math.floor(animation.progress() * numSlides)); } After that there was a problem that the last slide was taking the total slide value, I solved this with -1 if the index is equal to the total slide value. function setActiveSlide(index) { if (currentIndex !== index) { currentIndex = index === numSlides ? index - 1 : index; activeSlideInfo.innerText = currentIndex; } } This is how it works now, but I'm not sure if my method is correct. https://codepen.io/vivik/pen/YzdmXwd

@Rodrigo I have taken a lot of your time on this subject but I am in the process of learning, I have one last problem, I can't get the activeIndex correctly. https://codepen.io/vivik/pen/YzdmXwd

Thank you @mvaneijgen

Thank you for your support

Thank you @Rodrigo now I understand, only the animation is resetting but not back to the beginning, can I make it happen?

Hello, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning. When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work. const isMobile = window.matchMedia("(max-width: 768px)"); function resize() { //... if (isMobile.matches) { animation.progress(0).kill(); draggable.startProgress = animation.progress(); } } Codepen demo: https://codepen.io/vivik/pen/YzdmXwd

Hello again, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning. When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work. const isMobile = window.matchMedia("(max-width: 768px)"); function resize() { //... if (isMobile.matches) { animation.progress(0).kill(); draggable.startProgress = animation.progress(); } } Codepen demo: https://codepen.io/vivik/pen/YzdmXwd

Thank you very much for your feedback.

Yes, that's great, thank you. But how do I loop it. I mean, can I switch back to slide 1 after slide 10?

Hello, I want to use a slider made with Draggable Plugin from the examples in the forum with a few modifications. But I have a problem, if I drag the active slide halfway, it skips the next slide and moves to the next slide. As you can see in the codepen example below, if I drag the slide number 1 halfway, it goes to 3 when it should go to 2. https://codepen.io/vivik/pen/qBLzxVg

That's exactly what I want, thank you very much.

Thank you for your feedback and yes @PointC's example is the one I found but I have a problem with it. If I change the location of the boxes, the buttons run different boxes from the same index. You can see it in the example below. https://codepen.io/vivik/pen/OJrYVqx

Hello, I have 2 divs and 2 buttons to run them. I can create separate timelines for these two animations, but I don't want to rewrite the same code for the same animation. How can I make it work as 2 different divs and 2 different buttons over a single animation? Codepen demo is below. When I searched in the forum I found a similar example, but in that example it is run from the obj index, but since the location of the buttons and divs can change in me, this time the wrong animations can work with the wrong index. How can I make it work with data-attribute or more differently with button mapping? https://codepen.io/vivik/pen/OJrYVMX

thank you how did I miss this

I'm not sure exactly how to see what I mean in codepen because after refreshing the page codepen always starts at the top of the page. This is a codepen demo; https://codepen.io/vivik/pen/abQYYdr

Hello, I'm trying to create an animation while scrolling with ScrollTrigger.batch(), but I encountered a small problem. If I refresh at the bottom of the page, the viewport elements become visible very late because they wait for the animations at the top to finish. When I look at the forum, it is recommended to use ScrollTrigger.config({limitCallbacks: true}); but this time, when I scroll the page up, the animations at the top do not work ? What am I doing wrong ? My JS Code is as follows; ScrollTrigger.config({limitCallbacks: true}); ScrollTrigger.batch(".animation-item", { once: true, onEnter: elements => { gsap.to(elements, { duration: .5, opacity: 1, x: 0, y: 0, stagger: 0.05, }) } });

Thank you very much, you are wonderful.

Hello, I use the Observer Api to animate the visibility of the posts on the viewport. I set 'itemLoad = 0' as the initial value, and I increment it every time it appears on the screen. But I have a problem ! Each item that appears on the screen increases the value of 'itemLoad'. But I want the value to increase again every time the item appears. How can I reset the delay time (itemLoad) whenever it is visible?

Thank you.

How do I rotate the text around itself when I scroll down the page ? I also need to adjust the rotation speed according to the page scroll speed. Like this : https://www.craftedbygc.com/

Thank you.

Hi, as on the link below, when the mouse hovers over the link an image appears and starts to follow the direction of the mouse. How can i accomplish the same effect ? Thanks in advance. sample site: http://www.saramarandi.com/

Thank you @OSUblake I will try to learn pixi.