For landing pages that offer multiple content assets as downloadables, we developed this Widget that collects all linked assets with a class and adds an animation effect. As a user scrolls through the page content, this drops linked content into an asset cart for the user to view and download their collection of deeper content while keeping focus on the page. This imitates e-commerce cart functionality to improve on-page engagement and form fill conversion metrics with bundle downloads.

Demo (Codepen)

Features

• Vanilla JS
• Quick setup/activation
• No extra-work, just add the class
• The only dependancy is GSAP

Installation

CDN

To start working with AssetCart.js right away, make sure to add GSAP, ScrollTrigger, and Flip plugins before your ending tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/Flip.min.js"></script> 

Then, make sure you link the AssetCart.js CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asset-cart/dist/asset-cart.min.css"/>

To initialize the plugin, add this JS code to your page and adjust plugin options to your liking (examples are commented out in the code below). Feel free to use the CodePen link to test out the plugin settings.

<script type="module">
  gsap.registerPlugin(Flip, ScrollTrigger);
  import AssetCart from 'https://cdn.jsdelivr.net/npm/asset-cart/dist/asset-cart-clean.min.js';
  let assetCart = new AssetCart({
      assetSelector: ".downloadable",
      // animationSpeed: 1,
      // animationEase: "bounce.out",
      // animationRotation: true,
      // animationWiggle: "expo.out",
      // animationStart: "top 80%",
      // scrolltriggerMarkers: true,
      // counterRotation: 9000,
      // counterEase: "steps(12)",
      // counterBounceAmount: 150
  });
  assetCart.init();
</script>

NPM

Alternatively, AssetCart.js can be installed with npm

$ npm install asset-cart

and then imported and initialized in Javascript like this

import AssetCart from 'asset-cart';

let assetCart = new AssetCart({
    assetSelector: ".downloadable",
    // animationSpeed: 1,
    // animationEase: "bounce.out",
    // animationRotation: true,
    // animationWiggle: "expo.out",
    // animationStart: "top 80%",
    // scrolltriggerMarkers: true,
    // counterRotation: 9000,
    // counterEase: "steps(12)",
    // counterBounceAmount: 150
});
assetCart.init();

…or include the JS and CSS files from this repo…

Run

Add an assetSelector class (passed as an option when you initialized the AssetCart class) or a class ".ft-download-asset" (if you haven't set custom assetSelector during the previous step).

<a class="ft-download-asset" href="./images/test.zip">Read the case study</a>

To show an extra asset counter (think e-commerce cart) somewhere on the page, next to a form, for example, you can add this element. (It can be adjusted in code to meet your needs)

<div class="ft-counter-info"><span class="ft-counter"></span><span> Assets</span></div>

What's coming

• Direct integration with the CTA / form on the page
• More pre-built animation options
• Customizable Asset icons
• Instructions for CSS styling (currently done by overwriting existing styles)

Developed by

License

You can check out the full license here

This project is licensed under the terms of the MIT license.