GSAP to manage circle svg controller for Swiper carousel

[MMJ]

Hello everyone!

 

I'm trying to connect a circle shaped blue svg (but shown as a semicircle for design needs) with 4 control dots to a carousel made with the Swiper.js library, so that this semicircle (in HTML it is under the ROUNDED SLIDER comment), can act as a "controller" draggable to the carousel.

 

What I need to do is:

 

- The circle is only half visible and each point must be connected to a slide of the carousel, so that by dragging it, the swiper "responds" showing the slide connected to the dot of the blue semicircle positioned at the top of the semicircle. 

- The slides could be more than 4 (I have been having nightmares for weeks ...). 

- Each point will therefore correspond to a slide. 

- When I'm on the first slide I shouldn't be able to rotate the semicircle clockwise and when I'm on the last slide I shouldn't be able to rotate clockwise. 

- It shouldn't be possible to rotate the semicircle more than 90 degrees at a time. 

- If I rotate the semicircle by less than 90 degrees the movement should complete itself (the blue dot is “magnetically” moved down) to get to the next slide (insomnia and migraine associated with this point, with obvious anxiety attacks ...) 

 

What I have thought and done so far is:

 

1. I’ve created the carousel and make its Init (the css is really basic and only manage position of elements in the page).

 1.1 when the slide changes I’ve managed to "take" the year and the title using the data attribute, but I’m not able to create the logic to assign to each semicircle dot the correct title/year.

// ANCHOR Slider INIT
let swiperHistory = new Swiper(".j_init_history_slider", {
    slidesPerView: 1,
    spaceBetween: 60,
    centeredSlides: true,
    loop: true,
    grabCursor: true, //OR mousewheel
    mousewheel: false,
    autoplay: false,
    autoplayspeed: 6000,
    autoplay: {
        delay: 5000,
        disableOnInteraction: true
    },

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },

    on: {
        //slideChange OR realIndexChange
        slideChange: function () {
            // ANCHOR get current slide index and text for yeas and title
            let index = this.realIndex + 1; // slide 1 => slides[1]

            // ANCHOR get the slide years
            let years = this.slides[index].children[0].dataset.years;

            // ANCHOR get the slide title
            let title = this.slides[index].children[1].dataset.title;

            // ANCHOR give to each svg circle points the correct year an title
            // Maybe I must create an array and then loop titles and years...or assign it manually to each points or what??

            northYear.textContent = years;
            northTitle.textContent = title;
        }
    }
});

2. I’ve identified the 4 points (calling them temporarily, for easier recognition, with the capital points north, south, east and west, they must contain the data "title" and "year" of the swiper's slides).

 

//ANCHOR Text (years) over the circle points
let northYear = document.getElementById("north_year");
let eastYear = document.getElementById("east_year");
let southYear = document.getElementById("south_year");
let westYear = document.getElementById("west_year");

//ANCHOR Text (title) over the circle points
let northTitle = document.getElementById("north_title");
let eastTitle = document.getElementById("east_title");
let southTitle = document.getElementById("south_title");
let westTitle = document.getElementById("west_title");

3. using the gsap draggable I’ve created some control variables for the rotation for the 90 degrees of the semicircle svg dots 

//ANCHOR Variables for circle animation
let relativeDegree = 0;
let checkDegree = 0;
let check90 = 0;
let globalrotation = 0;

4. I’ve created two temporary control buttons for the rotation of the 4 cardinal dots of the semicircle and the dots rotate correctly (but there is something strange with the titles that seem to change or rotate in an uncoordinated way ... I cannot understand which is the problem), but these buttons are not necessary for the final project, they will be removed.

 

5. the semicircle works on drag (even if the first click on the dot seems to be blocked), but when you drag the semicircle, the dots are slipped out from time to time (and it seems to me more each time) from their own "central meridian" and I don't understand what I'm doing wrong

 

8. onRelease I wanted to make sure that if I rotate the semicircle by less than 90 degrees the movement should complete itself to get to the next slide, but it doesn't work, it behaves really weird, there is definitely something I'm doing wrong with its logic (in fact the code is currently commented).

 

9. TODO ... connect the swiper to the drag ...
for this point I was completely confused and I can't go on (in the code there are some attempts that don't work, also because I have been using gsap for a short time and I don't I feel very experienced), because I miss the fundamental part where I connect the slides to the semicircle, where I take the titles from the swiper and assign them to the right dot, and I can't "adjust" the drag of the semicircle correctly.

I have been stuck for weeks, for me it is a really complex job, I was very doubtful about asking for help, but at this point, apologizing if this post is incorrect, wrong or not relevant with the forum (in case I remove it immediately!), I really need help.

 

I immediately thank anyone who can and wants to intervene in any way. Thank you...!

 

See the Pen zYWqNYY?editors=0111 by chiaralyn (@chiaralyn) on CodePen

[alig01]

Since you obviously went through the trouble to solve the problem yourself, I'd like to try to steer you in the right direction. 

See the Pen bGMyoMe by alig01 (@alig01) on CodePen

 

I have provided an alternative implementation in case you don't want to purchase a membership yet.

 

[Claire]

On 10/18/2022 at 9:59 PM, alig01 said:

Since you obviously went through the trouble to solve the problem yourself, I'd like to try to steer you in the right direction. 

 

 

 

I have provided an alternative implementation in case you don't want to purchase a membership yet.

 

Thank you very much for your help @alig01, which was very useful, and allowed us to work and above all to understand what we were doing wrong.
Now it works exactly as expected and now we will do some more small implementations (we need the circle to move when user change slide dragging on slides or uses the next-prev arrow...)! We have been working on this for a long time without success, but thanks to you and your perfect example we can now move on !! Thank you for your commitment and above all for your patience. You don't know how helpful you've been to me and @MMJ. As soon as it's done I'll show you the finished example, thank you so much again and again!

[MMJ]

Thank you so much for your help! Your intervention was proverbial, the let i = index% 4; it's a brilliant solution. Thank you so much.💚