MARQY: High-fidelity loops for modern interfaces

Quick Start

Install

yarn add marqy

Usage

<script>
  import 'marqy/vanilla'
  import 'marqy/dist/marqy.css'
</script>

<marqy-loop speed="1" direction="left" pause-on-hover>
  <span>Your content here</span>
</Marqy-loop>

import { Marqy } from 'marqy'
import 'marqy/dist/marqy.css'

<Marqy speed={1} direction="left" pauseOnHover>
  <span>Your content here</span>
</Marqy>

<script>
  import { Marqy } from 'marqy/svelte'
  import 'marqy/dist/marqy.css'
</script>

<Marqy speed={1} direction="left" pauseOnHover>
  <span>Your content here</span>
</Marqy>

<script setup>
  import { Marqy } from 'marqy/vue'
  import 'marqy/dist/marqy.css'
</script>

<template>
  <Marqy :speed="1" direction="left" :pause-on-hover="true">
    <span>Your content here</span>
  </Marqy>
</template>

speed

number Default: 0.5

Scroll speed multiplier

direction

'left' | 'right' | 'up' | 'down' Default: 'left'

Direction of scroll

pauseOnHover

boolean Default: false

Pauses the animation on hover

manual

boolean Default: false

Renders without applying CSS animations