Shopify Equity

  • Tools

    TypeScript, SCSS

  • Role


  • Agency

    Playground Inc.

  • Website

    View Website

How do you say thank you to all the Shopify Partners who have helped in your journey? You give them their very own credits site!

Good Neighbour Home Page

Working with the Shopify team in December 2019, we were tasked with building a site that would allow Shopify to feature their partners through an interactive experience.

The challenge though, was that unless you're a Shopify employee, you don't have access to build within their codebase. We solved that problem by publishing an NPM package that would allow Shopify to pull in and deploy the site themselves

Good Neighbour Home Page

Using Intersection Observers and a whole lot of TypeScript, we were able to build a tool that would give the effect of end credits.

We weren't able to bring in external UI libraries, so the markup is generated through the magic of the DOM api to create and modify elements as needed. Much like React, Vue, Svelte - at build time, JSON is fetched and the site structures itself accordingly.

Wouldn't it be nice if we could just pin with GSAP? Ya, it would. But we can't. So, we had to build our own library to handle the math and styling. It's not perfect, but it works.