smooothy

In Vue, you can abstract Smooothy logic into a composable. Use onMounted to instantiate the Core class using a ref to the DOM element and add the instance.update method to the gsap.ticker. Use onUnmounted to remove the ticker and call slider.value.destroy() to prevent memory leaks.

Example configuration for an infinite slider:

const { sliderElement, slider } = useSmooothy({
  infinite: true,
})

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"
import Core, { CoreConfig } from "smooothy"
import gsap from "gsap"

/** composable */
function useSmooothy(config: Partial<CoreConfig> = {}) {
  const sliderElement = ref<HTMLElement | null>(null)
  const slider = ref<Core | null>(null)

  onMounted(() => {
    if (sliderElement.value) {
      const instance = new Core(sliderElement.value, config)
      gsap.ticker.add(instance.update.bind(instance))
      slider.value = instance
    }
  })

  onUnmounted(() => {
    if (slider.value) {
      gsap.ticker.remove(slider.value.update.bind(slider.value))
      slider.value.destroy()
    }
  })

  return {
    sliderElement,
    slider,
  }
}

const slides = Array.from({ length: 10 }, (_, i) => i)
const { sliderElement, slider } = useSmooothy({
  infinite: true,
})
</script>

<template>
  <div ref="sliderElement" class="...">
    <div v-for="(slide, i) in slides" :key="i">
      <!-- slide content -->
    </div>
  </div>
</template>

To use Smooothy in a Webflow project, follow these steps:

1. Import the library: Add the Smooothy script globally in your Webflow project settings or via a custom code embed.
2. HTML Structure: Create a container element with display: flex and flex-direction: row (horizontal). Place your slides inside this container.
   • Note: Do not use the CSS gap property on the container. If you need spacing between slides, wrap the slides in a div and apply padding to that wrapper instead.
   • Tip: Use a data attribute like data-smooothy="1" on the container to easily select it in JavaScript.
3. CSS Styling: Ensure the container has a max-width (e.g., 100vw) to prevent layout overflow.
4. JavaScript Initialization: Select the container and initialize the Smooothy instance. You must call slider.update() within a requestAnimationFrame loop to ensure smooth animation.

<!-- 1. Import Library -->
<script src="https://unpkg.com/smooothy"></script>

<!-- 2. HTML Structure -->
<div data-smooothy="1" style="display: flex; flex-direction: row;">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<!-- 3. JS Initialization -->
<script>
const sliderWrapper = document.querySelector('[data-smooothy="1"]')
const slider = new Smooothy(sliderWrapper, {
  // options
})

function animate() {
  slider.update()
  requestAnimationFrame(animate)
}

animate()
</script>

To use Smooothy in a React application, it is recommended to abstract the initialization and cleanup logic into a custom hook. This hook should use a ref callback to instantiate the Core class when the DOM node is available and use gsap.ticker to drive the update method. Ensure you clean up by removing the ticker and calling slider.destroy() when the component unmounts.

Note: If using Next.js, ensure the component is marked with 'use client'.

import { useEffect, useRef, useState } from "react"
import Core, { CoreConfig } from "smooothy"
import gsap from "gsap"

/** hook */
export function useSmooothy(config: Partial<CoreConfig> = {}) {
  const sliderRef = useRef<HTMLElement | null>(null)
  const [slider, setSlider] = useState<Core | null>(null)

  const refCallback = (node: HTMLElement | null) => {
    if (node && !slider) {
      const instance = new Core(node, config)
      gsap.ticker.add(instance.update.bind(instance))
      setSlider(instance)
    }
    sliderRef.current = node
  }

  useEffect(() => {
    return () => {
      if (slider) {
        gsap.ticker.remove(slider.update.bind(slider))
        slider.destroy()
      }
    }
  }, [slider])

  return { ref: refCallback, slider }
}

/** component usage */
export default function ReactSlider() {
  const { ref, slider } = useSmooothy()

  return (
    <div ref={ref} className="...">
      {/* slides content */}
    </div>
  )
}

The Core constructor accepts a configuration object.