Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate tag <details> ?

Go to solution Solved by Jonathan,

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

  • Solution

Hello Aleksei and Welcome to the GreenSock Forum!


The browser support for the <details> and <summary> element is very limited as far as using a custom animation. Only Chrome supports simple CSS transitions on the animation of open and close states, but looks like utter garbage when animating back to a closed state. Firefox and MS Edge do not support animation on the <details> element yet.


To access the open and close state of the <details> and summary> element you have to listen for the toggle event based on the open attribute of the <details> element.

See the Pen JEovWr by jonathan (@jonathan) on CodePen



There you might be able to prevent default and add your own custom JS animation. But I doubt that will work since the browser wants full control of the open and close states.


The effect of show and hide is natively done in the browser, so its not very widely supported in the spec. And

See the Pen gbJvy by morewry (@morewry) on CodePen

when animated with CSS transitions and CSS animations.




Firefox, IE, and MS Edge only allow none animatable click behavior. Chrome allows transitions

See the Pen gbJvy by morewry (@morewry) on CodePen

and not a very pleasant being very buggy when animating back in.


You could just stick to not using it if you need it to animate.Since it will only do a simple show and hide with no interpolation. You can just animate a different DOM element since the <details> element only works natively.


Here is simple height toggle using other DOM element:


See the Pen ggbegG by jonathan (@jonathan) on CodePen


if you want a fancy shmancy animation effect then don't use the <details> element. But if you want just a simple show hide toggle with no animation, since animating this element even with CSS is horrible in Chrome. Then use as is, but if you want full control then just animate with JS and don't use this element.



  • Like 3
Link to comment
Share on other sites

Thanks for the detailed answer, Jonathan!

Link to comment
Share on other sites

Hi Aleksel,


This was my first time even learning about details. So thanks for posting about it. All I could gather was that the browser was natively handling it and there was really no CSS properties evident for GSAP to touch.


Awesome to have Jonathan here to teach us all a thing or two!

  • Like 4
Link to comment
Share on other sites

Whew! I thought I was the only one that hadn't heard about details yet.  :ph34r: Very interesting.


That's one of the many perks of hanging out here. With people like Sir Jonathan on the case, you always pick up new information even if it's not directly related to GSAP. 


Thanks Jonathan. I'll drop my tuition money into your tip jar. :)

  • Like 2
Link to comment
Share on other sites

Yeah, I used to read HTML5 manuals recently. And started discovering many interesting things :)

Link to comment
Share on other sites

The <details> and <summary> HTML5 elements were introduced around late 2010 but only Chrome supported it, so you had to use a polyfill to support other browsers. Very useful but has very primitive show and hide ;)

  • Like 1
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.