How can I set an active/current state for link blocks in Webflow when clicked on? I want to design a website similar to one I found, where the list state changes on scroll. Can someone assist me with this? Thank you.

To set an active/current state for link blocks in Webflow when clicked on, you can use the CMS Collection Lists and the built-in Webflow interactions.

Here's a step-by-step guide on how you can achieve this effect:

1. Structure your content: Start by creating a CMS Collection and adding your list items as CMS Collection Items. Each list item should be wrapped inside a Link Block element.

2. Set up your states: In the Navigator panel, select the Link Block element and navigate to the Element Settings tab. Click on the '+' icon next to the elements to create new states. For example, you can create an "Active" state that will represent the link block's appearance when it is clicked.

3. Design the states: Customize the appearance of each state. You can change the background color, text color, add animations, or any other visual changes you desire. Make sure there's a clear visual distinction between the active state and the other states.

4. Create a click interaction: To trigger the active state when a link block is clicked, select the Link Block element, go to the Interactions panel, and create a new interaction. Choose the "Click" trigger.

5. Add actions: In the interaction panel, click on the '+' icon to add a new action. Select the Link Block element again and choose the "Set Active" action. Choose the active state you created in step 2.

6. Preview and test your design: Preview your website in the Webflow Designer or publish it to a staging URL to see how the active state changes when you click on the link blocks.

To design a website where the list state changes on scroll, you can combine the active state with scroll-based animations. Here's how you can do it:

1. Scroll-triggered animations: In the Interactions panel, create a new scroll trigger animation. Define the trigger point where you want the animation to start, and then add animations to the list items as they come into view.

2. Add scroll interactions to Link Blocks: Similar to step 4 above, create scroll interactions for each Link Block element. For example, you can change the active state as the user scrolls past a certain section or when a specific element comes into view.

3. Customize the active state animation: In the Interaction panel, edit the action where you set the active state. Add animation properties to this action, such as changing the opacity or position of certain elements within the active state.

With these steps, you can create an engaging website where the list state changes on scroll and link blocks have active/current states when clicked on. Remember to preview and test your website to ensure the desired effect is achieved.