Interactions don't work within components

Design help Animations & Interactions
1

Hello everyone,

I created a navbar that has a background colour change when the page is scrolled. The background colour change is set on the section element.

The animation all works fine until I turn the navbar (including the section element that has the interaction applied) into a component. Am I missing something obvious?

This is my first live project with Webflow and I’m very impressed so far - I have a 25 year career as a graphic designer - HTML/CSS developer under my belt and have longed for such a tool for a very long time.

Thanks in advance for any insights.
Michael.

1 Like
2

Make sure the interaction is targeting a class within the component, not an element. My guess is that element targeting would not work if the element is in a component.

3

Thanks very much - your response is much appreciated I’ll give that a try.

4

Ahhh the mistake is mine - I had not RTFM :slight_smile:

At the moment, it’s not possible to reuse page interactions. You’ll need to apply page triggers on each of your pages. However, you can set the animations to target the class of an element so you can reuse them on each page. To do so, set the page trigger(s) on the first page and create your animation(s). Make sure you target the class and not the selected element. Then, go to each page, add the page trigger(s) and select the animation(s) you’ve already created.

Thanks again Michael.