circular animation Circular cards carrousel

[davidsantas]

Hello! I am using this useful resource

See the Pen JjZdPWj by GreenSock (@GreenSock) on CodePen

 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!

 

See the Pen vYPXYZr by pixelmary (@pixelmary) on CodePen

[Rodrigo]

Hi @davidsantas and welcome to the GSAP forums!

 

Thanks for being a Club GSAP member and supporting GSAP!

 

I don't think this particular helper function has that as an option to be honest. You can definitely do that by yourself in the initial setup, but the problem arises as soon as you start changing the elements. The helper function translates the elements from one position to another but then you'd also had to rotate each item in order to get the right effect, as you can see in this demo:

See the Pen PoLGZoM by GreenSock (@GreenSock) on CodePen

 

Maybe a simpler alternative could be to use the MotionPath Plugin and use Draggable with Inertia on the container of the items:

See the Pen BabLjzN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[davidsantas]

1 hour ago, Rodrigo said:

Hi @davidsantas and welcome to the GSAP forums!

 

Thanks for being a Club GSAP member and supporting GSAP!

 

I don't think this particular helper function has that as an option to be honest. You can definitely do that by yourself in the initial setup, but the problem arises as soon as you start changing the elements. The helper function translates the elements from one position to another but then you'd also had to rotate each item in order to get the right effect, as you can see in this demo:

 

 

 

Maybe a simpler alternative could be to use the MotionPath Plugin and use Draggable with Inertia on the container of the items:

 

 

 

Hopefully this helps.

Happy Tweening!

This is a very good approach thanks, it will help me! But in this example i can't imagine how to detect which box is in top of the circle with the class 'active' and  i need more info about how to execute the animation in scroll up and scroll down  like I had in my initial cards carrousel. Any extra info is wellcome!

[Rodrigo]

Hi,

 

Just run some extra custom logic in the snap function:

const boxes = gsap.utils.toArray(".box");
const boxesAmount = boxes.length;
const step = 360 / boxesAmount;
let activeIndex = 0;
let nextIndex;

Draggable.create(".container", {
  type: "rotation",
  inertia: true,
  snap: (endVal) => {
    const snap = gsap.utils.snap(step, endVal);
    const modulus = snap % 360;
    nextIndex = Math.abs((modulus > 0 ? 360 - modulus : modulus) / step);
    return snap;
  },
  onThrowComplete: () => {
    boxes[activeIndex].classList.toggle("active");
    boxes[nextIndex].classList.toggle("active");
    activeIndex = nextIndex;
  },
});

I forked the previous pen:

See the Pen abMmppp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[davidsantas]

Thank you very much, with Scrolltrigger and this solution I can do what I need. However I have use my scroll trigger animation and everything works fine but when I drag the container and then I scroll, the Scrolltrigger animation jumps, and restart the animation of the circle. How can i get a continuos rotating animation? I mean, the scroll animation would start at the same rotation point that the draggable has left the circle without jumps. Is it possible? Do I need a timeline to achieve this?

 

This is my scrolltrigger code:
 

gsap.to(".container", {
  rotation: 30,
  duration: 8,
  scrollTrigger: {
    trigger: ".wrapper",
    start: "-50% center",
    end: "bottom center",
    scrub: true,
    markers: true
  }
});

 

[Rodrigo]

Hi,

 

As far as I can tell, mixing a Draggable rotation instance that has no minimum and maximum rotation, with a ScrollTrigger instance with scrub true is basically impossible. When you have a Draggable instance that allows a user to rotate something without any limit, how can you translate the same to a ScrollTrigger with Scrub? See the problem?

 

Is better to use the onUpdate callback from the ScrollTrigger instance to rotate the element and update the Draggable instance, like this demo:

See the Pen LYaRowR by GreenSock (@GreenSock) on CodePen

 

I didn't had time to update the other demo, but basically everything is there. I hope that tomorrow I will be able to update the element with the boxes to use ScrollTrigger like the demo in this post.

 

Hopefully this helps.

Happy Tweening!

[davidsantas]

It's OK thanks for your support!