From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations using different typographies and shape effects. We are using anime.js for the animations and Charming for working with the words.
The demo is kindly sponsored by JazzCon.Tech: Music. Food. Code. New Orleans March 2018. If you would like to become a demo sponsor, you can find out more here.
The main idea of the implementation is the following: we create an SVG for each word where we then place the shapes relative to the position of each letter. With a couple of options we can then create fun effects using the simple shapes. To showcase the effects, we’ve created a little slideshow.
This is an initialization example. In our case, the element is an h2
with the class word:
const word = new Word(element, options);
options: {
shapesOnTop: false, // shapes on top or beneath the letters
totalShapes: 10, // number shapes per letter
shapeTypes: ['circle', 'rect', 'polygon'], // type of shapes
shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // pick randomly from these colors
shapeFill: true, // if set to false, there's no fill and the stroke gets applied instead
shapeStrokeWidth: 1 // the stroke width
}
We have the following two methods for showing and hiding the word:
word.show(options)
word.hide(options)
Here is an example for the options we can define for the effect on the letters and the shapes when showing the word:
word.show({
lettersAnimationOpts: {
duration: 400,
delay: (t,i) => i*60,
easing: 'easeInExpo',
opacity: [0,1],
scale: [0,1]
},
shapesAnimationOpts: {
duration: 700,
delay: (t,i) => i*40,
easing: 'easeOutExpo',
translateX: () => [0,anime.random(-20,20)],
translateY: () => [0,anime.random(-400,400)],
scale: () => [randomBetween(0.2,0.6),randomBetween(0.2,0.6)],
rotate: () => [0,anime.random(-16,16)],
opacity: [
{value: 1, duration: 1, easing: 'linear'},
{value: 0, duration: 700, easing: 'easeOutQuad'}
]
}
})
This follows the syntax of anime.js. Learn more about it on their documentation page.
Have a look at some screenshots:
We hope you like this little project and find it useful.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
References and Credits
- Based on the Dribbble shot “Us By Night” by Animography
- Anime.js by Julian Garnier
- Charming by Yuan Qing
Hi, Loved this.
Any idea to make this slides autoplay?
setInterval for .click() imitation;
In the article head one can see a lettering being undone itself, however all the effects shown just add particles as small coloured SVG objects, the letter itself is intact! Isn’t there any effect which will “undo” each letter???
Hi
Thanks for this i would learn how you apply this but its not working in my web pages
amazing effect ..really like it..
Hi ! I make fonts library thumbnails and click link the individual animation but background color animation not working !
Sincerely-
Momin
Stunning effects! Bookmarking for future project inspiration.
It’s a beautiful letter animations for learning language words.
But It need to change background to animate and add audios.
Hi! Any idea to make this slides autoplay?