Skip to content

Commit

Permalink
Tavano/add animation (#74)
Browse files Browse the repository at this point in the history
* add animation at storefront

* fmt

* remove animation class of components and insert async at script
  • Loading branch information
guitavano authored Dec 12, 2023
1 parent c25b89c commit 090ac54
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 44 deletions.
90 changes: 46 additions & 44 deletions manifest.gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,28 +16,29 @@ import * as $$$$$$8 from "./sections/Layout/Container.tsx";
import * as $$$$$$9 from "./sections/Layout/Grid.tsx";
import * as $$$$$$10 from "./sections/Layout/Flex.tsx";
import * as $$$$$$11 from "./sections/Layout/GridItem.tsx";
import * as $$$$$$12 from "./sections/Content/Testimonials.tsx";
import * as $$$$$$13 from "./sections/Content/Logos.tsx";
import * as $$$$$$14 from "./sections/Content/Faq.tsx";
import * as $$$$$$15 from "./sections/Content/Benefits.tsx";
import * as $$$$$$16 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$17 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$18 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$19 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$20 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$21 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$22 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$23 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$24 from "./sections/Product/NotFound.tsx";
import * as $$$$$$25 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$26 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$27 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$28 from "./sections/Social/InstagramPosts.tsx";
import * as $$$$$$29 from "./sections/Theme/Theme.tsx";
import * as $$$$$$30 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$31 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$32 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$33 from "./sections/Header/Header.tsx";
import * as $$$$$$12 from "./sections/Animation/Animation.tsx";
import * as $$$$$$13 from "./sections/Content/Testimonials.tsx";
import * as $$$$$$14 from "./sections/Content/Logos.tsx";
import * as $$$$$$15 from "./sections/Content/Faq.tsx";
import * as $$$$$$16 from "./sections/Content/Benefits.tsx";
import * as $$$$$$17 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$18 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$19 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$20 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$21 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$22 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$23 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$24 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$25 from "./sections/Product/NotFound.tsx";
import * as $$$$$$26 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$27 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$28 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$29 from "./sections/Social/InstagramPosts.tsx";
import * as $$$$$$30 from "./sections/Theme/Theme.tsx";
import * as $$$$$$31 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$32 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$33 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$34 from "./sections/Header/Header.tsx";
import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
import * as $$$$$$$$$$$1 from "./apps/site.ts";

Expand All @@ -47,15 +48,16 @@ const manifest = {
"deco-sites/storefront/loaders/List/Sections.tsx": $$$1,
},
"sections": {
"deco-sites/storefront/sections/Animation/Animation.tsx": $$$$$$12,
"deco-sites/storefront/sections/Category/CategoryBanner.tsx": $$$$$$2,
"deco-sites/storefront/sections/Category/CategoryList.tsx": $$$$$$3,
"deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$15,
"deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$14,
"deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$13,
"deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$12,
"deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$16,
"deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$15,
"deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$14,
"deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$13,
"deco-sites/storefront/sections/Footer/Footer.tsx": $$$$$$1,
"deco-sites/storefront/sections/Gallery.tsx": $$$$$$0,
"deco-sites/storefront/sections/Header/Header.tsx": $$$$$$33,
"deco-sites/storefront/sections/Header/Header.tsx": $$$$$$34,
"deco-sites/storefront/sections/Images/BannerGrid.tsx": $$$$$$5,
"deco-sites/storefront/sections/Images/Carousel.tsx": $$$$$$7,
"deco-sites/storefront/sections/Images/ImageGallery.tsx": $$$$$$6,
Expand All @@ -64,24 +66,24 @@ const manifest = {
"deco-sites/storefront/sections/Layout/Flex.tsx": $$$$$$10,
"deco-sites/storefront/sections/Layout/Grid.tsx": $$$$$$9,
"deco-sites/storefront/sections/Layout/GridItem.tsx": $$$$$$11,
"deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$30,
"deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$31,
"deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$25,
"deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$26,
"deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$32,
"deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$31,
"deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$32,
"deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$26,
"deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$27,
"deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$33,
"deco-sites/storefront/sections/Product/ImageGalleryFrontBack.tsx":
$$$$$$22,
"deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$21,
"deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$24,
"deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$17,
"deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$19,
"deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$20,
"deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$23,
"deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$18,
"deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$16,
"deco-sites/storefront/sections/Social/InstagramPosts.tsx": $$$$$$28,
"deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$27,
"deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$29,
$$$$$$23,
"deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$22,
"deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$25,
"deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$18,
"deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$20,
"deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$21,
"deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$24,
"deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$19,
"deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$17,
"deco-sites/storefront/sections/Social/InstagramPosts.tsx": $$$$$$29,
"deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$28,
"deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$30,
},
"apps": {
"deco-sites/storefront/apps/decohub.ts": $$$$$$$$$$$0,
Expand Down
155 changes: 155 additions & 0 deletions sections/Animation/Animation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import { Section } from "deco/blocks/section.ts";
import { useId } from "$store/sdk/useId.ts";

const animationClasses = {
"fade-in": "animate-fade-in",
"fade-in-bottom": "animate-fade-in-bottom",
"slide-left": "animate-slide-left",
"slide-right": "animate-slide-right",
"zoom-in": "animate-zoom-in",
};

interface Children {
label?: string;
section: Section;
}

interface Props {
animationType?:
| "fade-in"
| "fade-in-bottom"
| "slide-left"
| "slide-right"
| "zoom-in";
/**
* @default 0.3
*/
duration?: string;
children: Children;
}

function Animation(
{ children, animationType = "fade-in", duration = "0.3" }: Props,
) {
const { section } = children;

const { Component, props } = section;
const id = useId();

const animationClass = animationClasses[animationType];

return (
<>
<style
dangerouslySetInnerHTML={{ __html: animationByType[animationType] }}
>
</style>
<div
id={id}
class="opacity-0"
style={{ animationDuration: duration + "s" }}
>
<Component {...props} />
</div>
<script
async={true}
dangerouslySetInnerHTML={{
__html: `
var observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("${animationClass}");
entry.target.classList.remove("opacity-0");
observer.disconnect();
}
});
}, { threshold: 0.50 });
var element = document.getElementById('${id}');
observer.observe(element);
`,
}}
/>
</>
);
}

export default Animation;

const animationByType = {
"fade-in": `
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fade-in {
animation: fade-in 1s ease-out;
}
`,
"fade-in-bottom": `
@keyframes fade-in-bottom {
from {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.animate-fade-in-bottom {
animation: fade-in-bottom 1s ease-out;
}
`,
"slide-left": `
@keyframes slide-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.animate-slide-left {
animation: slide-left 1s ease-out;
}
`,
"slide-right": `
@keyframes slide-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.animate-slide-right {
animation: slide-right 1s ease-out;
}
`,
"zoom-in": `
@keyframes zoom-in {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.animate-zoom-in {
animation: zoom-in 1s ease-out;
}
`,
};

0 comments on commit 090ac54

Please sign in to comment.