Skip to content

Instantly share code, notes, and snippets.

@piedpipes

piedpipes/animated-phrases

Last active June 15, 2020 20:49
Show Gist options
  • Save piedpipes/001df744e4ffc31f4498 to your computer and use it in GitHub Desktop.
Save piedpipes/001df744e4ffc31f4498 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. piedpipes revised this gist Jun 30, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion animated-phrases
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@ var React = require('react'),

    var AnimatedPhrases = React.createClass({
    getInitialProps: function () {

    return {
    animateType: 'type'
    }
  2. piedpipes revised this gist Jun 30, 2015. 1 changed file with 2 additions and 8 deletions.
    10 changes: 2 additions & 8 deletions animated-phrases
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@ var React = require('react'),
    ClassNames = require('classnames');

    var AnimatedPhrases = React.createClass({

    getInitialProps: function () {

    return {
    @@ -51,7 +50,6 @@ var AnimatedPhrases = React.createClass({
    },

    isLastPhrase: function () {

    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    @@ -60,7 +58,6 @@ var AnimatedPhrases = React.createClass({
    },

    tick: function(){

    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    @@ -96,13 +93,11 @@ var AnimatedPhrases = React.createClass({
    });
    }
    }
    console.log(this.state);
    this.clearTickInterval();
    this.startTimer();
    },

    buildPhrase: function (phrase, index) {

    var isVisible = this.state.currentPhrase == index ? true : false;

    var classes = ClassNames({
    @@ -129,7 +124,7 @@ var AnimatedPhrases = React.createClass({
    }
    },

    singleLetters: function (phrase) {
    singleLetters: function (phrase) {

    var currentLetter = this.state.currentLetter;
    var letters = phrase.split("");
    @@ -140,10 +135,9 @@ var AnimatedPhrases = React.createClass({
    });

    return newLetters;
    },
    },

    render: function() {

    var buildPhrase = this.buildPhrase;
    var phrases = [];

  3. piedpipes created this gist Jun 30, 2015.
    165 changes: 165 additions & 0 deletions animated-phrases
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,165 @@
    var React = require('react'),
    ClassNames = require('classnames');

    var AnimatedPhrases = React.createClass({

    getInitialProps: function () {

    return {
    animateType: 'type'
    }
    },

    getInitialState: function () {
    return {
    animationDelay: 300,
    visible: 0,
    currentLetter: 0,
    currentPhrase: 0,
    phraseCount: this.props.phrases.length
    }
    },

    componentDidMount: function(){
    this.startTimer();
    },

    componentWillUnmount: function(){
    this.clearTickInterval();
    },

    clearTickInterval: function() {
    clearInterval(this.timer);
    },

    startTimer: function() {
    this.timer = setInterval(this.tick, this.state.animationDelay);
    },

    isPenultimateLetter: function () {
    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    return (this.state.currentLetter === currentPhraseLength-2);
    },

    isLastLetter: function () {
    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    return (this.state.currentLetter === currentPhraseLength-1);
    },

    isLastPhrase: function () {

    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    return (this.state.currentPhrase === this.state.phraseCount-1
    && this.state.currentLetter === currentPhraseLength-1);
    },

    tick: function(){

    var phrases = this.props.phrases;
    var currentPhraseLength = phrases[this.state.currentPhrase].name.length;

    // if we are on the last letter of the current phrase, we need
    // to increment the current phrase at the next pass [0]
    // unless it's the last phrase
    // in which case we reset the current phrase and letter [1]
    // if we are in the middle of a word, continue to increment
    // only the current letter [2]
    if (this.isLastPhrase()) {
    this.setState({
    currentPhrase: 0, // [1]
    currentLetter: 0, // [1]
    animationDelay: 50
    });
    }
    if (this.isLastLetter()) {
    this.setState({
    currentLetter: 0, // [0]
    currentPhrase: this.state.currentPhrase+1, // [0]
    animationDelay: 50
    });
    } else {
    if (this.isPenultimateLetter()) {
    this.setState({
    currentLetter: this.state.currentLetter+1, // [2]
    animationDelay: 1000
    });
    } else {
    this.setState({
    currentLetter: this.state.currentLetter+1, // [2]
    animationDelay: 50
    });
    }
    }
    console.log(this.state);
    this.clearTickInterval();
    this.startTimer();
    },

    buildPhrase: function (phrase, index) {

    var isVisible = this.state.currentPhrase == index ? true : false;

    var classes = ClassNames({
    'is-visible': isVisible,
    'is-hidden': !isVisible
    });

    var text = '';

    if ( phrase.hasOwnProperty('name') ) {

    text = phrase.name;

    if (isVisible) {
    // cycle through letters and create an <i> per letter
    // with class depending on matching the current letter
    var splitPhrase = this.singleLetters(text);
    if (phrase.hasOwnProperty('url') && phrase.hasOwnProperty('id')) {
    return <a className={ classes } key={index} href={phrase.url}>{ splitPhrase }</a>
    } else {
    return <b className={ classes } key={index}>{ splitPhrase }</b>
    }
    }
    }
    },

    singleLetters: function (phrase) {

    var currentLetter = this.state.currentLetter;
    var letters = phrase.split("");
    var letterCount = phrase.length;

    var newLetters = letters.map(function (letter, index) {
    return <i className={ currentLetter >= index ? 'in' : 'out' } key={index}>{letter}</i>
    });

    return newLetters;
    },

    render: function() {

    var buildPhrase = this.buildPhrase;
    var phrases = [];

    phrases = this.props.phrases.map(function (phrase, index) {
    return buildPhrase(phrase, index);
    });

    return (
    <h1 className="animated-phrase letters type">
    <span>{this.props.headline}</span>
    <span className="word-wrapper waiting">
    { phrases }
    </span>
    </h1>
    )
    }
    });

    module.exports = AnimatedPhrases;