barbican-reset 1.6.9 → 1.7.0

package/animations/confirm.js

@@ -0,0 +1,62 @@
+import gsap from 'gsap'
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
+
+gsap.registerPlugin(DrawSVGPlugin);
+
+const fadeIn = {
+  duration: 0.3,
+  opacity: 0,
+  delay: 0.3,
+};
+
+const explode = {
+  ease: "power1.out",
+  opacity: 0,
+  scale: 1.5,
+};
+
+const defaults = {
+  duration: 0.6, 
+  ease: "power1.in", 
+  transformOrigin: "center"
+}
+
+export const animateEmail = () => {
+  const query = target => document.querySelector(`.card[email] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const arrow = query(".arrow");
+  const fold = query(".fold");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.set(arrow, { opacity: 0 })
+    .from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(fold, { drawSVG: "0%", duration: 0.3 }, "start")
+    .to(clone, explode, "start")
+    .set(arrow, { opacity: 1 })
+    .from(arrow, { x: -6, ease: "power1.out" });
+}
+
+export const animateDone = () => {
+  const query = target => document.querySelector(`.card[done] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const tick = query(".tick");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(tick, { drawSVG: "0%", duration: 0.3 }, "start+=0.3")
+    .to(clone, explode, "start");
+}

package/animations/index.js

@@ -0,0 +1,8 @@
+import { animateEmail, animateDone } from './confirm'
+
+export default {
+  methods: {
+    animateEmail,
+    animateDone,
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -15,6 +15,7 @@
   "files": [
     "fonts/*.{woff,woff2}",
     "focus-visible.min.js",
+    "animations/**/*",
     "components/**/*",
     "helpers/**/*",
     "icons/**/*",