[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"cms-page:\u002Fblog\u002Freimagining-slideshow-transitions-css-masks":3},{"date":4,"date_gmt":4,"content":5,"sticky":7,"format":8,"categories":9,"collections":11,"coauthors":12,"class_list":14,"acf":23,"head_links":319,"breadcrumbs":320,"reading_minutes":132,"category":328,"head":330},"2018-05-03T10:30:25",{"rendered":6},"\u003Cp>When the law firm \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.spearingwaite.com\">Spearing Waite\u003C\u002Fa> asked Impression to help overhaul its online presence by rebuilding its existing website from the ground up, we knew that we needed some sort of ‘wow factor’ to differentiate the firm from its many competitors. One of the ideas was to use the firm’s leaf-shaped logo to progressively reveal images in a slideshow designed to dominate the above-the-fold area of the home page. The initial design concept looked like this:\u003C\u002Fp>\n\u003Cfigure style=\"width: 800px\" class=\"wp-caption aligncenter\">\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"wp-image-3621 size-full\" src=\"https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F05\u002Fspearing-waite-homepage-proof.jpg\" alt=\"\" width=\"800\" height=\"350\" \u002F>\u003Cfigcaption class=\"wp-caption-text\">The initial design concept\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003Cp>The firm liked the concept and was keen to keep it in the final design, which meant only one thing for the development team: we’d have to work out how to build it. We first thought that a background video might be the way to go. Although that would fit with current trends, there were 2 major drawbacks: videos use lots of bandwidth, which would slow the website’s load time and hinder performance, and the firm wouldn’t be able to easily update the images in the video within their content management system: Impression’s highly optimised enterprise WordPress offering. We’d need to look elsewhere. The solution came in the form of CSS masks. Scroll down to see how we built it. This was the end result:\u003C\u002Fp>\n\u003Cfigure style=\"width: 958px\" class=\"wp-caption aligncenter\">\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"wp-image-3621 size-full\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FCWWvRmp0-spearing-waite-homepage-proof.jpg?auto=compress%2Cformat&q=90\" alt=\"\" width=\"958\" height=\"538\" \u002F>\u003Cfigcaption class=\"wp-caption-text\">For the full effect, \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.spearingwaite.com\">visit Spearing Waite’s website\u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003Ch2 id=\"css-mask-basics\">CSS mask basics\u003C\u002Fh2>\n\u003Cp>Using a mask in CSS means placing an image with transparent parts, such as a PNG or SVG, over an element. Any non-transparent part of the image will act as a mask, whilst transparency will allow anything under the element to show through. The effect is achieved using the \u003Ccode>mask\u003C\u002Fcode> CSS property. As CSS masks are \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcaniuse.com\u002F#feat=css-masks\">only supported in modern browsers\u003C\u002Fa>, which support SVG graphics, we used SVG masks, as they had 90% smaller file sizes than their PNG counterparts. The code below shows the use of a mask in the shape of the Impression logo placed on a blue \u003Ccode>div\u003C\u002Fcode>. The yellow background behind the \u003Ccode>div\u003C\u002Fcode> can be partially seen through the \u003Ccode>div\u003C\u002Fcode>. The only drawback with using CSS masks at the moment is the lack of browser support in Internet Explorer (which is \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fdeveloper.microsoft.com\u002Fen-us\u002Fmicrosoft-edge\u002Fplatform\u002Fstatus\u002Fmasks\u002F\">coming soon\u003C\u002Fa>). However, we thought that the lack of browser support was outweighed by the performance benefits, especially as the feature could degrade gracefully and would not affect the accessibility of the site.\u003C\u002Fp>\n\u003Cp class=\"codepen\" data-height=\"225\" data-theme-id=\"32413\" data-slug-hash=\"KQdXZg\" data-default-tab=\"css,result\" data-user=\"jamieimpression\" data-embed-version=\"2\" data-pen-title=\"Basic CSS Mask\">See the Pen \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\u002Fpen\u002FKQdXZg\u002F\">Basic CSS Mask\u003C\u002Fa> by Jamie (\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\">@jamieimpression\u003C\u002Fa>) on \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\">CodePen\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Cscript async=\"\" src=\"https:\u002F\u002Fproduction-assets.codepen.io\u002Fassets\u002Fembed\u002Fei.js\">\u003C\u002Fscript>\u003C\u002Fp>\n\u003Ch2 id=\"animating-the-mask\">Animating the mask\u003C\u002Fh2>\n\u003Cp>We knew CSS masks were the right way to build the slideshow once we realised they could be animated, just like other CSS properties. Taking the basic mask example above, we can define a CSS \u003Ccode>keyframes\u003C\u002Fcode> animation altering the mask’s properties, such as the \u003Ccode>mask-size\u003C\u002Fcode> or \u003Ccode>mask-position\u003C\u002Fcode>, then assign that animation to the blue \u003Ccode>div\u003C\u002Fcode>. This results in the following; something much closer to the full effect.\u003C\u002Fp>\n\u003Cp class=\"codepen\" data-height=\"225\" data-theme-id=\"32413\" data-slug-hash=\"yveypW\" data-default-tab=\"css,result\" data-user=\"jamieimpression\" data-embed-version=\"2\" data-pen-title=\"Animated CSS Mask\">See the Pen \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\u002Fpen\u002FyveypW\u002F\">Animated CSS Mask\u003C\u002Fa> by Jamie (\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\">@jamieimpression\u003C\u002Fa>) on \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\">CodePen\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Cscript async=\"\" src=\"https:\u002F\u002Fproduction-assets.codepen.io\u002Fassets\u002Fembed\u002Fei.js\">\u003C\u002Fscript>\u003C\u002Fp>\n\u003Ch2 id=\"creating-the-slideshow\">Creating the slideshow\u003C\u002Fh2>\n\u003Cp>To build the slideshow, we needed to use a combination of mask animation and javascript.\u003C\u002Fp>\n\u003Cp>Firstly, we created 3 slide elements and positioned them absolutely inside of a container. We then wrote a javascript function to rotate the slides using the \u003Ccode>z-index\u003C\u002Fcode> CSS property. The active slide would be given the highest \u003Ccode>z-index\u003C\u002Fcode>, with the CSS class \u003Ccode>current\u003C\u002Fcode>, followed by the next slide, with the CSS class \u003Ccode>next\u003C\u002Fcode>. All other slides would have a lower \u003Ccode>z-index\u003C\u002Fcode>. This basic slideshow would work in any modern browser.\u003C\u002Fp>\n\u003Cp>Next, we altered the javascript function to apply an animated mask to the active slide (using the CSS class hide) for 1 second period before the next slide became visible. By creating a mask animation that started by revealing none of the slide below when it first appeared but animated to reveal the whole of the slide below exactly 1 second later, we had created a slide transition using a CSS mask.\u003C\u002Fp>\n\u003Cp>Finally, we realised that to create a full-screen-width background slideshow transition by animating the mask-size, we’d have to either (a) start with a tiny mask which would show the next image beyond the edges of the mask before it grew to hide it, and show it again, or (b) start with a mask which covered the whole slide, but then grew to such a large size that we’d see performance issues. To get around this issue, we created an SVG image comprised of each of the frames of the animation side-by-side, and translated the mask in steps 23 times in 1 second, creating a 24fps reveal effect. The first ‘frame’ was completely opaque, whilst the last frame was completely transparent. We used a frame width of 3000px to ensure that only 1 ‘frame’ was visible on a user’s monitor. Our mask image looked something like the image below. In SVG terms, it was necessary to draw an opaque shape (a black area) leaving the areas to be revealed transparent.\u003C\u002Fp>\n\u003Cfigure style=\"width: 1024px\" class=\"wp-caption aligncenter\">\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"wp-image-3623 size-large\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FOqgIGHMw-impression-mask-steps-small-1024x9-1.png?auto=compress%2Cformat&fit=crop&h=1000&q=90&w=1892\" alt=\"\" width=\"1024\" height=\"9\" \u002F>\u003Cfigcaption class=\"wp-caption-text\">Although this is a PNG image, we used an SVG in the final product, which could be 72,000px wide and still weigh in at less than 3kb\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003Cp>A scaled-down version of the final product can be seen in the code below.\u003C\u002Fp>\n\u003Cp class=\"codepen\" data-height=\"267\" data-theme-id=\"32413\" data-slug-hash=\"mXVeGP\" data-default-tab=\"css,result\" data-user=\"jamieimpression\" data-embed-version=\"2\" data-pen-title=\"Slideshow with animated CSS mask transition\">See the Pen \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\u002Fpen\u002FmXVeGP\u002F\">Slideshow with animated CSS mask transition\u003C\u002Fa> by Jamie (\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\u002Fjamieimpression\">@jamieimpression\u003C\u002Fa>) on \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fcodepen.io\">CodePen\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Cscript async=\"\" src=\"https:\u002F\u002Fproduction-assets.codepen.io\u002Fassets\u002Fembed\u002Fei.js\">\u003C\u002Fscript>\u003C\u002Fp>\n\u003Ch2 id=\"thoughts-and-caveats\">Thoughts and caveats\u003C\u002Fh2>\n\u003Cp>Having created a working concept, we needed to transition it into production. We would need to ensure that the slide images were compressed and of the correct dimensions, and that the mask image was preloaded. We’d also have to test to make sure that browsers not supporting the mask still provided an acceptable slideshow experience.\u003C\u002Fp>\n\u003Cp>We’re happy with the result, as is the firm, but please let us know if you can think of a better way to implement this feature. If you like implementing this sort of thing for a living, \u003Ca rel=\"noreferrer noopener\" href=\"mailto:recruitment@impression.co.uk\">we’re hiring\u003C\u002Fa>!\u003C\u002Fp>\n",false,"standard",[10],37,[],[13],135,[15,16,17,18,19,20,21,22],"post-3620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web",{"page_content_modules":24,"hero":129},[25,91],{"acf_fc_layout":26,"reduced":27,"top_overlap":-1,"bottom_underlap":-1,"disable_observer":27,"title":28,"content":6,"authors":29},"blog_post_content",true,"Reimagining Slideshow Transitions with CSS Mask Animations",[30],{"id":31,"path":32,"display_name":33,"job_title":34,"description":35,"avatar_url":36,"acf":37},33,"\u002Fabout\u002Four-team\u002Fimpression-team\u002F","Team Impression","","This post may have been written by a past member of the Impression team, or be a collaboration of us all. We hope you like it!","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=crop&fm=jpg&h=150&q=80&w=150&bg=CFE6F9",{"job_title":34,"full_bio":34,"specialist_service_links":7,"photo":38},{"ID":39,"id":39,"title":40,"filename":41,"filesize":42,"url":43,"link":44,"alt":34,"author":45,"description":34,"caption":34,"name":46,"status":47,"uploaded_to":42,"date":48,"modified":48,"menu_order":42,"mime_type":49,"type":50,"subtype":51,"icon":52,"width":53,"height":53,"sizes":54},12476,"Impression-Icon","Impression-Icon.jpg",0,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&q=90","\u002Fimpression-icon\u002F","12","impression-icon","inherit","2021-11-02 16:49:21","image\u002Fjpeg","image","jpeg","\u002Fwp\u002Fwp-includes\u002Fimages\u002Fmedia\u002Fdefault.png",500,{"thumbnail":55,"thumbnail-width":56,"thumbnail-height":56,"medium":57,"medium-width":58,"medium-height":58,"medium_large":59,"medium_large-width":60,"medium_large-height":60,"large":61,"large-width":62,"large-height":63,"1536x1536":64,"1536x1536-width":65,"1536x1536-height":65,"2048x2048":66,"2048x2048-width":67,"2048x2048-height":67,"post-thumbnail":68,"post-thumbnail-width":69,"post-thumbnail-height":70,"12_col":71,"12_col-width":72,"12_col-height":73,"default_landscape":74,"default_landscape-width":75,"default_landscape-height":76,"default_portrait":77,"default_portrait-width":76,"default_portrait-height":75,"6_col_and_margin_short":78,"6_col_and_margin_short-width":69,"6_col_and_margin_short-height":73,"11_col_and_margin":79,"11_col_and_margin-width":80,"11_col_and_margin-height":73,"9_col_rectangle":81,"9_col_rectangle-width":82,"9_col_rectangle-height":83,"11_col":84,"11_col-width":85,"11_col-height":73,"staff_image_696_600":86,"staff_image_696_600-width":87,"staff_image_696_600-height":76,"rectangular_thumbnail":88,"rectangular_thumbnail-width":89,"rectangular_thumbnail-height":90},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640","640","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=200&q=90&w=200",200,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=768&q=90&w=768",768,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1000&q=90&w=1892","1892","1000","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=1536&q=90&w=1536",1536,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=2048&q=90&w=2048",2048,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",1860,1180,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2880",2880,870,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=800",800,600,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=800&q=90&w=600","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=1860","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=3080",3080,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1400&q=90&w=2150",2150,1400,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2640",2640,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=696",696,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=300&q=90&w=750",750,300,{"acf_fc_layout":92,"reduced":27,"top_overlap":93,"bottom_underlap":93,"disable_observer":-1,"heading":94,"cta_text":95,"cta_link":96,"items":97},"related_module","small","See more posts","See all articles","\u002Fblog\u002F",[98,110,119],{"type_key":16,"title":99,"excerpt":100,"to":101,"postedAt":102,"readingTime":103,"image":104,"authors":105,"category":107},"Conquering the fear of HTML coding","\u003Cp>This post has been written by Alex Bennett. Alex is a final year English student from the University of Nottingham and is currently part of a 10-week placement with Impression. The prospect of learning to code can be daunting. There are loads of different languages that all do different things in different ways, and the […]\u003C\u002Fp>\n","\u002Fblog\u002Fconquering-the-fear-of-html-coding\u002F","2022-02-07T16:48:24",4,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FR0FY9Cp6-050720211625512429_christopher-gower-291246-unsplash-scaled.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[106],{"name":33,"image":36},{"to":108,"name":109},"\u002Fblog\u002Fcategory\u002Fweb\u002F","Web",{"type_key":16,"title":111,"excerpt":112,"to":113,"postedAt":114,"readingTime":103,"image":115,"authors":116,"category":118},"Best Sketch plugins for 2018","\u003Cp>Discover the best Sketch plugins, where and how you can get them, and how to make the most of them. What is Sketch? Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. […]\u003C\u002Fp>\n","\u002Fblog\u002Fbest-sketch-plugins-2018\u002F","2022-02-07T16:48:28","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002Fo5LExbve-050720211625518164_Sketch-blog-post-bg.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[117],{"name":33,"image":36},{"to":108,"name":109},{"type_key":16,"title":120,"excerpt":121,"to":122,"postedAt":123,"readingTime":124,"image":125,"authors":126,"category":128},"Why There’s Never Been a Better Time to Invest in Your Business Website","\u003Cp>While a new website might seem like a hefty commitment, recent updates from Google and trends toward a more technically-advanced web approach mean that we suggest there’s never been a better time to review your online presence and invest in making it the best it can be. Here, we explain what you should be reviewing […]\u003C\u002Fp>\n","\u002Fblog\u002Fweb-2018-theres-never-better-time-invest-business-website\u002F","2022-02-07T16:48:30",17,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FQ77g1pcS-050720211625519452_business-websites.jpeg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[127],{"name":33,"image":36},{"to":108,"name":109},{"type":130,"style":131,"heading":28,"date":4,"updatedAt":123,"reading_minutes":132,"image":133,"imageAlt":28,"categories":134,"collections":318},"blog-post","light",5,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FiEqQ2QgK-050720211625519534_spearing-waite-banner.jpg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",[135],{"id":10,"count":136,"description":137,"link":108,"name":109,"slug":138,"taxonomy":139,"parent":42,"meta":140,"acf":141,"head_links":142,"resource_count":42,"yoast_title":143,"yoast_meta":144,"yoast_json_ld":188,"_links":286,"path":108},38,"The way your website is designed and developed has a huge effect on the user experience and likelihood of conversion.\r\n\r\nImpression is an award winning digital agency which delivers results-focused, data driven web projects for a wide range of clients. Our in-house team of designers and web developers works closely with our marketing team to produce \u003Cem>performance websites\u003C\u002Fem> which don't just look great, they perform well across all channels, including search, too.\r\n\r\nCheck out our latest tips, advice, guides and insights into the world of web development now.","web","category",[],{"hidden":27,"sub_title_override":34,"title_override":34},[],"Web Development Blog | Tips, Advice & Guides | Impression",[145,147,150,153,156,159,162,164,166,168,171,174,177,180,182,185],{"property":146,"content":143},"title",{"property":148,"content":149},"description","Keeping up to date with the latest web design & dev trends, strategies, and industry movements can be difficult. Browse our latest web development blogs!",{"name":151,"content":152},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"property":154,"content":155},"canonical","https:\u002F\u002Fadmin.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"name":157,"content":158},"og:locale","en-GB",{"property":160,"content":161},"og:type","article",{"property":163,"content":143},"og:title",{"property":165,"content":149},"og:description",{"property":167,"content":155},"og:url",{"property":169,"content":170},"og:site_name","Impression",{"property":172,"content":173},"og:image","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F06\u002FABFPXguH-Opengraph-BLUE.jpg?auto=compress%2Cformat&q=90",{"property":175,"content":176},"og:image:width",1200,{"property":178,"content":179},"og:image:height",630,{"property":181,"content":49},"og:image:type",{"property":183,"content":184},"twitter:card","summary_large_image",{"property":186,"content":187},"twitter:site","@impressiontalk",{"@context":189,"@graph":190},"https:\u002F\u002Fschema.org",[191,199,209,219],{"@type":192,"@id":193,"url":193,"name":143,"isPartOf":194,"description":149,"breadcrumb":196,"inLanguage":198},"CollectionPage","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"@id":195},"https:\u002F\u002Fwww.impressiondigital.com\u002F#website",{"@id":197},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F#breadcrumb","en",{"@type":200,"@id":197,"itemListElement":201},"BreadcrumbList",[202,207],{"@type":203,"position":204,"name":205,"item":206},"ListItem",1,"Home","https:\u002F\u002Fwww.impressiondigital.com\u002F",{"@type":203,"position":208,"name":109},2,{"@type":210,"@id":195,"url":206,"name":170,"description":34,"publisher":211,"inLanguage":158,"potentialAction":213},"WebSite",{"@id":212},"https:\u002F\u002Fwww.impressiondigital.com\u002F#organization",{"@type":214,"target":215,"query-input":218},"SearchAction",{"@type":216,"urlTemplate":217},"EntryPoint","https:\u002F\u002Fwww.impressiondigital.com\u002Fsearch?q={search_term_string}","required name=search_term_string",{"@type":220,"@id":212,"name":170,"url":206,"logo":221,"image":227,"sameAs":228,"@context":232,"email":233,"foundingDate":234,"legalName":235,"vatID":236,"description":237,"telephone":238,"address":239,"location":246,"areaServed":279},"Organization",{"@type":222,"inLanguage":158,"@id":223,"url":224,"contentUrl":224,"width":225,"height":226,"caption":170},"ImageObject","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Flogo\u002Fimage\u002F","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F06\u002FA5LuTDrq-Impression_Wordmark.png",920,176,"https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FFAVxDeOS-Nottingham.jpg",[229,230,231],"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fimpression-digital-limited","https:\u002F\u002Fwww.facebook.com\u002Fimpression\u002F","https:\u002F\u002Fwww.instagram.com\u002Fimpressiontalk\u002F","https:\u002F\u002Fwww.schema.org\u002F","hello@impressiondigital.com","2012-11-07","Impression Digital Limited","GB186363774","Impression is an award-winning digital marketing agency based in the UK and USA. We offer SEO agency, PPC agency, Digital PR agency and Analytics services to companies of all sizes across the UK, North America, Europe and beyond. Get in touch with us if you think we can work together.","01158 242 212",{"@type":240,"streetAddress":241,"addressLocality":242,"addressRegion":243,"postalCode":244,"addressCountry":245},"PostalAddress","Fothergill House, 16 King Street","Nottingham","Nottinghamshire","NG1 2AS","United Kingdom",[247,256,268],{"@type":248,"name":249,"geo":250,"address":254,"photo":227,"telephone":255},"Place","Impression Digital - Nottingham",{"@type":251,"latitude":252,"longitude":253},"GeoCoordinates","52.95501401025914","-1.1494887460285232",{"@type":240,"streetAddress":241,"addressLocality":242,"addressRegion":243,"postalCode":244,"addressCountry":245},"+44 01158 242 212",{"@type":248,"name":257,"geo":258,"address":261,"photo":266,"telephone":267},"Impression Digital - London",{"@type":251,"latitude":259,"longitude":260},"51.50237208377361","-0.09229841534284115",{"@type":240,"streetAddress":262,"addressLocality":263,"addressRegion":264,"postalCode":265,"addressCountry":245},"201 Borough High St","Southwark","London","SE1 1JA","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FwD0pPVWz-London.jpg","+44 020 7112 8148",{"@type":248,"name":269,"geo":270,"address":273},"Impression Digital - New York",{"@type":251,"latitude":271,"longitude":272},"40.726722746949","-74.00527778220652",{"@type":240,"streetAddress":274,"addressLocality":275,"addressRegion":276,"postalCode":277,"addressCountry":278},"160 Varick St","New York","NY","10013","USA",[280,283,285],{"@type":281,"name":282},"Country","Worldwide",{"@type":281,"name":284},"GBR",{"@type":281,"name":278},{"self":287,"collection":297,"about":300,"wp:post_type":303,"curies":314},[288],{"href":289,"targetHints":290},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories\u002F37",{"allow":291},[292,293,294,295,296],"GET","POST","PUT","PATCH","DELETE",[298],{"href":299},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories",[301],{"href":302},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fcategory",[304,306,308,310,312],{"href":305},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?categories=37",{"href":307},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwhite_papers?categories=37",{"href":309},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftools?categories=37",{"href":311},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwebinars?categories=37",{"href":313},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fevents?categories=37",[315],{"name":316,"href":317,"templated":27},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[],[],[321,323,325,326],{"path":322,"name":205},"\u002F",{"path":96,"name":324},"Blog",{"path":108,"name":109},{"path":327,"name":28},null,[329],{"id":10,"name":109,"path":108},{"title":331,"script":332,"meta":408,"link":436},"Reimagining Slideshow Transitions with CSS Mask Animations - Impression",[333],{"type":334,"key":335,"innerHTML":336},"application\u002Fld+json","yoast-json-ld",{"@context":189,"@graph":337},[338,361,368,371,379,383,401],{"@type":339,"@id":340,"isPartOf":341,"author":343,"headline":28,"datePublished":345,"dateModified":346,"mainEntityOfPage":347,"wordCount":348,"commentCount":42,"publisher":349,"image":351,"thumbnailUrl":353,"articleSection":354,"inLanguage":158,"potentialAction":355},"Article","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Freimagining-slideshow-transitions-css-masks\u002F#article",{"@id":342},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Freimagining-slideshow-transitions-css-masks\u002F",{"name":33,"@id":344},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6","2018-05-03T10:30:25+00:00","2022-02-07T16:48:30+00:00",{"@id":342},972,{"@id":350},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#organization",{"@id":352},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Freimagining-slideshow-transitions-css-masks\u002F#primaryimage","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FiEqQ2QgK-050720211625519534_spearing-waite-banner.jpg?auto=compress%2Cformat&q=90",[109],[356],{"@type":357,"name":358,"target":359},"CommentAction","Comment",[360],"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Freimagining-slideshow-transitions-css-masks\u002F#respond",{"@type":362,"@id":342,"url":342,"name":331,"isPartOf":363,"primaryImageOfPage":364,"image":365,"thumbnailUrl":353,"datePublished":345,"dateModified":346,"breadcrumb":366,"inLanguage":198},"WebPage",{"@id":195},{"@id":352},{"@id":352},{"@id":367},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Freimagining-slideshow-transitions-css-masks\u002F#breadcrumb",{"@type":222,"inLanguage":158,"@id":352,"url":353,"contentUrl":353,"width":369,"height":370},2500,640,{"@type":200,"@id":367,"itemListElement":372},[373,374,376,378],{"@type":203,"position":204,"name":205,"item":206},{"@type":203,"position":208,"name":324,"item":375},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002F",{"@type":203,"position":377,"name":109,"item":193},3,{"@type":203,"position":103,"name":28},{"@type":210,"@id":195,"url":206,"name":170,"description":34,"publisher":380,"inLanguage":158,"potentialAction":381},{"@id":212},{"@type":214,"target":382,"query-input":218},{"@type":216,"urlTemplate":217},{"@type":220,"@id":212,"name":170,"url":206,"logo":384,"image":227,"sameAs":385,"@context":232,"email":233,"foundingDate":234,"legalName":235,"vatID":236,"description":237,"telephone":238,"address":386,"location":387,"areaServed":397},{"@type":222,"inLanguage":158,"@id":223,"url":224,"contentUrl":224,"width":225,"height":226,"caption":170},[229,230,231],{"@type":240,"streetAddress":241,"addressLocality":242,"addressRegion":243,"postalCode":244,"addressCountry":245},[388,391,394],{"@type":248,"name":249,"geo":389,"address":390,"photo":227,"telephone":255},{"@type":251,"latitude":252,"longitude":253},{"@type":240,"streetAddress":241,"addressLocality":242,"addressRegion":243,"postalCode":244,"addressCountry":245},{"@type":248,"name":257,"geo":392,"address":393,"photo":266,"telephone":267},{"@type":251,"latitude":259,"longitude":260},{"@type":240,"streetAddress":262,"addressLocality":263,"addressRegion":264,"postalCode":265,"addressCountry":245},{"@type":248,"name":269,"geo":395,"address":396},{"@type":251,"latitude":271,"longitude":272},{"@type":240,"streetAddress":274,"addressLocality":275,"addressRegion":276,"postalCode":277,"addressCountry":278},[398,399,400],{"@type":281,"name":282},{"@type":281,"name":284},{"@type":281,"name":278},{"@type":402,"@id":403,"name":33,"image":404,"description":35,"url":407},"Person","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6",{"@type":222,"inLanguage":158,"@id":405,"url":406,"contentUrl":406,"caption":33},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96124cc556989aa8a89f2f74da512d68e4","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96","https:\u002F\u002Fwww.impressiondigital.com\u002Fabout\u002Four-team\u002Fimpression-team\u002F",[409,410,412,413,414,416,417,418,421,423,425,427,428,429,430,432,433,435],{"name":151,"content":152},{"property":157,"content":411},"en_GB",{"property":160,"content":161},{"property":163,"content":331},{"property":165,"content":415},"When the law firm Spearing Waite asked Impression to help overhaul its online presence by rebuilding its existing website from the ground up, we knew that we needed some sort of ‘wow factor’ to differentiate the firm from its many competitors. One of the ideas was to use the firm’s leaf-shaped logo to progressively reveal images […]",{"property":167,"content":342},{"property":169,"content":170},{"property":419,"content":420},"article:publisher","https:\u002F\u002Fwww.facebook.com\u002Fimpression",{"property":422,"content":345},"article:published_time",{"property":424,"content":346},"article:modified_time",{"property":172,"content":426},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FiEqQ2QgK-050720211625519534_spearing-waite-banner.jpg?auto=compress%2Cformat",{"property":175,"content":369},{"property":178,"content":370},{"property":181,"content":49},{"name":431,"content":33},"author",{"name":183,"content":184},{"name":434,"content":187},"twitter:creator",{"name":186,"content":187},[]]