{"id":20860,"date":"2021-01-27T14:00:57","date_gmt":"2021-01-27T14:00:57","guid":{"rendered":"https:\/\/www.marvelapp.net\/blog\/?p=20860"},"modified":"2021-01-27T14:36:13","modified_gmt":"2021-01-27T14:36:13","slug":"create-carousels-and-scrolling-sidebars-with-containers","status":"publish","type":"post","link":"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/","title":{"rendered":"Create carousels and scrolling sidebars with containers!"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">At Marvel, it\u2019s important that <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/boards\/feature-requests\">our customers have a voice<\/a> in the direction of functionality and the platform. One of our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/boards\/feature-requests\/534\">most popular feature requests ever<\/a> has been the ability to create carousels and scrolling sidebars in order to create realistic prototypes when testing and gathering feedback.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So we're super excited to announce containers! Containers can make an element of your prototype interact by scrolling horizontally, vertically or bidirectionally. Containers can also be made fixed, so that they stay in position while scrolling.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Adding containers to a prototype is simple, in just a few clicks you can create many of the most common interactions you see in apps and websites. For example, simulating swiping through movies like on Netflix or scrolling through a sidebar in Slack is a breeze.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here's a few examples of things you can create:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Carousels<\/li>\n<li>Fixed, scrolling sidebars<\/li>\n<li>Floating elements that remain static while the rest of the page scrolls<\/li>\n<li>Bi-directional scrolling on elements such as an image of a map<\/li>\n<li>...and much much more!<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/rwcqvtq2py.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><span class=\"wistia_embed wistia_async_rwcqvtq2py popover=true popoverAnimateThumbnail=true\" style=\"display: inline-block; height: 399px; position: relative; width: 710px;\">\u00a0<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We've put together a step-by-step guide to help you learn how to add these cool new features to your prototypes; read our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.net/__sub/help\/hc\/en-us\/articles\/360014699118\">prototyping with containers<\/a> help article to find out more.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><b class=\"fontWeight-5\">Creating a container in a Marvel prototype<\/b><\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Sign in to your <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.marvelapp.net/__sub/www\/dashboard\">Marvel dashboard<\/a><\/li>\n<li>Open any prototype<\/li>\n<li>Upload the image you would like to add to your container and add it to your project. It might even be handy to create a section containing all your elements<\/li>\n<li>Click \u2018Prototype\u2019 on the image<\/li>\n<li>Click and drag over the area where you want to add the container<\/li>\n<li>Select the element you want to appear in that container from your images and click \u2018Container\u2019 as the action<\/li>\n<li>Choose the behaviour and direction you want, and click \u2018Play'<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Support for Sketch fixed layers is currently in beta and we'll be launching much more in future. We can't wait to see what you make!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Got an idea for a new feature? Let us know <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/boards\/feature-requests\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At Marvel, it\u2019s important that our customers have a voice in the direction of functionality and the platform. One of our most popular feature requests ever has been the ability to create carousels and scrolling sidebars in order to create realistic prototypes when testing and gathering feedback. So we&#8217;re super excited to announce containers! Containers can make an element of&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":282,"featured_media":20868,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[481],"tags":[],"class_list":["post-20860","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Use containers in your prototypes to make an element of your prototype interact by scrolling horizontally, vertically or bidirectionally.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prototyping - How to create carousels &amp; scrolling sidebars with containers\" \/>\n<meta property=\"og:description\" content=\"Use containers in your prototypes to make an element of your prototype interact by scrolling horizontally, vertically or bidirectionally.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-27T14:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-27T14:36:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2020\/12\/Twitter-feed-image-1500x844.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"844\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.marvelapp.net\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2020\/12\/Twitter-feed-image.png\",\"width\":2400,\"height\":1350},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#webpage\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/\",\"name\":\"Prototyping - How to create carousels & scrolling sidebars with containers\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#primaryimage\"},\"datePublished\":\"2021-01-27T14:00:57+00:00\",\"dateModified\":\"2021-01-27T14:36:13+00:00\",\"description\":\"Use containers in your prototypes to make an element of your prototype interact by scrolling horizontally, vertically or bidirectionally.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/bd72a934b7ff68bc81675996b1c9d959\"},\"headline\":\"Create carousels and scrolling sidebars with containers!\",\"datePublished\":\"2021-01-27T14:00:57+00:00\",\"dateModified\":\"2021-01-27T14:36:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#primaryimage\"},\"articleSection\":\"Product Updates\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/create-carousels-and-scrolling-sidebars-with-containers\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/bd72a934b7ff68bc81675996b1c9d959\",\"name\":\"Charlotte Hall\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1115801ad57ca66f17e8fd5f9fd46010228d348a4bb2aab51fa38c187df7a3a1?s=96&d=mm&r=g\",\"caption\":\"Charlotte Hall\"},\"description\":\"Product Marketer at Marvel. Part-time true crime connoisseur. @ch_hall\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/20860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/users\/282"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/comments?post=20860"}],"version-history":[{"count":0,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/20860\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media\/20868"}],"wp:attachment":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media?parent=20860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/categories?post=20860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/tags?post=20860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}