Ability to set delay

[oyeanuj]

Hi @braposo! Thank you for creating this library - it's really cool! Wondering if you'd consider adding a prop for delay?

My usecase is twofold:

1. Starting the loop when someone scrolls to that section of the page.
2. Using it for two words in the same sentence where I'd ideally want them to scroll at different times and not together. Right now, I am varying the speed, but delay seems like an ideal prop for that.

Thoughts?

[braposo]

Hey @oyeanuj thanks for your suggestion! I'm actually working on this right now, but the approach I'm taking is to stop the animation if speed is 0 so it gives you a bit more flexibility to start/stop the animation.

This way you can do something like

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            speed: 0,
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                speed: 1000,
            });
        }, 5000);
    }

    render() {
        return (
            <TextLoop
                speed={this.state.speed}
                children={["a", "b", "c", "d", "e", "f"]}
            />
        );
    }
}

And still be able to stop the animation again in the future but simply doing setState({ speed: 0 }) at some point. I think it's less explicit than using a delay prop and a bit more work, but it gives you much more control.

What do you think about this?

[braposo]

Just to be clear @oyeanuj, you can already do that in the current version of the library, I'm now looking at ways of improving that. My current concern is that speed isn't very accurate as the bigger the number is, the slower the animation is so I'm thinking about changing that to interval and add a playing prop to control the animation.

[oyeanuj]

@braposo Thanks for the response! I ended up with some workarounds with the speed as well, but I think a clearer delay prop might be easier to grasp. The other difference in my mind is that a delay prop would only affect the initial start, so that things start out of sequence while having a similar rhythm of say 3 seconds (it also ensures that they run in parallel).

[oyeanuj]

@braposo Just checking in - any updates here?

[braposo]

hey @oyeanuj! Sorry about the delay but the end of the year is always quite busy. I was only back to work this week so I'll be working on this shortly after I clear out some of the tasks for the new year!

[braposo]

delay now supported on v2.0.0