Skip to content

Block animations #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 1, 2020
Merged

Block animations #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
73439f4
setting up files
isaacpitwa Jul 1, 2020
e7a4366
linking markup with styles
isaacpitwa Jul 1, 2020
3356811
Animation markup
isaacpitwa Jul 1, 2020
c9f70e0
Animation styles
isaacpitwa Jul 1, 2020
9be9b90
Update README
isaacpitwa Jul 1, 2020
0488ccd
Update README
isaacpitwa Jul 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ These can be found in the `/animations` directory

![Block Revealing Animation Preview](https://media.giphy.com/media/Y3AvxFfDjHtPbce6Tx/giphy.gif)

![Landing Page SVG Animations](https://media.giphy.com/media/gLKrxXH2NLb1eF6uI2/giphy.gif)

# Transitions Styles
These can be found in the `/transitions` directory

Expand Down
5 changes: 5 additions & 0 deletions block-animations/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,9 @@ Files can be found in the `/block-revealing-animation` directory. Written in pl

![Block Revealing Animation Preview](https://media.giphy.com/media/Y3AvxFfDjHtPbce6Tx/giphy.gif)

# Transitions and Animations with SVG
Files can be found in the `/landing-page-svg-animation` directory. Written in plain CSS and HTML

![Block Revealing Animation Preview](https://media.giphy.com/media/gLKrxXH2NLb1eF6uI2/giphy.gif)


61 changes: 61 additions & 0 deletions block-animations/landing-page-svg-animation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Animation for Landing page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="arrow arrow--top">
<svg xmlns="http://www.w3.org/2000/svg" width="270.11" height="649.9" overflow="visible">
<style>
.geo-arrow {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<g class="item-to bounce-1">
<path class="geo-arrow draw-in" d="M135.06 142.564L267.995 275.5 135.06 408.434 2.125 275.499z" />
</g>
<circle class="geo-arrow item-to bounce-2" cx="194.65" cy="69.54" r="7.96" />
<circle class="geo-arrow draw-in" cx="194.65" cy="39.5" r="7.96" />
<circle class="geo-arrow item-to bounce-3" cx="194.65" cy="9.46" r="7.96" />
<g class="geo-arrow item-to bounce-2">
<path class="st0 draw-in" d="M181.21 619.5l13.27 27 13.27-27zM194.48 644.5v-552" />
</g>
</svg>
</div>
<div class="arrow arrow--bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="31.35" height="649.9" overflow="visible">
<style>
.geo-arrow {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<g class="item-to bounce-1">
<circle class="geo-arrow item-to bounce-3" cx="15.5" cy="580.36" r="7.96" />
<circle class="geo-arrow draw-in" cx="15.5" cy="610.4" r="7.96" />
<circle class="geo-arrow item-to bounce-2" cx="15.5" cy="640.44" r="7.96" />
<g class="item-to bounce-2">
<path class="geo-arrow draw-in" d="M28.94 30.4l-13.26-27-13.27 27zM15.68 5.4v552" />
</g>
</g>
</svg>
</div>
<div class="main">
<div class="main__text-wrapper">
<h1 class="main__title">Transitions & Animations</h1>
<h2>Combined with SVGs</h2>
<svg xmlns="http://www.w3.org/2000/svg" class="dotted-circle" width="352" height="352" overflow="visible">
<circle cx="176" cy="176" r="174" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="12.921,11.9271"/>
</svg>
</div>
</div>
</body>
</html>
206 changes: 206 additions & 0 deletions block-animations/landing-page-svg-animation/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;1,500&display=swap");
body {
background: linear-gradient(#3800e7, #8a15ff);
height: 100vh;
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
font-family: "DM Mono", monospace;
font-weight: 300;
overflow: hidden;
color: white;
text-align: center;
}
h1 {
font-size: 3em;
margin-bottom: 0.2em;
}
h2 {
font-size: 2em;
}
.main {
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
justify-content: center;
align-items: center;
}
.main:before, .main:after {
content: "";
display: block;
position: absolute;
z-index: -3;
}
.main:before {
right: 0;
bottom: -19;
height: 30em;
width: 30em;
border-radius: 30em;
background: linear-gradient(#3800e7, #8a15ff);
align-self: flex-end;
animation: gradient-fade 8s ease-in-out 3s infinite alternate;
}
.main:after {
top: 0;
left: 30;
height: 10em;
width: 10em;
border-radius: 10em;
background: linear-gradient(#3800e7, #8a15ff);
animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
}
.main__text-wrapper {
position: relative;
padding: 2em;
}
.main__text-wrapper:before, .main__text-wrapper:after {
content: "";
display: block;
position: absolute;
}
.main__text-wrapper:before {
z-index: -1;
top: -3em;
right: -3em;
width: 13em;
height: 13em;
opacity: 0.7;
border-radius: 13em;
background: linear-gradient(#15e0ff, #8a15ff);
animation: rotation 7s linear infinite;
}
.main__text-wrapper:after {
z-index: -1;
bottom: -20em;
width: 20em;
height: 20em;
border-radius: 20em;
background: linear-gradient(#d000c5, #8a15ff);
animation: rotation 7s linear infinite;
}
.arrow {
z-index: 1000;
opacity: 0.5;
position: absolute;
}
.arrow--top {
top: 0;
left: -5em;
}
.arrow--bottom {
bottom: 0;
right: 3em;
}
.circle {
transform: translate(50%, -50%) rotate(0deg);
transform-origin: center;
}
.circle--ltblue {
height: 20em;
width: 20em;
border-radius: 20em;
background: linear-gradient(#15e0ff, #3800e7);
}
.backdrop {
position: absolute;
width: 100vw;
height: 100vh;
display: block;
background-color: pink;
}
.dotted-circle {
position: absolute;
top: 0;
right: 0;
opacity: 0.3;
animation: rotation 38s linear infinite;
}
.draw-in {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 15s ease-in-out alternate infinite;
}
@keyframes draw {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.item-to {
animation-duration: 10s;
animation-iteration-count: infinite;
transform-origin: bottom;
}
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: ease;
}
.bounce-2 {
animation-name: bounce-2;
animation-timing-function: ease;
}
.bounce-3 {
animation-name: bounce-3;
animation-timing-function: ease;
}
@keyframes bounce-1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounce-2 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounce-3 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
100% {
transform: translateY(0);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes gradient-fade {
from {
transform: translate(10%, -10%) rotate(0deg);
}
to {
transform: translate(50%, -50%) rotate(360deg);
}
}
@keyframes gradient-fade-alt {
from {
transform: translate(-20%, 20%) rotate(0deg);
}
to {
transform: translate(-60%, 60%) rotate(360deg);
}
}