Community forum for knowledge and support

Updated 5 months ago

Interactions on a page with images in the wrong order

Anyone able to take a look at the interactions on this page in the section under the header? I'm confused on how to set this up. The last image is showing up on top of all the others... Am I meant to add the images in the opposite order? (Layout 348)

Read-only

6 comments

EEmily Marais

Would really appreciate your help here. I'm useless when it comes to troubleshooting animations

MMatt Johnson

I would prefer to say inexperienced! I did a quick loom here with a possible fix but there's still a bit of mystery here. https://www.loom.com/share/5d5ed125e6b840cea77ccd74960c97c3?sid=046ebb98-c789-4e4e-be98-f8ca0f0a394c

EEmily Marais

Thank you! I have just:

Set the offset to 50% as on the original component
Added back in the background-holder
Removed the extra interaction trigger

It's still only working when I scroll down to the bottom and back up. It seems to be something up with the first image (South Africa), but I can't figure out how.

EEmily Marais

I tried reversing the order of the images in the DOM and the South Africa image sticks there the whole time. It feels like its interaction is broken somehow. I'm gonna start with a fresh component and see what I can do.

EEmily Marais

Wooooohoo it's fixed! I started fresh and realised I had also deleted the background-holder animation which must have been crucial. Thanks a million Matt!!

MMatt Johnson

ah yeah nice! But still the mystery of why it works just fine when you scroll back up - at least in my opinion thats a mystery but glad we got it resolved!

Add a reply