Some shape and based on the Dribbble shot “Us By Night” by Animography.

DecorativeLetterEffects_featured  - DecorativeLetterEffects featured - Decorative Letter Animations | Codrops

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.

Attention: For this demo we are using some new CSS properties, please view in an up-to-date browser.

The main idea of the implementation is the following: we create an SVG for each 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  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:

Here is an example for the options we can define for the effect on the letters and the shapes when showing the word:{
	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:

DecorativeLetterEffects_05  - DecorativeLetterEffects 05 - Decorative Letter Animations | Codrops

DecorativeLetterEffects_01  - DecorativeLetterEffects 01 - Decorative Letter Animations | Codrops

DecorativeLetterEffects_03  - DecorativeLetterEffects 03 - Decorative Letter Animations | Codrops

DecorativeLetterEffects_04  - DecorativeLetterEffects 04 - Decorative Letter Animations | Codrops

DecorativeLetterEffects_06  - DecorativeLetterEffects 06 - Decorative Letter Animations | Codrops

We hope you like this little project and find it useful.

- advertisement - Decorative Letter Animations | Codrops

References and Credits


Source link


Please enter your comment!
Please enter your name here