EN IT
Home About Learn Blog

CMS-Driven Components & Animated Dropdowns in Webflow

Beginner 38:48 webflowcmscomponentsdropdownsanimation

Connect component properties to the CMS in Webflow and build an accessible FAQ with smooth open and close dropdown animations, from rich text fields to the interactions panel.

Watch on YouTube

Key takeaways

  • When a CMS-connected element becomes a component, Webflow auto-creates matching properties and keeps them wired to the CMS — you get dynamic components almost for free.
  • A circle is just a square with fully rounded corners: fix the aspect ratio to square, set object-fit to cover so it isn't distorted, then a 50% border radius does the rest.
  • Use rich text for answers that need real structure (paragraphs, headings, lists) — and fix the heading hierarchy inside it so nested headings become H4/H5, not H1/H2.
  • A dropdown list defaults to absolute positioning, so it overlaps the content below; switching it to static makes it push siblings down, which is the behavior users expect.
  • For a size animation to work, set the list's overflow to hidden and animate height from 0 to auto — and apply the interaction to the class so every dropdown animates at once.

Video chapters

  1. 00:00 Styling the team member cards
  2. 06:52 Turning the cards into component instances
  3. 09:36 The FAQ section + FAQs CMS collection
  4. 14:48 Structuring and styling the dropdown
  5. 21:39 Turning the dropdowns into component instances
  6. 24:18 Crafting the open and close animations
  7. 36:15 Final design tweaks + What’s Next

By the end of this lesson you’ll finish the team section, wire component properties straight to the CMS, and build an FAQ with dropdowns that open and close with a smooth animation. It’s the lesson where components, the CMS, and motion all come together.

Two moments are worth watching for. The first is a small piece of Webflow magic: turn a CMS-connected block into a component and the properties you’d expect to create are already there, still linked to the CMS. The second is the animation — your first real trip into the interactions panel, kept deliberately simple but fully functional.

We also slow down on the details that trip people up: making a CMS image a clean circle, choosing rich text for structured answers, and fixing the positioning quirk that makes a dropdown overlap everything below it.

How it works

Start with the team cards. A circle is just a square with fully rounded corners, and CMS images arrive in all shapes, so the robust recipe is: set the image’s aspect ratio to square (width and height always match), set object-fit: cover (it fills the frame and crops instead of distorting), then set border-radius: 50%. Three steps, any photo, always a circle.

Then the magic. When you turn the CMS-connected card into a component, Webflow auto-creates a property for every connected element, names each one after its CMS field, and keeps the link live — the properties glow purple to show they’re pulling from the CMS. You built the connections once at the element level; Webflow preserves them as component properties for free.

The FAQ reuses all of it in a new context. Answers need real structure — paragraphs, headings, lists — so the answer field is a rich text field, not plain text (and inside it you fix the heading hierarchy so the nested headings become H4/H5 under the section’s H2/H3). The one true gotcha is positioning: a dropdown list is position: absolute by default, so an open list overlaps the dropdowns beneath it. Switch it to static and it rejoins the page flow, pushing siblings down as it expands — exactly what users expect.

For the animation, the key setup is overflow: hidden on the dropdown list so its content is clipped when the height is zero. Using the “dropdown opens” trigger, you animate the list’s height from an initial state of 0 to auto and rotate the arrow icon 180°. The crucial, often-missed step: switch the trigger’s target from Element to Class so every dropdown that shares the class animates, not just the one you built it on. The close animation is just the open one duplicated and reversed. And because Webflow’s native dropdown already closes the previously open item when you open another, you get that polish without building it.

How to use it

  1. Style the cards. Give the item content wrapper padding (1.5em), a background, border-radius, and border; set it to a centered vertical flex column. Turn the image into a circle (square ratio → object-fit: cover → border-radius: 50%) and tidy the name/role spacing and the social-icon gap.
  2. Make the card a component. Select the item content wrapper (not the collection item) and press ⌘/Ctrl + Shift + A. Notice the CMS-linked properties are already created and connected — you’re done.
  3. Set up the FAQ. Build the section structure, add a Section Heading Wrapper instance, then create an “FAQs” collection with a Question (plain text) field and an Answer (rich text) field. Generate sample items and fix the answer’s heading hierarchy (H4/H5).
  4. Build the dropdown. Add a collection list bound to FAQs (set it to a vertical flex column with a gap). Inside a list item, add a Dropdown element; give it width: 100% and rounded borders. Set the toggle text color to inherit, replace the toggle’s text with an H3 bound to the Question field, and replace the dropdown list’s links with a rich text element bound to Answer.
  5. Fix the flow. Change the dropdown list’s position from absolute to static so it pushes content down instead of overlapping it.
  6. Componentize (optional order). Turn the dropdown into a component with Question (text) and Answer (rich text) properties, then link those properties to the CMS fields via the purple icons.
  7. Animate it. On an unlinked instance, set the list’s display to block and overflow: hidden. In the interactions panel (classic), add a “Dropdown opens” trigger → “start an animation”: animate the list’s height to auto (initial state 0) and rotate the arrow 180°, with a duration around 0.3s and an ease-out curve. Switch the trigger target to Class. Duplicate the animation, rename it “Dropdown closes”, remove the initial states, and reverse the values.
  8. Polish. Cap the dropdown width (~700px, display: block, auto side margins), and style the H4/H5 only inside this rich text element using the nested selector so you don’t affect the whole site.

Next up we set up the navbar and use grid and Flexbox together to build the footer.

Resources

Frequently asked questions

How do I connect component properties to CMS fields in Webflow?
Link the elements to CMS fields first, then turn the block into a component. Webflow automatically creates a property for each connected element, names it after the field, and keeps the connection live — so the component stays dynamic with no extra setup.
How do I make a CMS image a perfect circle in Webflow?
Set the image's aspect ratio to square so width and height always match, set object-fit to cover so it fills the frame without distortion, then apply a border radius of 50%. That works no matter what proportions the original photo has.
Why does my open dropdown cover the content below it?
The dropdown list is absolutely positioned by default, which removes it from the page flow so it overlaps siblings. Change its position to static and it will push the elements below it down as it expands instead.
How do I animate a Webflow dropdown open and closed?
Give the dropdown list overflow: hidden, then use the 'dropdown opens' trigger to animate its height from an initial 0 to auto (add a rotate action for the arrow). Apply the interaction to the class so every dropdown shares it, then duplicate and reverse it for the close animation.

← Back to the course