Derive margin and position values from CMS fields

Design help Custom code
1

I am trying to derive my margin-bottom and top position values from my CMS fields in my CMS item list. The goal is to mimic the same scrolling interaction as shown in the stacking cards above the CMS collection where the cards have different sticky stop points to have an offset and see the top of the previous cards. I am not sure how call the CMS fields and have them dynamically populate the margin-bottom and top position values for each different card.

Here is my site Read-Only: Webflow - Scott's Site

2

Rather than pushing the style into the CMS, I’d just use positions to manage that card overlap effect.

Something like…

<style>
.stack-wrapper.w-dyn-items > *:nth-child(1) {
  top: 5rem;
}
.stack-wrapper.w-dyn-items > *:nth-child(2) {
  top: 8rem;
}
.stack-wrapper.w-dyn-items > *:nth-child(3) {
  top: 11rem;
}
.stack-wrapper.w-dyn-items > *:nth-child(4) {
  top: 14rem;
}
.stack-wrapper.w-dyn-items > *:nth-child(5) {
  top: 17rem;
}
</style>

Follow the progression to create as many as you need.

Unfortunately I don’t think CSS has a feature yet to use element position as part of calc, so the progression is manual.

1 Like
3

That works great thanks!

1 Like