Still working my way through learning the new GSAP engine in Webflow and I have ran into a problem. I am working to create a FAQ accordion, and for whatever reason the answer just isn’t wanting to expand the way it is supposed to (“faq-answer”)
I have tried setting the Height to go from 0 → 100, as well as just → 100 with no from, and it doesn’t seem to be working regardless. The answer will show on page load despite it being set to 0px in the designer.
Let me know if you have any ideas on how to fix this!
To ensure your custom accordions work properly in Webflow, here’s how to set them up correctly:
The parent dropdown element should have its overflow set to ‘hidden’ and position set to ‘static’ rather than ‘absolute’. When implementing the animation, use ‘auto’ for the height value to automatically match your content’s size. Remember to avoid using CSS transitions alongside GSAP animations, as this can cause conflicts in the animation behavior.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Unfortunately IX3 isn’t my center of gravity- I’ve played with it some, but I find IX2 more familiar in terms of initial state, first and second click handling, etc. and the UX overall.
I’m sure there’s a way… hopefully someone here can have a look at your setup.
I think I was finally able to get it to almost behave the way that I want it.
The only issue I am facing now is that the “show” animation isn’t smooth. When you click it it just appears, whereas the “hide” animation has the fade and smooth height on it.
When I posted that earlier I attached the read only link. Have no idea why it didn’t work.