@seberm/react-marquee

React Marquee using GSAP

Usage no npm install needed!

<script type="module">
  import sebermReactMarquee from 'https://cdn.skypack.dev/@seberm/react-marquee';
</script>

README

@seberm/react-marquee

React Marquee using GSAP

The animation direction reflects the clients scroll direction

Scrolling takes over the animation speed

NPM JavaScript Style Guide

Live demo

Install

npm install --save @seberm/react-marquee

Usage

import React, { Component } from 'react'

import Marquee from '@seberm/react-marquee'

const Example = () => {
  return (
    <Marquee spacing="20">
      <h2>Hello World<h2>
    </Marquee>
  )
}

CSS

.marquee-container, .marquee-wrap  {
  overflow:hidden;
}
.marquee {
  position:absolute;
}

Props

name type default description
reverse boolean false animates from left to right
separation number 0 separation between each child in px

License

MIT © Ermilin