▼
Streaming live at 10am (PST)

Collection List Hover & Image Appear 2

Design help Animations & Interactions
#1

Hi all

A few months ago I posted about some help I needed with an interaction involving a collection list on this page of my website, with the user hovering over a collection item, and the image for that project appearing when they do so. We solved the issue and you can see the thread here.

Fast forward a few months and I’ve finally finished populating the site and the list. However, I’ve noticed that the hover animation doesn’t quite work as intended. The bottom item in the collection list’s image appears on page load, but to activate the animation for the other items you have to scroll down and first hover over the bottom item. You then have to move your way up the list hovering over each item to activate the image appear.

Ideally I’d like the interaction to be active on all items on page load, as currently it doesn’t activate unless you scroll right to the bottom. I’ve tried to work out why this is happening, but not having much luck unfortunately.

Any advice would be much appreciated!
Thanks,

Here is my public share link: LINK
(how to access public share link)

#2

Your IX works as desired but the first, default image is in the way, so until you hover it and un-hover it to mke it disappear, all the other images just appear below it.

One ways of making this work:

Set the image visibility off by default, and if you want set a default image on the bg of the collection list.

1 Like
#3

Such a simple solution, can’t believe I didn’t think of it!

Thanks for your help @vincent

#4

Normally what you have to do when you’re setting such IX that are revealing an element while masking another, is to always have a first action that reset everything possible. Like in your case hide anything called the class of the element, targetting all elements with the class without hoerarchy restricion. And THEN you do your action, which is show the children element.

But sadly, IX2 don’t allow you to have 2 actions of the same kind on the same element with different hierarchy parameters… so if you truy that, you end up with the reveal action ALSO targetting all element with the class without hierarchy restriction.

That’s possible to do with IX Legacy haha

1 Like