Jump to content
Search Community

Accordion Toggle on click, reverse animation

PetarHolland test
Moderator Tag

Recommended Posts

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 

 

 

 

 

 

 

See the Pen wvMLYMJ by SaverioGarzi (@SaverioGarzi) on CodePen

Link to comment
Share on other sites

Hey Petar and welcome to the GreenSock forums. 

 

I highly recommend setting up your animation beforehand and using control methods (like the snippet that you copied) because this will prevent logical errors and is more performant. We talk more about how to do that in the most common GSAP mistakes article:

 

Another mistake is that you can't have multiple elements with the same ID. Use a class instead.

 

I'd set it up along the lines of this:

See the Pen qBbzQdN?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Thank you for the nice welcome, and thanks for the help...

The article was full of nice inspiration and resources 😊 Definitely a more clean and nice approach than mine! 

 

Just another info, what if instead of this, i would like to add a full timeline to manage more animation based on the click? 

togg.anim = gsap.to(icon_plus, {
    rotate: 45,
    duration: 1,
    ease: "elastic.inOut(1, 0.5)",
    paused: true
  });

 

Why togg.anim? 

And i just noticed, the animation just trigger once if i click multiple times on the same accordion! It's caused by the i index number??

 

Thanks again,

Petar

Link to comment
Share on other sites

5 hours ago, PetarHolland said:

what if instead of this, i would like to add a full timeline to manage more animation based on the click? 

Try it out and see :) 

 

5 hours ago, PetarHolland said:

Why togg.anim? 

I find it more convenient to attach a variable reference to the animation to the elements themselves (as opposed to a standalone array) in cases like this.

 

5 hours ago, PetarHolland said:

i just noticed, the animation just trigger once if i click multiple times on the same accordion!

Good catch, I fixed the logic so that shouldn't happen any longer.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...