Hello guys, i need some help for a "simple" script that's driving me crazy...
I've put an example on my code on codepen:
https://codepen.io/SaverioGarzi/pen/wvMLYMJ
The example is simulating the final results, but the code is messy, i would like to have a Timeline, instead of a simple tween, i have to add more feature with the click... The timeline should be play when i click on the accordion head, and reversing when i click again on the same accordion... But it shoud also reverse when i click on another accordion... I can't figure out the logic.
This is what i'm using now:
var togg = document.getElementsByClassName("service-card");
var i;
for (i = 0; i < togg.length; i++) {
togg[i].addEventListener("click", function() {
$('.service-card').not(this).removeClass('service-active');
var $this = $(this),
icon_plus = document.querySelectorAll('#services-plus'),
actual_icon_plus = $this.find('svg#services-plus');
gsap
.to(icon_plus, {
rotate:0,
duration:1,
ease: "elastic.inOut(1, 0.5)"
});
this.classList.toggle("service-active");
if($(this).hasClass("service-active")){
gsap
.to(actual_icon_plus, {
rotate:45,
duration:1,
ease: "elastic.inOut(1, 0.5)"
});
} else {
}
});
}
i've searched in the forum, and i found this snippet,
tl.reversed() ? tl.play() : tl.reverse();
but i was not able to implement it...
Can someone give me a hand with that?
Thanks
Petar