https://brandbreed-734ea8385f4bd3404fbfc9a24723.webflow.io/

1<!DOCTYPE html><!-- Last Published: Thu Jun 01 2023 19:36:21 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="brandbreed-734ea8385f4bd3404fbfc9a24723.webflow.io" data-wf-page="6478e74997dcef977523fe4f" data-wf-site="6478e74997dcef977523fe55"><head><meta charset="utf-8"/><title>Brand Breed - E-commerce Branding  Service</title><meta content="#1 Subscription-based branding &amp; development service for e-commerce stores. We turn stores into brands with a loyal follower breed." name="description"/><meta content="Brand Breed - E-commerce Branding  Service" property="og:title"/><meta content="#1 Subscription-based branding &amp; development service for e-commerce stores. We turn stores into brands with a loyal follower breed." property="og:description"/><meta content="https://assets.website-files.com/6470107de8327f36a74c8dc1/64711a040076accc9994c957_webclip.jpg" property="og:image"/><meta content="Brand Breed - E-commerce Branding  Service" property="twitter:title"/><meta content="#1 Subscription-based branding &amp; development service for e-commerce stores. We turn stores into brands with a loyal follower breed." property="twitter:description"/><meta content="https://assets.website-files.com/6470107de8327f36a74c8dc1/64711a040076accc9994c957_webclip.jpg" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://assets.website-files.com/6478e74997dcef977523fe55/css/brandbreed-734ea8385f4bd3404fbfc9a24723.ec2f3b387.css" rel="stylesheet" type="text/css"/>

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8a_32x32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8b_256x256.png" rel="apple-touch-icon"/></head><body><div class="page-wrapper"><div class="main-wrapper"><div class="plugin-page_nav-wrapper"><div class="padding-global"><div class="container-large"><div class="plugin-page_navigation"><a href="https://brandbreed.co?ref=cloneable" class="w-inline-block"><img src="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe85_Frame%20295.webp" loading="lazy" data-sizes="[{&quot;max&quot;:767,&quot;size&quot;:&quot;100vw&quot;},{&quot;max&quot;:1919,&quot;size&quot;:&quot;180px&quot;},{&quot;max&quot;:10000,&quot;size&quot;:&quot;256px&quot;}]" alt="Braand Breed Logo" class="logo"/></a><a faValue="0" faClick="" faID="QRODR0AP" href="https://usefathom.com/ref/IECEKD" class="link-block remove-link-branding text-color-pale_white w-inline-block"><div class="text-size-small">Signup for Fathom Analytics</div><img src="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8c_open_in_new.svg" loading="lazy" alt="" class="icon-small"/></a></div></div></div></div><section id="header" class="section-plugin_header wf-section"><div class="padding-global"><div class="container-large"><div class="plugin-header"><div class="plugin-header-wrapper"><div class="headr-left"><h1 text-split="" words-slide-up="" class="heading-large max-widh-12ch">fa/flow Plugin for Webflow</h1><div words-slide-up="text-split" class="text-size-regular">Easily setup GDPR Compliant fathom analytics event tracking using custom attributes in Webflow.</div><div class="form-block w-form"><form method="get" name="email-form" data-name="Email Form" faValue="0" faID="RUPTHHOD" id="email-form" faform="" class="form"><input type="text" class="text-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="Email Address" id="Email" required=""/><input type="submit" value="Get Access" data-wait="Please wait..." class="button _100-width w-button"/></form><div class="success-message w-form-done"><div class="text-size-regular text-color-pale_white">🥳 Email is on your way with link to the plugin.</div></div><div class="error-message w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div><img src="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8e_Group%20331.webp" loading="lazy" sizes="(max-width: 479px) 90vw, (max-width: 612px) 85vw, 521px" srcset="https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8e_Group%2520331-p-500.png 500w, https://assets.website-files.com/6478e74997dcef977523fe55/6478e74997dcef977523fe8e_Group%20331.webp 521w" alt="fathom Webflow plugin" class="header-image"/></div></div></div></div></section><section id="docs" class="section-plugin_docs wf-section"><div class="padding-global"><div class="container-large"><div class="plugin-docs_wrapper"><h1 text-split="" words-slide-up="" class="heading-medium">Setup Guide</h1><div data-current="Tab 1" data-easing="ease" data-duration-in="300" data-duration-out="100" class="docs-tabs_wrapper w-tabs"><div class="plugin-docs_tabs w-tab-menu"><a data-w-tab="Tab 1" class="tab-button w-inline-block w-tab-link w--current"><div>Setup Plugin</div></a><a data-w-tab="Tab 2" class="tab-button w-inline-block w-tab-link"><div>Setup Project</div></a><a data-w-tab="Tab 4" class="tab-button w-inline-block w-tab-link"><div>Create Events</div></a><a data-w-tab="Tab 5" class="tab-button w-inline-block w-tab-link"><div>Track Button</div></a><a data-w-tab="Tab 6" class="tab-button w-inline-block w-tab-link"><div>Track Forms</div></a><a data-w-tab="Tab 7" class="tab-button w-inline-block w-tab-link"><div>Track Page</div></a></div><div class="plugin-docs_content_wrapper w-tab-content"><div data-w-tab="Tab 1" class="plugin-doccs_tab w-tab-pane w--tab-active"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Setup_Plugin_and_Webflow_Project__rsIHUrbXSyq5xKTGwAwb3g" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div><div data-w-tab="Tab 2" class="plugin-doccs_tab w-tab-pane"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Setup_Project_in_Webflow__JmI5u2ZTRh-ejuyHFxVE7A" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div><div data-w-tab="Tab 4" class="plugin-doccs_tab w-tab-pane"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Adding_Event_to_faflow_in_Brandbreed_Website_Design__chbUJ_F8R26Xkr6_hOBKrA" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div><div data-w-tab="Tab 5" class="plugin-doccs_tab w-tab-pane"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Track_Button_Clicks__cc8xHmO3SZqTZ0pSDF7axA" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div><div data-w-tab="Tab 6" class="plugin-doccs_tab w-tab-pane"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Track_Form_Submission__mTidfFyhQEWPpu8e4L3D6g" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div><div data-w-tab="Tab 7" class="plugin-doccs_tab w-tab-pane"><div class="scribe-embed w-embed w-iframe"><iframe src="https://scribehow.com/embed/Track_Page_Load__EWj2CAl5SZenYcxNmb4TGw" width="100%" height="640" allowfullscreen frameborder="0"></iframe></div></div></div></div></div></div></div></section></div><section class="section-footer wf-section"><div class="padding-global"><div class="container-large"><div class="footer-wrapper"><div class="footer-left"><h4 class="logo-heading">Brand Breed</h4><div bind="dc04f9b8-9586-563e-2f33-1392eaa8b859" class="text-size-small w-embed w-script"><p>

1Copyright ©

1<script>document.write(new Date().getFullYear());</script>

1  Brand Breed - Based in Raincouver</p></div><a href="https://usefathom.com/ref/IECEKD" target="_blank" class="remove-link-branding text-color-white w-inline-block"><p class="text-size-small">Analytics powered by Fathom/</p></a></div><div class="footer-right"><a href="https://thethind.notion.site/Terms-of-Service-7d17ecb40a4442a7953ba93e031a4781" class="text-size-regular remove-link-branding text-color-pale_white">Terms of service</a><div class="hide-mobile_portrait">.</div><a href="https://thethind.notion.site/Privacy-Policy-991b43b722694936b80b76c6cd70527e" class="text-size-regular remove-link-branding text-color-pale_white">Privacy Policy</a></div></div></div></div></section><div class="grain"><div bind="7d177c4f-acd4-0e67-cddc-abdd5a3f58d7" class="w-embed"><style>
2
3.grain { pointer-events: none; }
4
5</style></div></div></div>

5<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6478e74997dcef977523fe55" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

5<script src="https://assets.website-files.com/6478e74997dcef977523fe55/js/brandbreed-734ea8385f4bd3404fbfc9a24723.cb7ea2d5f.js" type="text/javascript"></script>

5]

5<script src="https://unpkg.com/split-type"></script>

5

6<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

6
7

8<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

8

9<script>
10window.addEventListener("DOMContentLoaded", (event) => {
11  // Split text into spans
12  let typeSplit = new SplitType("[text-split]", {
13    types: "words, chars",
14    tagName: "span"
15  });
16
17  // Link timelines to scroll position
18  function createScrollTrigger(triggerElement, timeline) {
19    // Reset tl when scroll out of view past bottom of screen
20    ScrollTrigger.create({
21      trigger: triggerElement,
22      start: "top bottom",
23      onLeaveBack: () => {
24        timeline.progress(0);
25        timeline.pause();
26      }
27    });
28    // Play tl when scrolled into view (60% from top of screen)
29    ScrollTrigger.create({
30      trigger: triggerElement,
31      start: "top 80%",
32      onEnter: () => timeline.play()
33    });
34  }
35
36  $("[words-slide-up]").each(function (index) {
37    let tl = gsap.timeline({ paused: true });
38    tl.from($(this).find(".word"), { opacity: 0, yPercent: 100, duration: 0.5, ease: "back.out(2)", stagger: { amount: 0.5 } });
39    createScrollTrigger($(this), tl);
40  });
41
42  $("[words-rotate-in]").each(function (index) {
43    let tl = gsap.timeline({ paused: true });
44    tl.set($(this).find(".word"), { transformPerspective: 1000 });
45    tl.from($(this).find(".word"), { rotationX: -90, duration: 0.2, ease: "power2.out", stagger: { amount: 0.6 } });
46    createScrollTrigger($(this), tl);
47  });
48
49  $("[words-slide-from-right]").each(function (index) {
50    let tl = gsap.timeline({ paused: true });
51    tl.from($(this).find(".word"), { opacity: 0, x: "1em", duration: 0.6, ease: "power2.out", stagger: { amount: 0.2 } });
52    createScrollTrigger($(this), tl);
53  });
54
55  $("[letters-slide-up]").each(function (index) {
56    let tl = gsap.timeline({ paused: true });
57    tl.from($(this).find(".char"), { yPercent: 100, duration: 0.2, ease: "power1.out", stagger: { amount: 0.6 } });
58    createScrollTrigger($(this), tl);
59  });
60
61  $("[letters-slide-down]").each(function (index) {
62    let tl = gsap.timeline({ paused: true });
63    tl.from($(this).find(".char"), { yPercent: -120, duration: 0.1, ease: "power1.out", stagger: { amount: 0.7 } });
64    createScrollTrigger($(this), tl);
65  });
66
67  $("[letters-fade-in]").each(function (index) {
68    let tl = gsap.timeline({ paused: true });
69    tl.from($(this).find(".char"), { opacity: 0, duration: 0.2, ease: "power1.out", stagger: { amount: 0.8 } });
70    createScrollTrigger($(this), tl);
71  });
72
73  $("[letters-fade-in-random]").each(function (index) {
74    let tl = gsap.timeline({ paused: true });
75    tl.from($(this).find(".char"), { opacity: 0, duration: 0.05, ease: "power1.out", stagger: { amount: 0.4, from: "random" } });
76    createScrollTrigger($(this), tl);
77  });
78
79  $("[scrub-each-word]").each(function (index) {
80    let tl = gsap.timeline({
81      scrollTrigger: {
82        trigger: $(this),
83        start: "top 90%",
84        end: "top center",
85        scrub: true
86      }
87    });
88    tl.from($(this).find(".word"), { opacity: 0.2, duration: 0.2, ease: "power1.out", stagger: { each: 0.4 } });
89  });
90
91  // Avoid flash of unstyled content

92  gsap.set("[text-split]", { opacity: 1 });
93});
94</script>

94
95
96
97</body></html>