{"id":11603,"date":"2018-12-21T11:00:28","date_gmt":"2018-12-21T11:00:28","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=11603"},"modified":"2018-12-21T11:03:26","modified_gmt":"2018-12-21T11:03:26","slug":"before-after-slider-gallery-with-svg-masks","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/before-after-slider-gallery-with-svg-masks\/","title":{"rendered":"BEFORE &#038; AFTER SLIDER GALLERY WITH SVG MASKS"},"content":{"rendered":"\n<p>A little experiment for a before &amp; after slider all inside a SVG. Masking makes it pretty simple. Since it\u2019s all SVG, the images and captions scale nicely together. GreenSock\u2019s Draggable and ThrowProps plugins were used for the slider control.<br>Made by Craig Roblewsky<br>April 17, 2017<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/PointC\/share\/zip\/LyEqGe\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/PointC\/pen\/LyEqGe\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"A little experiment for a before &amp; after slider all inside a SVG. Masking makes it pretty simple. Since it\u2019s all SVG, the images and captions scale nicely together. GreenSock\u2019s Draggable and ThrowProps plugins were used for the slider control.Made by Craig RoblewskyApril 17, 2017<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":11609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3171],"tags":[3178,3174,20,3167],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/11603"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=11603"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/11603\/revisions"}],"predecessor-version":[{"id":11614,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/11603\/revisions\/11614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/11609"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=11603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=11603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=11603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}