adrianmcli/react-reveal-text

✨ A small react library for animating the revealing of text.

react-reveal-text's Issues

Improve README

See here for an example of a good, comprehensive, and well-designed README: https://github.com/clauderic/react-infinite-calendar

GitHub Short Description

• A short informative sentence for link previews
• Use an emoji in the description to get people's attention
• Add a link to a demo page

README.md

• Have a nice logo
• Have an awesome image/animated gif
• Title of your project in plain Capitalized English
• Short description and link to demo page

Badges from Shields.io

• NPM version
• Build status (Travis/Circle CI)
• Dependencies
• Code quality (Bithound or similar)
• Code coverage
• License

Features

• Use an emoji
• Have at least 4 or 5 features
• Keep the focus on simplicity, lightness (e.g. zero-dependency), and ease-of-use

Other Sections

• Getting Started or Installation + Usage
• API
• Contributing guidelines

Height is collapsed until render

Hey there @adrianmcli ! First off, awesome job on this little library. I'm loving it!

I did have one question that I'm hoping you can shed some light on:

1. I'm using the CharacterReveal in a Gatsby-powered site.
2. The animation (canPlay) is triggered via state, which is subsequently set through a useEffect after a short delay.

However, I'm noticing on my production server that there is a small "jump" where before the reveal element is built there is nothing visible, collapsing my page height briefly until react-reveal-text renders to the page:

Here's a live version for you to preview as well: https://the-fold-web.netlify.app/

And here's my code for the react-reveal-text component:

<CharacterReveal
  animateOpacity
  canPlay={isRevealed}
  characterOffsetDelay={60} // ms
  characterWordSpacing={'.25em'}
  copy={[
    'A collection of',
    'cutting edge homes',
    'in the heart of Shaw'
  ]}
  direction={'bottom'}
  duration={600} // ms
  ease={
    'cubic-bezier(0.5848375451263538,-0.003374999999999906,0.16606498194945848,1.012625)'
  }
  offset={'1em'}
  multilineMasking
  multilineOffsetDelay={350} // ms
/>

Let me know what you think, happy to provide more info if needed ✌️

Animations not properly applied when updating text

Heya!

First off! Awesome job with this component!

Is there a way to fix this issue however: whenever I fade out the text, updating the components children (or text), and reveal the text again, it seems like if the new word is longer than the previous, the animations are not being applied

Here is an image of it looks like:

And here is the code:

`
import React, {
Component
} from 'react'

import ReactDOM from 'react-dom'

import View from '../view/index.js'

import {
projectCopy
} from './projectCopy.js'

import {
TweenLite
} from 'gsap'

import ReactRevealText from 'react-reveal-text'

export default class Projects extends View {

constructor(props) {

    super(props)

    this.initProjectCopy()

    this.state = {

        index: 0,

        isInteracting: false,

        revealCopy: true,

    }

}

componentDidMount() {

    this.initEvents()

}

componentWillUnmount() {

    this.removeEvents()

}

initProjectCopy() {

    this.projectCopy = projectCopy

}

initEvents() {

    window.addEventListener('mousewheel', this.loadProject.bind(this))

}

removeEvents() {

    window.removeEventListener('mousehwheel', this.loadProject.bind(this))

}

loadProject(e) {

    if (this.state.isInteracting === false) {

        this.setState(() => {
            
            return {isInteracting: true}
        
        })

        TweenLite.to(this, 3.0, {

            onStart: () => {

                this.setState({revealCopy: false})

            },

            onUpdate: () => {

                e.preventDefault()

            },

            onComplete: () => {

                this.setState({title: ' '})

                if (e.deltaY > 0) {

                    this.setState((prevState) => {

                        return {index: prevState.index += (this.state.index < this.projectCopy.length - 1) ? 1 : 0}

                    })

                } else {

                    this.setState((prevState) => {

                        return {index: prevState.index - (this.state.index > 0) ? 1 : 0}

                    })

                }

                this.refs['titleContainer'].props = {text: this.projectCopy[this.state.index].title}

                this.setState({revealCopy: true})

                this.setState({isInteracting: false})

            }

        })

    }

}

render() {
    
    return(

        <div className = "Project" ref = "projectContainer">

            <ReactRevealText className = "Title" ref = "titleContainer" show = {this.state.revealCopy} text = {this.projectCopy[this.state.index].title}/>
            
            <ReactRevealText className = "Description" ref = "descContainer" show = {this.state.revealCopy} text = {this.projectCopy[this.state.index].description}/>
            
            <ReactRevealText className = "Tech" ref = "techContainer" show = {this.state.revealCopy} text = {this.projectCopy[this.state.index].tech}/>

        </div>

    )

}

}

`