Interactions - Is it possible to bind an interaction to CMS data?

Design help Animations & Interactions
1

Hello all,

Here’s a general overview of what I hope to accomplish:

Use of SVG graphics to create a custom fundraising thermometer, I’m using two SVGs. One of them is the thermometer graphic itself, the other is the “mercury” within the thermometer that should rise in correlation with the data within the CMS.

A developer friend of mine linked the client’s fundraising platform API to the Webflow CMS and it is reliably pulling the data, refreshing once every 15 minutes. I’d like to use this dynamic data update to connect to the thermometer graphic created by the designer. Is there a feasible way of accomplishing this through native interactions and the CMS, or will this require custom code?

Let me know if you’d like any additional details…

Here is my public share link: LINK
(how to access public share link)

2

Any ideas here? @Waldo @QA_Brandon @PixelGeek

3

You’d need to find a way to have your thermometer inside of a Dynamic List link to the collection where your data are injected by your developer friend.

Then you can have your interaction fill up a DIV from zero to 100% height. (I suppose that’s what you want to do).

Then use custom code Embed element to set this DIV height using a CMS variable (and possibly the help of CSS Calc).

This way your div height will vary depending on the injected data, and the interaction will fill it up to 100% whatever its size (by growing another div inside from zero to 100% for example)

4

Thank you Vincent, I’ll give this a shot!

1 Like