Leumas React Animations

A React component library for animating elements with various entrance animations. This library is perfect for adding visually appealing animations to your React applications.

Installation

You can install the package using npm:

npm install leumas-react-animations

Usage

Here's how to use the Slider component with various animations:

Slide In From Left

import React, { useState } from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromLeft = () => (
  <Slider animation="from-left" speed={500}>
    <p>This text will slide in from the left when it first shows</p>
  </Slider>
);

export default SlideInFromLeft;

Slide In From Right

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromRight = () => (
  <Slider animation="from-right" speed={500}>
    <p>This text will slide in from the right when it first shows</p>
  </Slider>
);

export default SlideInFromRight;

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromTop = () => (
  <Slider animation="from-top" speed={500}>
    <p>This text will slide in from the top when it first shows</p>
  </Slider>
);
export default SlideInFromTop;

Slide In From Bottom

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromBottom = () => (
  <Slider animation="from-bottom" speed={500}>
    <p>This text will slide in from the bottom when it first shows</p>
  </Slider>
);

export default SlideInFromBottom;

Slide In From Top Left

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromTopLeft = () => (
  <Slider animation="from-top-left" speed={500}>
    <p>This text will slide in from the top left when it first shows</p>
  </Slider>
);

export default SlideInFromTopLeft;

Slide In From Top Right

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromTopRight = () => (
  <Slider animation="from-top-right" speed={500}>
    <p>This text will slide in from the top right when it first shows</p>
  </Slider>
);

export default SlideInFromTopRight;

Slide In From Bottom Left

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromBottomLeft = () => (
  <Slider animation="from-bottom-left" speed={500}>
    <p>This text will slide in from the bottom left when it first shows</p>
  </Slider>
);

export default SlideInFromBottomLeft;

Slide In From Bottom Right

import React from 'react';
import Slider from 'leumas-react-animations';

const SlideInFromBottomRight = () => (
  <Slider animation="from-bottom-right" speed={500}>
    <p>This text will slide in from the bottom right when it first shows</p>
  </Slider>
);

export default SlideInFromBottomRight;

Fade In

import React from 'react';
import Slider from 'leumas-react-animations';

const FadeIn = () => (
  <Slider animation="fade-in" speed={500}>
    <p>This text will fade in when it first shows</p>
  </Slider>
);

export default FadeIn;

Spin In

import React from 'react';
import Slider from 'leumas-react-animations';

const SpinIn = () => (
  <Slider animation="spin-in" speed={500}>
    <p>This text will spin in when it first shows</p>
  </Slider>
);

export default SpinIn;

Jump In

import React from 'react';
import Slider from 'leumas-react-animations';

const JumpIn = () => (
  <Slider animation="jump-in" speed={500}>
    <p>This text will jump in when it first shows</p>
  </Slider>
);

export default JumpIn;

Bounce In

import React from 'react';
import Slider from 'leumas-react-animations';

const BounceIn = () => (
  <Slider animation="bounce-in" speed={1000}>
    <p>This text will bounce in when it first shows</p>
  </Slider>
);

export default BounceIn;

Zig Zag In

import React from 'react';
import Slider from 'leumas-react-animations';

const ZigZagIn = () => (
  <Slider animation="zig-zag-in" speed={1000}>
    <p>This text will zig-zag in when it first shows</p>
  </Slider>
);

export default ZigZagIn;

Grow In

import React from 'react';
import Slider from 'leumas-react-animations';

const GrowIn = () => (
  <Slider animation="grow-in" speed={500}>
    <p>This text will grow in when it first shows</p>
  </Slider>
);

export default GrowIn;

Hero Section Animation

import React from 'react';
import Slider from 'leumas-react-animations';
import styled from 'styled-components';

const HeroSection = styled.div`
  padding: 20px;
  background-color: #e3f2fd;
  border-radius: 8px;
  text-align: center;
`;

const HeroSectionAnimation = () => (
  <Slider animation="fade-in" speed={3000}>
    <HeroSection>
      <h1>Welcome to Our Website</h1>
      <p>Your success is our priority.</p>
    </HeroSection>
  </Slider>
);

export default HeroSectionAnimation;

2x2 Grid of Cards Sliding in from Corners

import React from 'react';
import Slider from 'leumas-react-animations';
import styled from 'styled-components';

const GridSection = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  padding: 20px;
  background-color: #fff3e0;
  border-radius: 8px;
`;

const Card = styled.div`
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
`;

const GridOfCards = () => (
  <GridSection>
    <Slider animation="from-top-left" speed={3000}>
      <Card>Card 1</Card>
    </Slider>
    <Slider animation="from-top-right" speed={3000}>
      <Card>Card 2</Card>
    </Slider>
    <Slider animation="from-bottom-left" speed={3000}>
      <Card>Card 3</Card>
    </Slider>
    <Slider animation="from-bottom-right" speed={3000}>
      <Card>Card 4</Card>
    </Slider>
  </GridSection>
);

export default GridOfCards;

Demo

You can view a live demo of the animations here: Demo

Available Animations

• Slide In From Left
• Slide In From Right
• Slide In From Top
• Slide In From Bottom
• Slide In From Top Left
• Slide In From Top Right
• Slide In From Bottom Left
• Slide In From Bottom Right
• Fade In
• Spin In
• Jump In
• Bounce In
• Zig Zag In
• Grow In

Props

The Slider component accepts the following props:

• animation (string): The animation type to apply. One of the available animations.
• speed (number): The speed of the animation in milliseconds.
• children (ReactNode): The content to animate.

Example Usage

import React from 'react';
import Slider from 'leumas-react-animations';

const Example = () => (
  <div>
    <Slider animation="from-left" speed={500}>
      <p>This text will slide in from the left.</p>
    </Slider>

    <Slider animation="fade-in" speed={500}>
      <h1>This heading will fade in.</h1>
    </Slider>
  </div>
);

export default Example;

License

This project is licensed under the MIT License.