Interactions 2.0: navigator support

Hello there! I start to use interactions 2.0 of Webflow, I liked the way you add animation and the elements in the timeline having a great advantage over legacy interactions. One of the problems found was select elements using the navigator of Webflow. I only can select the visible elements of the page. Other thing I notice also is you can’t use them in symbols. Well, the rest I can say is the interactions 2.0 is a great improvement indeed. Thanks and congratulations!

Regards,

2 Likes

Same problem here – how do I select elements to animate that are not visible or selectable in the designer? (eg. off-canvas, lower z-index, covered in some way by another element).

Switching to the navigator panel to select the element needed turns off animation mode.

I have the same problem. It would be great, if you could select elements through the navigator.

Hi guys, this is indeed a shortcoming of the new system. I do as follows - look at the navigator panel and remember the structure of the elements. Then in the interactions panel I will select any visible element closest in structure tree to the needed element and just navigate using arrow keys to them (arrow up - go to the parent, arrow down - go to the first child, arrows left and right - select children). I guess this is the only way currently.

3 Likes

I agree 1000000%. This is a huge problem and I am surprised Webflow released IX2 like this. Some basic QA would have revealed this problem. Legacy IX at least allowed you to type the name of an element.

Another issue is it is difficult to select exact percentages on the timeline, such as 1% or 2%, especially when you have a lot of elements animated at 0%, unless I am missing something.

1 Like

Yes, this is bad. Although you can now choose subclasses - the subject of another thread - anything with a shared class like ‘navlinks’ doesn’t work.

A workaround is to attach a subclass to each navlink (eg navlink/contact us) . That way you can control the characteristics of the basic navlink class and attach specific interactions to each one. It’s a bit of a faff but has worked well with the multiple modals I have been working with.

To do this, set up the animation and use the ‘Replace Elements in Animation’ with the class you have just created.

If you replace elements with the shared class then all instances where the class is used will be affected.

Absolutely. That’s why I suggested using subclasses.

Sorry, you lost me there. How is it related to navigator support? :frowning:

My understanding of the question was that it was tricky to attach interactions to items that weren’t visible - when the link was being attached to the animation.(I had the same problem with modals which are all hidden elements)

Re-reading, I think I explained it badly! What I mean is:

Each element that needs to be animated should be given a subclass - eg ‘section-contact’ - which can then be used to attach the animation to from the navlink using the ‘Replace element’ section. In other words - that navlink animates this element.’

IX2 treats the whole class/subclass as an independent item, so an animation attached to each navlink will not apply to ‘navlink’.

Does that make sense or am I barking up the wrong tree?

Hm, the questions for this thread where “how do I select an element (while being inside interaction) that I cannot directly click (invisible, overlapped with other elements, etc)” and the answer was to use keyboard shortcuts to navigate the html structure.

Fair enough, but I think my way is far easier!

Using subclasses is not always optimal - it leads to unnecessary complications in styling later on. But if it is better for you personally then it is the way to go! :smiley:

Yeah, I’m a fan; you can control the main class easily without having to duplicate work across elements. But you’re right, we all have our favourite ways.