Peakflow for Alpine.js

Introduction

Peakflow is a powerful Alpine.js plugin that simplifies common workflows for crafting rich, animated experiences on the web.

Installation

npm install peakflow alpinejs

Peer Dependencies

Peakflow uses GSAP's ticker for a global animation loop, ensuring smooth and synchronized animations across your application. To use Peakflow, ensure that you have GSAP installed in your project.

Required Version: GSAP >= 3.0.0

npm install gsap

Features

Simplified setup

Instead of repeating Alpine.data for every component and Alpine.store for everything in your store, Peakflow allows you to use an object like so:

import Alpine from 'alpinejs'
import { peakflow } from 'peakflow'

Alpine.plugin(
  peakflow({
    components: {
      // Define your components here
    },
    store: {
      // Define your store here
    },
  }),
)

Alpine.start()

Enhanced components

In addition to the usual init and destroy lifecycle methods available within Alpine.js components, Peakflow enhances this further with the following lifecycle events:

| Name | Description | | -------------- | ------------------------------------------------------- | | resize | Runs on window resize | | beforeResize | Runs before resize* | | afterResize | Runs after resize* | | raf | Animation loop powered by GSAP Ticker. Runs every frame | | pointermove | Runs on pointermove |

* Used rarely, but can come in handy for scheduling complex responsive logic

Peakflow also adds several dynamic values to the global $store:

| Name | Description | | -------------- | ----------------------------------------- | | windowWidth | window.innerWidth | | windowHeight | window.innerHeight | | pointerX | X coordinate of pointer (event.clientX) | | pointerY | Y coordinate of pointer (event.clientY) |

Responsive directive

x-resize directive for handling simple responsive logic directly in your markup.

Advanced DOM element selection

Peakflow introduces the x-array-ref directive and $arrayRefs magic, overcoming the limitation of x-ref in selecting multiple elements. This enhancement functions similarly to x-ref but returns an array of elements. By assigning the x-array-ref attribute with the same identifier (e.g., foo) to multiple elements, you can access all these elements as an array through $arrayRefs.foo.

Example

Below is an example of a Peakflow-enhanced Alpine.js component that utilizes the resize and raf methods, accesses this.$arrayRefs, and retrieves window dimensions from this.$store.

<div x-data="example">
  <div x-array-ref="items">Item 1</div>
  <div x-array-ref="items">Item 2</div>
  <div x-array-ref="items">Item 3</div>
  <span
    x-text="'Window width: ' + $store.windowWidth + ', Height: ' + $store.windowHeight"
  ></span>
</div>

import Alpine from 'alpinejs'
import { peakflow } from 'peakflow'

Alpine.plugin(
  peakflow({
    components: {
      example: () => ({
        init() {
          console.log('Component initialized')
        },
        resize() {
          console.log(
            'Window resized:',
            this.$store.windowWidth,
            this.$store.windowHeight,
          )
        },
        raf() {
          this.$arrayRefs.items.forEach((item, index) => {
            item.style.transform = `translateY(${
              Math.sin(Date.now() / 1000 + index) * 10
            }px)`
          })
        },
      }),
    },
  }),
)

Alpine.start()