A Team Grid Connected to Collections with Modal Slide In

The Collection List is connected to the Team Members Collection. As most things, there are many ways to do this. However, inside the collection item, you will see a sibling div of the headshot wrap called 'team-modal__wrap' set to display:none. This is the slide in, and since it is tied to the collection item, you can add dynamic content to it.

*Note: when editing and taking off display none from the modal wrap, you may want to limit the items to 1. Otherwise it will show all slide-ins layered on top of one another. If you have a lot of items it will slow down Webflow

Trigger / Animation

The trigger to open the slide-in is on the headshot wrap. In the interactions panel, when choosing Hide/Show for team-modal__wrap, we are only selecting siblings with this class. In doing so, it will only display:flex to sibling wrap, and not any other collection item modals. The rest of the targeted elements are set to 'All Elements With This Class'. We can do this, because Webflows interactions will only see the visible elements with these classes inside of the NOW VISIBLE team-modal__wrap. So it won't trigger animations on all of the other slide-ins.

Setting 'Only siblings with this class' makes it so all other animations will only affect visible elements inside this modal.

Other Notes

Images

There is an HTML embed at the top of this page. It is custom css to fit an image in a div. It is called 'object-fit', and is set to 'cover'. This acts similarly to background-size:cover when working with background images, but allows you to set it on an actual image element instead. Useful for using alt-tags and I've read it can help with images being served at compressed sizes.

*I have this snippet in an embed so I can see the style in action within Webflow editor. If you put it in the page code you won't see its effect until viewing published site.

*** Update 12/21/19 - Webflow added Object Fit into their workflow. This code is not longer needed, however you can control position of images with object-position. For this we have 'top-center'.

Here is the code:

Object Fit

    
     
<style>

.img__cover {
	object-fit: cover; 
	object-position: top center;
}

</style>

Just make sure you have the class 'img__cover' set on your images.

Stop Body Scrolling

Usually, when you have a fixed element overlaying the screen, when you continue to scroll, the entire page body keeps scrolling. We don't want this. If the team members panel exceeds the height of the browser window, we only want to scroll their bio.

In the custom code panel in the page settings, there is a script before the closing body tag. This script sets the body to overflow:hidden when the trigger is clicked. Notice the class .team--open. We use some javascript to target that class, and when it is clicked, it sets the page body to overflow:hidden, which will make it the same size as the modal wrap (100vh), which is also set to overflow:hidden -- this is to hide the panel slide-in.

Since the team-modal__body is set to overflow:scroll, we are still able to scroll the modal body itself, making it appear that only the panel is scrolling, while not allowing the page body to scroll.

The close button has a class of .team--closer. When this is clicked, the script targets the class and resets the page body to overflow:auto. and now you can scroll the page again.

Here is the script:

Stop Body Scroll

    
     
<script>

// Prevents body scroll on desktop only
Webflow.push(function() {
  $('.team--open').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

// Reactivates body scroll on desktop only
  $('.team--closer').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});

</script>

Mobile Scrolling

To be fully honest, I'm not sure of the best way to do this. I'm not sure of the best way to do anything... But in the page settings in custom code, there is a piece of css for tablet and mobile etc. Mozilla states that this is not a standard, and it may not work for every user, but this activates scrolling on the modal body on touch screens. It seems to work fine without. But if you don't use this, I have noticed some modals getting stuck and not being able to scroll at all.

This is more of a safety precaution?

Here is the code:

Mobile Scroll

    


<style>

	.team-modal__body {
	-webkit-overflow-scrolling: touch;
	}

</style>

Final Notes

I'm not positive if all of this is correct, better ways to do this etc. I've done it a few different ways.

Thanks!

A Team Grid Connected to Collections with Modal Slide In

Team MEmbers

Dahlia Bartell

CEO

Aut cum ipsam.

Voluptas eveniet sed aut ad sit.

Fun Fact

Dahlia Bartell

CEO

Keven Sanford

CFO

Sint rerum molestias dolorem aut reprehenderit.

Saepe distinctio nemo error aut dignissimos perferendis aut illum itaque.

Fun Fact

Keven Sanford

CFO

Marc Farrell

COO

Vero quibusdam vitae.

Tempora consequatur facilis.

Reiciendis beatae nisi quaerat ut est odit adipisci soluta dicta.

Alias enim mollitia libero dolorem sed sapiente ad et.

Dolorem voluptas rerum vel vero aut.

Ipsum sint ratione vitae velit voluptatem neque suscipit.

Fun Fact

Marc Farrell

COO

Abbey Schowalter

Marketing Leader

Quia placeat et perspiciatis iure consectetur possimus voluptates.

Et nobis in.

Qui ea natus ea deserunt.

Soluta facilis sunt soluta consequatur ratione.

Dolor molestiae at repellat minima eveniet est.

Praesentium inventore aut quidem sit tempora inventore recusandae.

Fun Fact

Abbey Schowalter

Marketing Leader

Kameron Fritsch

Sales Leader

Asperiores est dolores.

Autem sapiente est id minima earum.

Qui ut vitae et eum ut a asperiores.

Ad sed rerum.

Eveniet est est.

Voluptas veritatis labore iusto necessitatibus voluptatem aut.

Fun Fact

Kameron Fritsch

Sales Leader

Laurence Cruickshank

Support Rep

Et aspernatur quae laboriosam quaerat numquam voluptas ut.

Excepturi dolores saepe laudantium in eum odio in qui aut.

Labore labore enim consequatur expedita est.

Quia necessitatibus qui ad porro velit aliquid in distinctio.

Fun Fact

Laurence Cruickshank

Support Rep

Viola McKenzie

Support Rep

Soluta assumenda quia ea magnam sit sit aut.

Repellendus quaerat et libero fugiat voluptatem maiores animi.

Quod aliquam aliquam repudiandae eos deserunt velit.

Odio sint quibusdam quas.

Fun Fact

Viola McKenzie

Support Rep

Domenick Carter

Support Rep

Labore maiores eos quia autem.

Deleniti ducimus porro.

Fun Fact

Domenick Carter

Support Rep

Bryce Schoen

Support Rep

Ea unde qui blanditiis eius voluptatem perferendis.

Omnis et et maiores.

Recusandae eligendi doloremque odio est.

Est sunt corrupti quia at nisi dolor consequatur.