akshay9 / react-3d-cube-transition

3D cube transitions with highly customizable each side

React 3D Cube Transition Component 💻📱

A easy to use React component to create a Fullpage 3-Dimensional rotating cube website.

Features

• ✅ Highly customisable through React props
• ✅ GPU accelerated animations
• ✅ Zero dependencies
• ✅ Examples included
• 🔨 Lazy-loading cube sides (WIP)
• 🔨 Animation events Callbacks (WIP)

Install

npm install --save react-3d-cube-transition

or

yarn add react-3d-cube-transition

Usage

import React, { Component } from 'react'

import CubeTransition from 'react-3d-cube-transition'
import 'react-3d-cube-transition/dist/index.css'

class Example extends Component {
  render() {
    return <CubeTransition 
              topPage= { <FirstPage/> }
              rightPage={ <SecondPage/> }
              contentElevation={ 15 }
            />
  }
}

Checkout working example - Standalone Example folder

Live Demo: Demo

Demo

Main Props

Attributes	Type	Default	Description
className	string	null	Add a className to the component container
face	string	front	Sets the current cube side. Possible values: front, top, left, right, top, bottom
contentElevation	number	0	Set the elevation of content for each side with respect to its background
animationDuration	number	1000	Animation Duration in ms (Note: Actual duration of the animation would be animationDuration*1.5 ms )
frontPage	node	null	Renders content on the front side of the cube
backPage	node	null	Renders content on the back side of the cube
leftPage	node	null	Renders content on the left side of the cube
rightPage	node	null	Renders content on the right side of the cube
topPage	node	null	Renders content on the top side of the cube
bottomPage	node	null	Renders content on the bottom side of the cube
frontCSS	object	{background: #000;}	Additional styles to be applied to the front side of the cube
backCSS	object	{background: #000;}	Additional styles to be applied to the back side of the cube
leftCSS	object	{background: #000;}	Additional styles to be applied to the left side of the cube
rightCSS	object	{background: #000;}	Additional styles to be applied to the right side of the cube
topCSS	object	{background: #000;}	Additional styles to be applied to the top side of the cube
bottomCSS	object	{background: #000;}	Additional styles to be applied to the bottom side of the cube

Author

Akshay Naik

• Checkout my Full-Stack Web and Machine Learning Developer Website
• Other open source projects @ Project Lab

License

MIT © akshay9