Collection interactions

Hi does anyone know if it would be possible to recreate this team interactivity in webflow using a collection?

http://www.archus.uk.com/about/the-team


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Do you mean the hover animation over the team cards?

There are 2 parts to it the show/hide interaction and how it works with the collection. Seems pretty simple but think I need to write some custom code to make it work.

Hi @Tomato_Creative, you do not need custom code for this. Show/hide is really all you need. The only adjustment I would make to this would be a sticky feature to the details area on the left.

Its very similar to a custom dropdown or what would be a FAQ section on many other pages.

All it is, is a trigger affect.

How would you pull all the cms data then. Static I can see how it would work. dynamically how do you select the right profile to be pulled from the cms to perform the show hide? Am I missing something?

Yes, it would be two different collections. But now I have to think on this more.

Ill get back to you in a bit.

Hello @Tomato_Creative

A couple of years ago I made an example for this exact purpose, go to page ‘push-down-accordion’ to see how I pulled CMS data for team members like you need:

https://preview.webflow.com/preview/testingplayground?utm_source=testingplayground&preview=eaf772107fb9b54c77952adb2d2647e2

I hope this puts you in the right direction.

1 Like

Thanks for this I love looking through other peoples playgrounds. so essentially you have used a light box to create a popup with the image pulled from the CMS. I will have a play with it when I get a chance. At the moment I am having a scrap with Grid 2.0 which is making my page very long when using it. :roll_eyes:

I had a quick play and created a demo. Preferably for me it would look like it appears on one page rather than as a popup. This however has a problem in that you have to manually close each bio (rather than using a close button) before opening another otherwise they just layer on top of each other. This would be fine if you had a standard inline format and didn’t want to position them absolute to get the right layout (they would stack). If it was static you would just set it to close all other bios when opening a new. Will have to think if this can be done dynamically on the collection?? any ideas!!
What you need is like a reset