[Circular Carousel/Slider]

27 minutes ago, aydinvivik said:

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 missed it, I did it

[Circular Carousel/Slider]

On 12/7/2021 at 10:32 AM, OSUblake said:

Hi tracta,

 

You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline.

 

 

 

 

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;

[Draggable slider dragging problem]

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.

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[Draggable slider dragging problem]

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

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[How can I reset the animation when the browser resizes (Mobile/Tablet).]

Thank you @mvaneijgen

[Draggable slider dragging problem]

Thank you for your support

[Draggable slider dragging problem]

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

[How can I reset the animation when the browser resizes (Mobile/Tablet).]

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:

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[Draggable slider dragging problem]

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:

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[Draggable slider dragging problem]

Thank you very much for your feedback.

[Draggable slider dragging problem]

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

[Draggable slider dragging problem]

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.

 

 

 

See the Pen qBLzxVg by vivik (@vivik) on CodePen

[How can I play one animation and reverse the other animation?]

3 minutes ago, Carl said:

Each button has a data-target attribute which is the id of the element it should animate

 

 

 

 

<div class="targets">
    <div class="box blue" id="box3">3</div>
    <div class="box red" id="box1">1</div>
    <div class="box orange" id="box4">4</div>
    <div class="box purple" id="box5">5</div>
    <div class="box green" id="box2">2</div>
  </div>
  <div class="buttons">
    <button data-target="#box5">5</button>
    <button data-target="#box1">1</button>
    <button data-target="#box2">2</button>
    <button data-target="#box4">4</button>
    <button data-target="#box3">3</button>
  </div>

The index or order of elements no longer has any importance.

 

hope this helps

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

[How can I play one animation and reverse the other animation?]

7 minutes ago, Carl said:

the trick is to keep track of the active item or active animation in a variable.

 

in my demo below you will see that every time you click on a pill shape the currently expanded item closes

 

 

 

 

this demo from @PointC looks pretty close to what you are doing as well

 

 

 

 

 

 

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.

 

See the Pen OJrYVqx by vivik (@vivik) on CodePen

[How can I play one animation and reverse the other animation?]

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?

 

See the Pen OJrYVMX by vivik (@vivik) on CodePen

[ScrollTrigger - Scroll up with scroll trigger batch does not work]

4 hours ago, Rodrigo said:

Hi,

 

It's all about using the onEnter, onEnterBack, onLeave, and onLeaveBack callbacks correctly as shown in this example:

 

 

 

Hopefully this helps.

Happy Tweening!

 

thank you how did I miss this

[ScrollTrigger - Scroll up with scroll trigger batch does not work]

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;

 

See the Pen abQYYdr by vivik (@vivik) on CodePen

[ScrollTrigger - Scroll up with scroll trigger batch does not work]

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,
    })
  }
});

 

[IntersectionObserver Stagger element with delay time.]

Thank you very much, you are wonderful.

[IntersectionObserver Stagger element with delay time.]

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?

See the Pen OJPXBxY by vivik (@vivik) on CodePen

[Rotate text when scrolling pages]

Thank you.

[Rotate text when scrolling pages]

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/

 

[How to make mouse chasing image on link hover ?]

Thank you.

[How to make mouse chasing image on link hover ?]

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/

[Photomotion style parallax]

On 8/2/2018 at 2:30 PM, OSUblake said:

 

 

That effect is not easy. Do you know any WebGL or related libraries like PixiJS or Three.js? If not, you should first get an understanding of the rendering process.

 

Maybe start out with something simple like animating a displacement map.

 

PixiJS transitions...

 

three.js transitions...

https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

 

 

Thank you @OSUblake I will try to learn pixi.