I'm working on injecting words from an array into an element using setTimeout. I'm also using Baffle.js to add an obfuscation transition to said word change.
The flow should be something like:
word 1 -> obfuscate over 3s -> word 2... and so on.
My code is below:
render() {
return (
<div className='landing-page-wrapper'>
<div className="main-text">
<span>AMIDST </span>
<Baffle
characters={'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}|;:,./<>?'}
exclude={[' ']}
speed={50}
revealDuration={0}
obfuscate={this.state.obfuscate}>
{this.state.targetWord}
</Baffle>
</div>
</div>
);
}
toggleObfuscate() {
this.setState({ obfuscate: !this.state.obfuscate })
}
injectWords() {
const wordslist = [
'creativity', 'emotion', 'logic', 'change', 'positivity', 'direction', 'thought', 'humanity'
]
wordslist.forEach((words, index) => {
setTimeout(() => {
this.setState({targetWord: words})
}, (index+1) * 3000)
})
}
I've managed to inject the words over 3 seconds, however, I can't seem to get the obfuscation part down. Can anyone help me here?
Thanks in advance
I managed to fix this issue by adding a setTimeout to the toggleObfuscate() function. This basically resets the state value for obfuscate
The fix looks something like this:
toggleObfuscate() {
this.setState({ obfuscate: !this.state.obfuscate })
setTimeout(() => {
this.setState({obfuscate: false})
}, 1000)
}
injectWords() {
const wordslist = [
'creativity', 'emotion', 'logic', 'change', 'positivity', 'direction', 'thought', 'humanity'
]
wordslist.forEach((words, index) => {
setTimeout(() => {
this.setState({targetWord: words})
this.toggleObfuscate();
}, (index+1) * 3000)
})
}