{"title":"Animations","description":"","products":[{"product_id":"double-image-flip","title":"Double Image Flip","description":"\u003cp data-start=\"675\" data-end=\"926\"\u003eBuilt for designers who care about details. \u003c\/p\u003e\n\u003cp data-start=\"675\" data-end=\"926\"\u003e\u003cmeta charset=\"utf-8\"\u003eDouble Image Flip creates a double-sided image that rotates on a 3D axis, revealing a second image through smooth, continuous motion. Subtle, intentional, and visually striking — this component adds depth without overwhelming your design.\u003c\/p\u003e\n\u003cp data-start=\"1395\" data-end=\"1410\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cstrong\u003eImages\u003c\/strong\u003e – Front and Back\u003c\/li\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cstrong\u003eSize\u003c\/strong\u003e – Scale to fit your layout\u003c\/li\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cstrong\u003eSpeed\u003c\/strong\u003e – Adjust rotation speed\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cp data-end=\"82\" data-start=\"62\" data-section-id=\"170ewvu\"\u003e\u003cspan role=\"text\"\u003eWHAT'S INCLUDED:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp data-start=\"1063\" data-end=\"1250\"\u003eA simple step-by-step PDF guide is included with your purchase. Installs in minutes using Showit’s Custom Code settings and a single embed — just copy, paste, and update your image links.\u003c\/p\u003e\n\u003cp data-start=\"1252\" data-end=\"1361\"\u003eIncludes one CSS block and one embed snippet, both clearly labeled so you know exactly where everything goes.\u003c\/p\u003e\n\u003cp data-start=\"1363\" data-end=\"1436\"\u003eWorks seamlessly on desktop and mobile with no additional setup required.\u003c\/p\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":44784891723846,"sku":null,"price":9.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/DoubleImageSpin-ExampleVideo.gif?v=1774066649"},{"product_id":"image-stack-peel","title":"Image Stack Peel","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-end=\"1143\" data-start=\"1059\"\u003eDEMO LINK: \u003ca href=\"https:\/\/image-stack-peel.showit.site\/\"\u003ehttps:\/\/image-stack-peel.showit.site\/\u003c\/a\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\n\u003cdiv class=\"text-center\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-start=\"51\" data-end=\"194\"\u003eImage Stack Peel creates a layered scroll-based animation for your Showit website where stacked images peel away one-by-one as visitors scroll.\u003c\/p\u003e\n\u003cp data-start=\"196\" data-end=\"453\"\u003eInstead of building multiple overlapping canvases in Showit and manually adjusting spacing, layering, and responsiveness yourself, this component is already pre-configured for you. Simply replace the 4 image links with your own photos and publish your site.\u003c\/p\u003e\n\u003cp data-start=\"455\" data-end=\"629\"\u003eDesigned to feel cinematic, tactile, and editorial, this component transforms static imagery into a more immersive interactive experience without the usual setup frustration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-end=\"2029\" data-start=\"2009\" data-section-id=\"q1y7di\"\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul data-end=\"2137\" data-start=\"2031\"\u003e\n\u003cli data-end=\"2067\" data-start=\"2031\" data-section-id=\"1g0z4ss\"\u003eReplace the 4 images with your own\u003c\/li\u003e\n\u003cli data-end=\"2137\" data-start=\"2068\" data-section-id=\"1ovodf2\"\u003eCorner Radius — Adjust image rounding to match your website style\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp data-section-id=\"1hm8c6y\" data-start=\"2144\" data-end=\"2162\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003eInstall the Showit page in minutes using Showit’s Share Key. A detailed instruction guide is included to walk you through setup and customization. \u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003e\u003cmeta charset=\"utf-8\"\u003ePLEASE NOTE: The other canvases shown in the video are an example. They do not have to be used. They're just shown so you can see the effect. \u003c\/p\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45080162172998,"sku":null,"price":9.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-ImageStackPeel.gif?v=1779604626"}],"url":"https:\/\/showcodestudio.com\/collections\/animation.oembed","provider":"ShowCode Studio","version":"1.0","type":"link"}