Business-Card-Connection/script.js at main · BlockNotes-4515/Business-Card-Connection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var active = 3;

var mncircles = document.querySelectorAll(".mncircle");
var sec = document.querySelectorAll(".sec");

gsap.to(mncircles[active-1], {
    opacity: .5,
})

gsap.to(sec[active-1], {
    opacity: 1,
})

mncircles.forEach(function(val, index) {
    val.addEventListener("click", function() {
        gsap.to("#circle" , {
            rotate: (3-(index+1))*10,
            ease: Expo.easeInOut,
            duration: 1,
        })
        greyout();
        gsap.to(this, {
            opacity: .5
        })
        gsap.to(sec[index], {
            opacity: 1
        })
    })
})

function greyout(){
    gsap.to(mncircles, {
        opacity: .08
    })
    gsap.to(sec, {
        opacity: .4
    });
}

gsap.to("#circle", {
    rotate: 0,
    ease: Expo.easeInOut,
    duration:2,

})