@seberm/react-marquee

React Marquee using GSAP

The animation direction reflects the clients scroll direction

Scrolling takes over the animation speed

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