Community forum for knowledge and support

Updated last year

Sticky feature titles with sliding behavior

At a glance

The community member is interested in learning how a specific component was made, particularly the interaction where the titles "features 1,2,3" are stickied to the top until the end of the parent section, and then slide up without feature 3 covering the rest of the features. They noticed that the Webflow project has invisible anchor links added alongside the stickiness of the feature cards, and they want to understand how this works.

In the comments, another community member suggests learning this together and mentions they have built something similar using GSAP, but without the sticky functionality. Another community member found a way to achieve this without anchor links, by adding margin-bottom intervals between the cards, and provides a reference video. However, they note that this approach has some UI issues when there are 4 cards, as the cards are dynamic.

There is no explicitly marked answer in the comments.

Useful resources

Hi all, not sure which channel to leave this in. I’m interested to learn how this component was made. I want to use a similar interaction for my build, but not necessarily this layout:

  • the titles “features 1,2,3” are stickied to the top until the end of the parent section
  • the titles then slide up without feature 3 covering the rest of the features (different behaviour than other relume “card” components with similar interactions)

In the Webflow project, I see there are invisible anchor links added alongside the stickyness of the feature cards. How does this work?

R
M
J
4 comments

Hey josh let's learn this together, i have built something like this using gsap earlier (no sticky)

interested / following*

found out how to do this without anchor links!

just need to add margin-bottom intervals between the cards!

Reference:
https://www.youtube.com/watch?v=rxU88dVJk2U&pp=ygUVc3RhY2tpbmcgY2FyZCB3ZWJmbG93

Add a reply
Sign up and join the conversation on Slack