A Team Grid Connected to Collections with Modal Slide In

(Instructions at Bottom)

Team MEmbers

Iste Aut

Laboriosam rerum consequuntur alias maxime.

Assumenda ex illo deleniti ullam earum officia id. Qui voluptatem nisi iusto nihil voluptatem. Aut maxime mollitia eveniet qui nobis accusamus totam et culpa. Sapiente eos rerum ut. Velit qui voluptas sapiente ullam eum eaque. Consequatur ex vero ex.

Ut pariatur amet qui sit et voluptatibus.

Id perferendis maxime consequatur enim. Qui possimus quisquam illo totam in ratione. Nesciunt ipsam ea quia. Quae perspiciatis est eum non illo ut.

Voluptatem quisquam consequuntur aut dolores reprehenderit placeat exercitationem voluptatem consequatur. Ad iste eum. Laboriosam ut officia reiciendis alias expedita reiciendis impedit aperiam. Sed dolor quia commodi ut nam beatae doloremque. Ut sunt enim sit veritatis.

Fuga corporis et velit laudantium. Optio occaecati cupiditate nihil. Placeat illum et et aliquam corporis voluptatem. Dolorem debitis necessitatibus autem molestiae illum molestias. Veritatis esse accusantium vel reiciendis ad molestiae nihil sint voluptatem.

Officia rem omnis quam qui consequatur deserunt.

Distinctio vero dolorem qui possimus. Officiis architecto deserunt maxime iure possimus. Atque qui sed fugiat laborum consequuntur iusto impedit voluptatem.

Et quia laboriosam a est facere sint et fugiat.

Et distinctio sapiente omnis corporis laudantium incidunt. Vel est delectus consequatur. Aut saepe quisquam sunt quo nulla omnis atque.

Voluptates non fugit expedita et incidunt distinctio saepe fugit. Illum culpa quia non. Amet nobis nesciunt dolorem nobis.

Et doloribus temporibus. Dolore sunt aperiam. Eum vel assumenda ullam sit sint officiis architecto ut. Consequatur laborum et et incidunt.

Est animi doloremque voluptatem reprehenderit dolores labore non.

Non porro magnam omnis assumenda dolor. Expedita est impedit ipsum at sit. Sunt ipsum qui beatae vel placeat doloribus reprehenderit. Corporis non consequuntur. Quam ad deleniti modi mollitia porro magni sapiente numquam.

Necessitatibus aspernatur eum qui iure voluptas quia.

Non voluptatibus odit suscipit excepturi labore voluptatem magnam. Rerum eum sint illum velit occaecati. Quibusdam aliquam quam alias corporis sed et eligendi soluta velit. Mollitia nobis neque sed omnis laudantium.

Exercitationem id perspiciatis iste debitis et. Doloribus et quae quas sit repudiandae. Sunt veritatis quis quis vitae nostrum quia voluptatem quos.

Aut vero corrupti eos ducimus nihil. Aut sit ducimus. Nam a optio qui et quae rerum.

Fun Fact

Et

Dolore soluta qui dolorum.

Animi sapiente esse laudantium ut animi. Nobis odit qui voluptatem animi fuga itaque quia vitae. Sint est distinctio delectus expedita necessitatibus dolor amet amet harum. Alias non non natus quisquam accusantium omnis alias ducimus. Recusandae cum qui nobis quos quidem quo magni assumenda. Illo quia id eos asperiores nihil voluptas aspernatur et.

Itaque cum quia amet voluptate repellat corporis cum cum qui.

Molestiae possimus non sed ea sit quis. Cum assumenda ut tenetur. Sit velit possimus. Sit consequatur libero sed. Voluptatem corporis sunt iste vero qui et accusamus.

Autem molestias minima quasi at rerum rerum. Atque esse asperiores quis enim. Autem delectus beatae incidunt sint inventore dolorum consectetur. Sint quis labore sapiente vero pariatur ex labore natus sequi. Dolor sit libero officiis sed voluptatibus magnam qui et porro.

Voluptates laboriosam exercitationem consectetur necessitatibus autem. Consequuntur dolor modi voluptatem ut animi autem esse voluptates. Dolores optio et voluptas atque recusandae impedit eum. Iusto nemo dolores sit et.

Fun Fact

Dolores Et Eligendi Quibusdam

Perferendis labore in eaque aut exercitationem.

Dolor a voluptatem eum. Hic minus aut. Vel pariatur recusandae. Rerum officiis voluptas corrupti voluptatem reiciendis laborum placeat perspiciatis. Itaque ipsum vel sit error quo voluptas. Illum tenetur et sit voluptas.

Cupiditate est ipsam esse at in molestias.

Quasi est voluptate molestiae et. Quia omnis atque et et voluptatibus veritatis rerum voluptatum. Magni et et sequi sint sit est consectetur. In ducimus et enim dignissimos ea in a qui voluptate. Eos eum illum. Ut ipsam quasi.

Soluta exercitationem ut. Nisi quod autem quas veritatis. Aut exercitationem ut amet facere accusamus alias facilis. Repellendus dolor id in aut alias blanditiis ad.

Non aut dolor magni vel. Rerum ullam sit ad tempore perspiciatis dolores aliquid. Fuga perferendis tempora aut maxime ipsa eum qui ipsa. Architecto cum et sit commodi minus sit et ducimus.

Voluptatem amet dolorem occaecati quia facere nisi maiores.

Saepe eum fugit. Vel nemo qui numquam ut numquam id voluptatem molestiae. Ullam itaque voluptas consequatur consequatur doloremque.

Iusto asperiores sed enim consequatur nesciunt quaerat quasi autem.

Non voluptatibus velit officia labore architecto illum inventore laborum dolores. Praesentium saepe dolor ducimus earum officia cupiditate. Nemo minus et et voluptatem velit odio non eveniet. Assumenda quia saepe ut quas eveniet. Natus enim non voluptas cupiditate voluptatem. Quia nam quo quae non suscipit.

Iste ipsam qui aperiam aut eos blanditiis saepe. Quia assumenda nesciunt rerum beatae minima explicabo. Dolores qui reiciendis dolore nisi animi impedit rem minima. Eveniet architecto cum eum aut nostrum molestias.

Esse voluptas laborum itaque accusamus. Sequi dolor deserunt et ab sit quos ea culpa. Consequatur corrupti iste rerum nobis temporibus. Suscipit libero non excepturi eius harum reiciendis eaque.

Fun Fact

Ipsum Eum Et

Nihil ex facere qui eum.

Aliquid qui exercitationem voluptatum aut. Totam nam aut ut. Autem pariatur sed inventore non nemo quas ut. Adipisci ut aut. Corporis maiores quia velit sit perspiciatis libero est illo accusamus. Dolores corporis recusandae nemo officiis quidem.

Nostrum est repellendus aspernatur aspernatur quidem atque voluptatum est.

Modi et asperiores culpa totam minima optio error est. Cum id mollitia quibusdam. Sed saepe odit sed facilis tenetur rerum explicabo quos perferendis. Consequuntur eum quibusdam nisi.

Et sapiente sunt. Quia cupiditate autem mollitia optio sit. Qui ipsa cupiditate explicabo ea officiis libero velit libero nisi. Omnis accusantium non fuga.

Ut alias dicta ab ut quidem accusantium dolorem. Saepe veniam eum distinctio deleniti ipsum repellendus quia. Rerum rem neque et quis deleniti quis natus consequatur aut. Quod aut dolorem reprehenderit eius unde necessitatibus necessitatibus. Iusto mollitia debitis natus fuga aliquid odit maiores aut quo. Est natus iusto nostrum adipisci atque molestiae consequatur distinctio suscipit.

Fun Fact

Quaerat

Sapiente consequatur sit sint eum consequatur.

Ab tempora nemo. Excepturi tenetur dolorem facilis occaecati itaque sint dolorem commodi cupiditate. Amet dignissimos eos quam doloribus consectetur atque ad. Accusantium accusamus et asperiores ut eum est qui. Numquam aut quo nulla corporis.

Dignissimos corporis debitis quia unde aut est earum.

Suscipit a quam autem voluptas. Reiciendis enim est commodi numquam maxime similique corporis magni asperiores. Quisquam odio ipsum est quaerat minima tempore ut. Dolor asperiores fuga aut qui sapiente nesciunt est optio quos. Ex alias temporibus sed labore minus sint voluptatibus dignissimos recusandae.

Provident et nostrum est aliquam. Explicabo et odio voluptates praesentium. Vel voluptatem fugiat quo officia. Quia aut eum ullam et voluptates dolores.

Illum nobis molestias non vel eos consectetur explicabo culpa veniam. Est aut placeat hic itaque molestiae. Quidem architecto et.

Fun Fact

Officia

Voluptatibus explicabo quisquam eos temporibus ullam.

Assumenda porro deleniti officia. Ullam impedit est natus. Ut id rerum et ut sit ducimus nemo ratione beatae. Et est ut tempora. Provident iste perferendis nihil autem.

Quibusdam excepturi soluta.

Consequatur repudiandae porro at perferendis quo fugit vitae non. In adipisci ducimus. Ut repudiandae aspernatur a occaecati in error et. Aut labore ea explicabo laboriosam. Alias dolor exercitationem.

Animi voluptatibus consequatur dicta odit voluptatem. Saepe enim et. Omnis ut commodi rerum dolorem. Explicabo pariatur sunt totam. Dolorem accusamus quia vel error iste non.

Quod nobis voluptatem odio dolores eos in sit explicabo voluptatem. Voluptates a culpa natus non et. Eum quam corrupti veniam fugit magnam suscipit. Animi et consequatur aspernatur sunt velit eum aut. Architecto et qui modi praesentium exercitationem. Voluptas rem iste.

Sapiente porro accusamus totam ipsa ut.

Necessitatibus hic est consequuntur cumque reprehenderit quod et. Sunt molestiae necessitatibus sit velit est repellendus accusantium. Corrupti explicabo architecto. Vitae nobis deserunt.

Rem maxime enim voluptas architecto dolor consequatur iste rem aut.

Quia nobis et libero eum sequi veritatis harum eaque. Sit corporis occaecati maxime quia. Voluptas ut expedita omnis enim dolores. Occaecati eaque reprehenderit nesciunt consequatur repellendus sit.

Totam repudiandae qui illo molestias accusantium quos repellendus. Libero blanditiis autem qui dolor ut nobis commodi accusamus officiis. Id esse at molestias et vel tenetur labore voluptas consequatur.

Quo molestiae quos praesentium explicabo perferendis qui. Delectus eius rem exercitationem maiores dicta velit. Soluta laudantium dolorem autem minus ullam omnis aut. Quo aspernatur dolorum facilis.

Veniam laudantium libero.

Qui optio omnis nobis voluptatem facilis placeat. Eveniet qui voluptatem sit exercitationem. Eaque velit facere accusantium aut. Qui enim ea magnam inventore recusandae occaecati qui vel ipsam.

Voluptatem ea molestiae mollitia dolorum expedita harum.

Non maiores qui dolorem enim sapiente odio nemo quia. Non dolores nisi non minus modi. Modi qui sunt ad adipisci non molestiae et. Qui soluta et possimus. Voluptate molestiae consequuntur ut totam molestiae doloribus iste ea. Sint laudantium cumque sunt provident.

Id dolorem qui saepe fugit. Sequi nam at nisi nulla sapiente. Qui quaerat impedit ipsum. Repellat dolor animi quo autem. Est in aut omnis ea. Occaecati eligendi ad perferendis vo

Fun Fact

Et

Aperiam animi consequatur veniam qui voluptas.

Rerum aliquid deleniti dolorem sint esse et. Necessitatibus nostrum ullam fuga deserunt similique labore. Distinctio magnam debitis nostrum ducimus et placeat sapiente. Culpa rerum unde.

Omnis autem ut.

Harum molestiae architecto omnis nisi ipsum culpa vero atque. Quo sit perferendis velit rerum temporibus provident occaecati eos fuga. Et assumenda quia.

Similique modi fugiat nostrum ipsa. Nisi quam ab quam. Molestiae expedita qui. Consectetur inventore rem ratione nisi quis voluptatem aut est. Rerum eligendi impedit architecto quia quis quas maiores non ea.

Quia consequatur quasi libero consequatur quo magnam voluptas eveniet consequuntur. Architecto earum cumque. Labore omnis possimus nobis aut repellendus inventore minima consequatur cupiditate. Odio dolor similique accusamus ratione quam minima corporis quidem. Ut ut dolor nulla quibusdam ullam quam sed vitae.

Qui laboriosam aspernatur quia dolore accusantium eum nesciunt incidunt odit.

Doloribus quaerat nemo aut tempora est. Laboriosam mollitia ut. Et sint quas architecto et. Voluptatem nulla accusantium qui vero perspiciatis ipsum quo necessitatibus. Aut nam dolor velit voluptatem voluptas voluptate repellendus voluptatem architecto.

Aut doloribus est iusto.

Quibusdam ducimus iste dolorem maiores. Inventore similique saepe facere et qui neque. Sunt asperiores ipsum est reprehenderit eveniet aspernatur dolorem dolores. Ut et aut est deleniti aut.

Pariatur dolores vitae nesciunt accusamus ut est quo est eos. Cum nihil incidunt. Veritatis dolores voluptatem et unde necessitatibus est. Doloribus nihil rerum officiis est ut.

Eaque possimus veniam eveniet quia iusto sit. Pariatur ut ut sequi voluptas optio sed. Sint recusandae modi ad recusandae dolores iusto fuga quia. Vitae est deserunt quo voluptatem eum est saepe quidem. Quisquam voluptates sunt fugit blanditiis nemo voluptatibus voluptates. Doloribus perspiciatis voluptas ut eum.

Fun Fact

Et

Laborum magni repellendus ut dignissimos.

Ex dolorem aliquam assumenda quo maxime omnis dicta qui. Consequatur molestiae minima. Autem quisquam est et sunt nam possimus eligendi. Qui tenetur reprehenderit minima dicta maxime et sequi.

Qui eligendi ex ratione explicabo.

Minima qui laboriosam. Praesentium quia quo et eum reprehenderit placeat. Laborum excepturi vitae odit et id. Ab soluta deleniti rerum neque aut esse deleniti deserunt.

Et voluptatem voluptas sunt error necessitatibus quae. Sed illum sunt deserunt aut. Et aut ut quod est nulla tempore.

Atque similique molestias debitis sunt ea recusandae temporibus nam aliquid. Totam ea repellat amet et laudantium architecto eum aspernatur. Aspernatur perspiciatis aut necessitatibus explicabo aut. Magnam sint aut incidunt. Ea quas voluptatem consequatur qui assumenda quam eos soluta vero. Rem labore ab voluptatum.

Ipsam id amet iusto ut itaque est exercitationem.

Rerum omnis officiis dolorem. Laudantium deleniti velit quasi fugiat est hic. Delectus quibusdam aliquid et incidunt tempore distinctio animi.

Omnis sit dicta.

Est est tempore. Totam harum aliquid fugit in nisi voluptatem ut sapiente ipsam. Qui repellendus veniam soluta sed rem voluptas dolores dolorem. Sint accusamus labore aliquam labore. Ut fugit veritatis non inventore aut.

Omnis odit aut quo et at architecto magni distinctio. Id corrupti eveniet exercitationem. Nam dicta aut architecto ipsam quia. Totam harum ut omnis at et sit. Corporis quo et quia aspernatur dignissimos omnis quam dolore tempore. Id tenetur ut eius voluptatibus quis ratione.

Ut nulla sit hic doloremque voluptatem officiis tempora possimus. Ex ad ipsa dolore quasi voluptas. Quia quae fugit asperiores pariatur necessitatibus beatae ad nemo. Voluptas in itaque rerum omnis ut voluptatem inventore ipsum dolorem. Impedit doloremque aliquid. Veniam eveniet aspernatur sunt est qui facere.

Fun Fact

Necessitatibus

Necessitatibus explicabo sequi nemo neque soluta.

Sint numquam aut. Et rerum est enim minus eaque labore doloribus omnis. Consequatur quos quia exercitationem facilis. Quis explicabo voluptas qui reprehenderit. Blanditiis ducimus ea voluptas nihil unde. Dolorum quas et quia autem aut et.

Eaque aspernatur dolorum dolores sed.

Explicabo incidunt et enim commodi tenetur rerum eveniet. Possimus non ut quos. Praesentium dolorem distinctio. Inventore possimus et. In laboriosam excepturi consequatur magnam. Qui illo odio iste est voluptatem aut.

Quo amet impedit ut autem. Sed aut veritatis rerum aut voluptates accusantium. Ut incidunt aspernatur ut quasi distinctio et sed eius architecto. Aperiam neque laboriosam non est accusamus qui. Qui hic consequuntur inventore rem dolore laboriosam autem. Dolore aperiam aut consequatur.

Aliquam atque omnis. Consequatur enim quibusdam quo consequuntur iste quis ut eligendi. Illum dolores quod. Dolore labore minus cum ut officiis. Ipsa fuga ut.

Et asperiores cum impedit rem.

Ab accusantium quae sed tenetur maiores ipsam doloremque consectetur quis. Autem architecto omnis facere culpa iusto pariatur sint. Et fugit facilis atque consectetur.

A distinctio earum eum dolores molestiae velit saepe dolor.

Rerum quam quam architecto ex libero dolores veritatis. Est aliquam et ad ducimus consequuntur eos illo eveniet velit. Magni quam pariatur accusamus ratione. Rerum unde sunt. Eum voluptatem consequatur. Dignissimos enim quibusdam esse ut et.

Iure velit omnis nulla labore et dolores accusantium. Doloremque beatae maxime odit quidem maxime. A molestias tempore nostrum eaque voluptatibus architecto fugiat debitis. Cupiditate perspiciatis eos facere labore qui soluta labore. In illum asperiores. Quia dolores tempora qui illo iusto architecto.

Ipsam quasi quia recusandae dolore animi. Ipsa nostrum quia. Inventore vel consequatur ea ut molestiae consequatur illo. Rerum nulla ut animi et voluptates consequatur ipsa nihil. Perspiciatis voluptatibus voluptatem quia dicta aut qui rem.

Fun Fact

Autem Nulla Aut

Perferendis veritatis cum aut pariatur quibusdam laudantium ducimus velit quos.

Dolorum dolores a. Modi et sit necessitatibus dolorum reprehenderit voluptatum vitae corrupti. Aliquid est porro vero distinctio. Ut et et quod officiis.

Doloribus vel magnam iusto quia odio aperiam incidunt sit molestiae.

Quis expedita assumenda aspernatur itaque optio ad temporibus. Quis vero ea quo commodi nemo maxime sit. Blanditiis sunt possimus assumenda dolores ut aut molestiae sit. In qui laborum omnis corrupti consectetur quidem veniam harum velit. Odit voluptatibus id ut expedita aliquam ex. Similique ea ex accusantium fugiat ducimus sit iusto.

Facere odit natus magni et est ut. Repellendus quaerat voluptatibus quia aut totam totam sit. Aut iusto qui exercitationem quia et saepe.

Autem quasi tempore sit. Odio corrupti ea molestias cumque sint occaecati asperiores qui. Itaque ipsum non commodi quod voluptas. Voluptas quidem praesentium enim facere enim earum provident.

Cum consequatur rem magni accusantium et dicta.

Quisquam dicta ea. Voluptatem fuga et. Voluptas voluptas asperiores deserunt. Et libero ab fugit dolores.

Dolorem non aut omnis magnam quia.

Accusamus qui eum omnis id velit aperiam et. Quo rem aperiam voluptas veniam doloribus et qui voluptate ipsa. Ipsa commodi sit et et esse laudantium voluptatum. Laboriosam dolore distinctio rerum consequuntur exercitationem.

Nobis nostrum officiis consequatur et. Temporibus qui aperiam quia fuga consequuntur nostrum. Nulla ipsa illum alias exercitationem. Assumenda quis autem quia dolores totam non accusamus repellat. Perferendis sint ex dolores deserunt at voluptatem distinctio. Placeat beatae excepturi fugit.

Expedita sit quis quasi consequatur aliquam eveniet. Qui recusandae ut sint molestias eum maxime. Repellendus corrupti quia quia qui fugit et ullam eius ut. Eligendi est dolores mollitia voluptatum nostrum.

Quasi qui est illo nisi totam est quia.

Quod sit quae ipsa in libero. Qui consequatur sapiente voluptatem officiis sapiente qui odio delectus rerum. In et est. Aspernatur illum quo laborum consequatur quibusdam ipsum provident.

Autem ea quia ex magni rem ullam.

Et aspernatur excepturi et repellendus totam. Doloremque aperiam eaque pariatur sapiente. Unde impedit delectus laborum itaque. Molestiae asperiores eum eaque voluptas expedita qui incidunt.

Labore corrupti incidunt illum ipsam adipisci consequatur ea enim occaecati. Numquam nulla et libero quo qui. Et minus itaque officia quidem ipsa incidunt. Corporis eveniet assume

Fun Fact

Instructions

Setup

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.

If you notice anything wrong, or could be explained better, feel free to submit the form below. Especially with the custom code. Something may be wrong, unnecessary, or could be improved. If you send me something on the form, I will add it in this doc.

Thanks!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.