An animation that demonstrate how to make layered animations with anime.js. Made for https://animejs.com.
A Pen by Alan Pachuau on CodePen.
Created
March 8, 2022 20:21
-
-
Save alanpachuau/d7933b48f9acb912147bd4fc6d69cd7c to your computer and use it in GitHub Desktop.
Layered animations with anime.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="animation-wrapper"> | |
| <div class="layered-animations"> | |
| <svg class="circle1 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)"> | |
| <defs> | |
| <linearGradient id="circleGradient" x1="0%" x2="100%" y1="20%" y2="80%"> | |
| <stop stop-color="#2c2c2c" offset="0%"/> | |
| <stop stop-color="#242423" offset="50%"/> | |
| <stop stop-color="#707070" offset="100%"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="144" cy="48" r="40" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/> | |
| </svg> | |
| <svg class="circle2 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)"> | |
| <circle cx="144" cy="48" r="15" fill-rule="evenodd" stroke-linecap="square" fill="#acb6f1"/> | |
| </svg> | |
| <svg class="circle3 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)"> | |
| <circle cx="144" cy="48" r="6" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/> | |
| </svg> | |
| <svg class="large shape" viewBox="0 0 96 96" style="overflow:visible"> | |
| <defs> | |
| <linearGradient id="triangleGradient1" x1="0%" x2="100%" y1="20%" y2="80%"> | |
| <stop stop-color="#f94260" offset="0%"/> | |
| <stop stop-color="#f94260" offset="50%"/> | |
| <stop stop-color="#f94260" offset="100%"/> | |
| </linearGradient> | |
| </defs> | |
| <polygon fill-rule="evenodd" points="-11.8 -7.6 19.45 -7.6 -11.8 66.2" stroke-linecap="square" fill="url(#triangleGradient1)"/> | |
| </svg> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var layeredAnimation = (function() { | |
| var easings = ["spring"]; | |
| function createKeyframes(value) { | |
| var keyframes = []; | |
| for (var i = 0; i < 30; i++) keyframes.push({ value: value }); | |
| return keyframes; | |
| } | |
| var timeline = anime | |
| .timeline({ | |
| duration: function () { | |
| return 3200; | |
| }, | |
| easing: function () { | |
| return easings[anime.random(0, easings.length - 1)]; | |
| }, | |
| }); | |
| timeline | |
| .add( | |
| { | |
| targets: ".triangle polygon", | |
| // translateX: createKeyframes(function (el) { | |
| // return 0; | |
| // // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520); | |
| // }), | |
| translateY: createKeyframes(function (el) { | |
| return 0; | |
| }), | |
| // rotate: createKeyframes(function() { return anime.random(-180, 180); }), | |
| }, | |
| 300 | |
| ) | |
| .add( | |
| { | |
| targets: ".circle1 circle", | |
| translateX: createKeyframes(function (el) { | |
| return -144; | |
| // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520); | |
| }), | |
| translateY: createKeyframes(function (el) { | |
| return 0; | |
| }), | |
| // rotate: createKeyframes(function() { return anime.random(-180, 180); }), | |
| }, | |
| 600 | |
| ) | |
| .add( | |
| { | |
| targets: ".circle2 circle", | |
| translateX: createKeyframes(function (el) { | |
| return -144; | |
| // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520); | |
| }), | |
| translateY: createKeyframes(function (el) { | |
| return 0; | |
| }), | |
| // rotate: createKeyframes(function() { return anime.random(-180, 180); }), | |
| }, 700 | |
| ) | |
| .add( | |
| { | |
| targets: ".circle3 circle", | |
| translateX: createKeyframes(function (el) { | |
| return -144; | |
| // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520); | |
| }), | |
| translateY: createKeyframes(function (el) { | |
| return 0; | |
| }), | |
| // rotate: createKeyframes(function() { return anime.random(-180, 180); }), | |
| }, 800 | |
| ); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100vh; | |
| background-color: #ffffff; | |
| } | |
| .animation-wrapper { | |
| width: 80%; | |
| padding-bottom: 40%; | |
| } | |
| /** Layered Animation **/ | |
| .layered-animations { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1100px; | |
| height: 550px; | |
| margin: -275px 0 0 -550px; | |
| } | |
| .layered-animations .shape { | |
| position: absolute; | |
| top: 50%; | |
| /* overflow: visible; */ | |
| width: 280px; | |
| height: 280px; | |
| margin-top: -140px; | |
| stroke: transparent; | |
| stroke-width: 1px; | |
| fill: url(#shapesGradient); | |
| } | |
| @media (min-width: 740px) { | |
| .layered-animations .shape { | |
| stroke-width: .5px; | |
| } | |
| } | |
| /* .layered-animations .small.shape { | |
| width: 64px; | |
| height: 64px; | |
| margin-top: -32px; | |
| stroke: currentColor; | |
| fill: currentColor; | |
| } | |
| .layered-animations .x-small.shape { | |
| width: 32px; | |
| height: 32px; | |
| margin-top: -16px; | |
| stroke: currentColor; | |
| fill: currentColor; | |
| } */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment