Jump to content
Search Community

Play different timeline instead of reverse()

sum.cumo GmbH test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear community,

 

here is my challenge:

coding an accordion with an icon morphing first then expanding the content-area and finally increasing the contents opacity from 0 to 1 (see Codepen).

At reverse I want the elements to animate in a different order than with tl.reverse(). My reverse order would be: morphing the icon first then decreasing the contents opacity to 0 and ending with the content area closed.

The event I I'm listening to is 'click'.

 

I hope my description is ok (not a native speaker) and that there is a solution to this.

 

Thanks in advance!

Kerstin

See the Pen Reqape by kerpui (@kerpui) on CodePen

Link to comment
Share on other sites

Hi Kerstin,

 

You have pretty much answered your own question. And you have scaffolded your code in your example nearly all completely correct.

 

First I have a question: is there any reason why you are doing a querySelectAll on your toggles? Is this because you plan to have several toggles?

 

As to what you need to do to achieve your desired effect is simply to create the animation you want to play in your 'tlback' and change your click event to something like the following:

 

// This really should be outside your forEach loop
let open = false;

function accordionToggle() {

  // Note the zero inside the method call, to make sure we always start the timeline from its start
  open ? tlback.play(0) : tl.play(0);
  // Toggle the open state to its opposite value
  open = !open;

}

 

  • Like 7
Link to comment
Share on other sites

  • 2 weeks later...

Thank you so much this really helped a lot!

I updated my code and it works like a charm. The only thing I can't explain to myself is why doesn't the icon morph work at first click? Fun fact: the same code does work correctly integrated in my project.

 

Have a nice day

Kerstin

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...