How can I make an element change color simultaneously in Webflow using a scroll into view interaction? Currently, the element only changes color when scrolling down and not when scrolling up.

To make an element change color simultaneously on both scroll up and scroll down in Webflow using a scroll into view interaction, you can follow these steps:

1. Select the element you want to animate and go to the Interactions panel.

2. Add a new interaction by clicking on the "+" icon and select "Scroll into view" as the trigger.

3. In the interaction settings, you will see two tabs: "Scroll into view" and "Scroll out of view." By default, the interaction will be triggered when the element enters the viewport. To make it trigger both on scroll up and scroll down, we need to configure both tabs.

4. Start with the "Scroll into view" tab. Here, you can set up the animations for when the element enters the viewport. Add an animation step, such as changing the element's background color.

5. Next, switch to the "Scroll out of view" tab. Here, you can set up the animations for when the element exits the viewport, which will trigger when you scroll up. Add a similar animation step, changing the element's background color back to its original state or another desired color.

6. Adjust the animation duration and easing options as desired to create a smooth transition between the two states.

7. Preview and test the interaction to ensure it's working as expected. When you scroll down, the element should change color, and when you scroll up, it should revert to its original color.

By configuring both the "Scroll into view" and "Scroll out of view" settings, you can achieve simultaneous color changes for an element when scrolling up and down in Webflow.