The <details> animation tag does not animate correctly on closing

[Diolix]

Hello

 

I'm trying to animate tag <details> and it works perfectly on opening, but when I close it the animation is not displayed, it closes right away.

 

    document.querySelectorAll('details').forEach(detail => {
      const summary = detail.querySelector('summary');
      const content = detail.querySelector('.content');

      if (summary == null) return;
      if (content == null) return;

      const contentHeight = content.scrollHeight;

      summary.addEventListener('click', () => {
        if (detail.open) {
          // Closing animation
          gsap.fromTo(content,
            { height: contentHeight, opacity: 1 },
            { height: 0, opacity: 0, duration: 1},
          );
        } else {
          // Opening animation
          gsap.fromTo(content,
            { height: 0, opacity: 0 },
            { height: contentHeight, opacity: 1, duration: 1 }
          );
        }
      });
    });
  }

    <details>
      <summary>a title</summary>
      <div class="content">
        <p>a text</p>
      </div>
    </details>

thank you so much for your help

[Rodrigo]

Hi,

 

Without a minimal demo is really hard for us to find any issues. The only thing I can think of is that you're working with a specific UI framework/library like Vue, Svelte or React and have conditional rendering or something like that?

 

Also if you just want to animate the same properties back and forth, is better to just toggle the Tween/Timeline as shown in this demo:

See the Pen GReGMje by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Diolix]

Hello @Rodrigo

 

Thank you for trying to help me. I'm under Angular vs18

 

Here is the demo

Gsap Angular Demo

 

Thanks

[Rodrigo]

Hi,

 

I would suggest something like this:

gsap.set(content, {
  height: 0,
  opacity: 0,
});
const t = gsap.to(content, {
  height: "auto",
  opacity: 1,
  duration: 1,
  ease: "power1.inOut",
}).reverse();

summary.addEventListener('click', () => {
  console.log(detail.open);
  t.reversed(!detail.open);
});

Unfortunately we can't fork your demo, because we need special permissions to clone the git repository. We understand that creating a new demo with that approach is simpler and easier, but we can't really test any changes made to the code. I'd suggest you to start with a blank Angular project in Stackblitz and add your code to it, so we can fork that demo.

 

This is the simplest approach to creating an accordion-like element with GSAP:

See the Pen WNmjYYM by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Diolix]

Hello
Thank you for your help
I think that now you should be able to modify the code Angular Demo

[Diolix]

Hello @Rodrigo

 

I see in my code and your code, when I inspect the code, the effect is played in the code but not on the screen.

 

I hope you understand me

 

 

 

Thank you for your help

[Rodrigo]

Hi,

 

I think this is more related to the way the details element works natively on browsers, rather than a GSAP issue. I forked your demo and instead of using details I just used a regular div element and it seems to work as expected:

https://stackblitz.com/edit/stackblitz-starters-lx942g?file=src%2Fglobal_styles.css,src%2Fmain.ts

 

Hopefully this helps.

Happy Tweening!