Skip to content

Instantly share code, notes, and snippets.

@MboaAbel

MboaAbel/hero-svg-animation.markdown

Created July 5, 2022 15:27
Show Gist options
  • Save MboaAbel/107eca55e52c59766936461532b3c9e5 to your computer and use it in GitHub Desktop.
Save MboaAbel/107eca55e52c59766936461532b3c9e5 to your computer and use it in GitHub Desktop.
Download ZIP
Hero SVG animation
Raw
index.html
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet">
</head>
<div id="load" class="loader active">
<span class="load">loading</span>
</div>
<section id="hero" class="hero-section">
<div id="animated-bg"></div>
<div id="left-indicator"></div>
<div id="right-indicator"></div>
<div class="container hero-section__container">
<div id="left-block" class="left-block active">
<div class="text-wrap text-wrap-left">
<h2 class="lbl-1">Customer alignment for today
<span class="yellow">.</span>
</h2>
</div>
<div id="circles"></div>
<div class="circles-description">
<p class="lbl-2 desc-left">Your Brand’s Why.</p>
<p class="lbl-2 desc-right">Your Customer’s Why.</p>
</div>
<div class="button-wrap button-wrap-left">
<div class="button-gradient yellow">
<a href="#" class="hero-button">Learn More</a>
</div>
</div>
</div>
<div id="right-block" class="right-block">
<div class="logo-wrap logo-wrap-right">
<svg class="labs-circles" id="labs-circles" width="13px" height="11px" viewBox="0 0 13 11" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#left-circle {
animation: left-circle 1.5s cubic-bezier(0.57, 0, 0.3, 1) infinite;
transform-origin: 20% 50%;
}
#right-circle {
animation: right-circle 1.5s cubic-bezier(0.57, 0, 0.3, 1) 0.05s infinite;
transform-origin: 33% 56%;
}
@keyframes left-circle {
0% {
transform: rotate(0)
}
50% {
transform: rotate(-180deg)
}
100% {
transform: rotate(0)
}
}
@keyframes right-circle {
0% {
transform: rotate(0)
}
50% {
transform: rotate(-155deg)
}
100% {
transform: rotate(0)
}
}
</style>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Index_Loop" transform="translate(-1051.000000, -164.000000)">
<g id="Top" transform="translate(-1.000000, -7.000000)">
<g id="Page-1" transform="translate(1006.000000, 171.000000)">
<g id="Group-2" transform="translate(46.000000, 0.000000)">
<circle id="Oval" fill="#F9B225" cx="3.5" cy="7.5" r="3.5"></circle>
<circle id="left-circle" fill="#F35C55" cx="8" cy="2" r="2"></circle>
<circle id="right-circle" fill="#ED0188" cx="11" cy="7" r="2"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
<object class="labs-logo" data="https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/labs.svg" type="image/svg+xml"></object>
</div>
<div class="text-wrap text-wrap-right">
<h2 class="lbl-1">Innovation for Tomorrow
<span class="red">.</span>
</h2>
</div>
<div id="infinity" class="infinity">
<div id="trident" class="trident-mask"></div>
<svg id="mask" width="431" height="195" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<rect style="transform: rotate(-45deg); transform-origin: center;" x="207.5" y="83" width="19" height="27" />
</clipPath>
<clipPath id="y-shape" clipPathUnits="objectBoundingBox">
<polygon points=".482558 .3836, .537282 .51000, .502641 .567359, .45700, .46350" />
</clipPath>
<linearGradient id="SVG" gradientUnits="userSpaceOnUse" x1="2.2678" y1="103.6775" x2="330.9431" y2="94.3244" gradientTransform="matrix(1 0 0 -1 0 192.6)">
<stop offset="0" style="stop-color:#F9B224" />
<stop offset="0.1468" style="stop-color:#F9B224" />
<stop offset="0.6142" style="stop-color:#F35A56" />
<stop offset="1" style="stop-color:#ED0288" />
</linearGradient>
</defs>
<rect id="mask-rect" fill="url(#SVG)" x="0" y="0" width="431" height="195" clip-path="url(#myClip)" />
</svg>
<div id="loop"></div>
<object class="infinity-sign" data="https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/infinity.svg" type="image/svg+xml"></object>
</div>
<div class="button-wrap button-wrap-right">
<div class="button-gradient red">
<a href="#" class="hero-button">Learn More</a>
</div>
</div>
</div>
</section>
Raw
script.js
// Detect Browsers
const isFirefox = typeof InstallTrigger !== 'undefined';
const detectFFVersion = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
const targetVersion = detectFFVersion ? parseInt(detectFFVersion[1]) : 0;
const isIE = /*@cc_on!@*/false || !!document.documentMode;
const isEdge = !isIE && !!window.StyleMedia;
//DOM elements
const heroSection = document.getElementById("hero");
const infinityBlock = document.getElementById('infinity');
const rightBlock = document.getElementById('right-block');
const leftBlock = document.getElementById('left-block');
const leftIndicator = document.getElementById('left-indicator');
const rightIndicator = document.getElementById('right-indicator');
let rectangle = document.getElementById('mask');
if (isFirefox) {
if (targetVersion > 57) {
infinityBlock.classList.add('ff');
} else {
infinityBlock.classList.add('ff-old');
}
}
if (isIE) {
rectangle = document.getElementById('trident');
infinityBlock.classList.add('ie');
leftBlock.classList.add('ie');
rightBlock.classList.add('ie')
if (window.innerWidth < 1400) {
heroSection.classList.add('laptop-ie')
}
}
if (isEdge) {
infinityBlock.classList.add('edge');
leftBlock.classList.add('edge');
rightBlock.classList.add('edge')
}
//Detect touchable device
const isTouchDevice = 'ontouchstart' in document.documentElement;
//Lottie animations variables https://github.com/airbnb/lottie-web
var circles;
var bg;
var loopAnim;
//Timers
let timerIn;
let timerOut;
//Flags
let isRight = false;
let isLeft = true;
let isCircleHalf = false;
let isBgHalf = false;
let isLoopHalf = false;
// Animation params
let circlesParams = {
container: document.getElementById('circles'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/circles.json'
};
let bgParams = {
container: document.getElementById('animated-bg'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/bg.json'
};
let loopParams = {
container: document.getElementById('loop'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/loop.json'
};
//Init animations
circles = lottie.loadAnimation(circlesParams);
bg = lottie.loadAnimation(bgParams);
loopAnim = lottie.loadAnimation(loopParams);
//Get animations total frames
var firstFrame = 0;
var totalFramesCircles;
var totalFramesBg;
var totalFramesLoop;
// loader element
const loader = document.getElementById('load');
// on animation frames load get total frames
circles.addEventListener('DOMLoaded', function () {
totalFramesCircles = circles.totalFrames;
loader.classList.remove('active')
heroSection.classList.add('active')
})
bg.addEventListener('DOMLoaded', function () {
totalFramesBg = bg.totalFrames;
})
loopAnim.addEventListener('DOMLoaded', function () {
totalFramesLoop = loopAnim.totalFrames;
})
// Add eventLinsteners
if (!isTouchDevice) {
addListener(leftIndicator, 'mouseenter', playLeftBlockAnimation)
addListener(rightIndicator, 'mouseenter', playRightBlockAnimation)
} else {
addListener(leftIndicator, 'touchstart', playLeftBlockAnimation)
addListener(rightIndicator, 'touchstart', playRightBlockAnimation)
}
function addListener(element, eventName, action) {
element.addEventListener(eventName, function () {
action()
});
}
//Animation play functions
function playCircleAnimation() {
if (!isCircleHalf) {
circles.playSegments([firstFrame, totalFramesCircles / 2], true);
isCircleHalf = true;
} else {
circles.playSegments([totalFramesCircles / 2, totalFramesCircles], true);
isCircleHalf = false;
}
}
function playBgAnimation() {
if (!isBgHalf) {
bg.playSegments([firstFrame, totalFramesBg / 2], true);
isBgHalf = true;
} else {
bg.playSegments([totalFramesBg / 2, totalFramesBg], true);
isBgHalf = false;
}
}
function playLoopAnimation() {
if (!isBgHalf) {
loopAnim.playSegments([firstFrame, totalFramesLoop / 2], true);
showRectangle()
isLoopHalf = true;
} else {
loopAnim.playSegments([totalFramesLoop / 2, totalFramesLoop], true);
showRectangle()
isLoopHalf = false;
}
}
function showRectangle() {
clearTimeout(timerIn)
clearTimeout(timerOut)
timerIn = setTimeout(function () {
rectangle.style.zIndex = 2
timerOut = setTimeout(function () {
rectangle.style.zIndex = 3
}, 500);
}, 500)
}
function playRightBlockAnimation() {
if (!isRight) {
rightBlock.classList.add("active");
leftBlock.classList.remove("active");
isLeft = false;
isRight = true;
playCircleAnimation();
playLoopAnimation();
playBgAnimation();
}
}
function playLeftBlockAnimation() {
isRight = false
leftBlock.classList.add("active")
rightBlock.classList.remove("active")
if (!isLeft) {
isLeft = true
playLoopAnimation();
playCircleAnimation();
playBgAnimation();
}
}
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1229210/lottie.js"></script>
Raw
style.sass
*
box-sizing: border-box
html, body
width: 100%
body,
main
margin: 0
overflow-x: hidden
a
text-decoration: none
outline: none
section
position: relative
background-repeat: no-repeat
background-position: center
background-size: cover
.hero-section
opacity: 0
z-index: 40
transition: all 0.6s ease
&.active
opacity: 1
.lbl-1
color: #f0f0f0
font-family: "Montserrat"
font-size: 25px
font-weight: 500
line-height: 39px
color: #fff
margin: 0
span
&.red
color: #ed0188
&.yellow
color: #F9B225
.lbl-2
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.26)
color: #ffffff
font-family: "Montserrat"
font-size: 18px
font-weight: 600
line-height: 24px
margin: 0
.hero-section__container
width: 1120px
height: 100%
margin: 0 auto
display: flex
justify-content: space-between
align-items: flex-start
.hero-section
width: 100%
height: 100vh
overflow: hidden
&.laptop-ie
height: 700px
.loader
width: 100%
height: 100%
z-index: 10
position: absolute
display: flex
justify-content: center
align-items: center
background-color: #242424
.load
color: #ffffff
font-family: "Montserrat"
font-size: 15px
font-weight: 500
line-height: 39px
margin: 0
text-transform: uppercase
letter-spacing: 10px
opacity: 0
animation: bounce 2s ease infinite
visibility: visible
transition: visibility 0.3s ease
&.active
.load
.load
visibility: hidden
#left-indicator
width: 50%
height: 100%
position: absolute
left: 0
top: 0
z-index: 6
#right-indicator
width: 50%
height: 100%
position: absolute
right: 0
top: 0
z-index: 6
.text-wrap
position: relative
text-align: center
opacity: 0
&-left
transform: translateX(76px)
margin: 0 0 20px 0
transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
&-right
transform: translateX(-76px)
transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
margin: 5px 0 36px 0
#circles
position: relative
z-index: 1
width: 440px
height: 253px
svg
height: auto !important
width: initial !important
position: absolute
z-index: 1
left: -18.5%
top: 0
#labs-circles
overflow: visible
.infinity
position: relative
display: flex
justify-content: center
align-items: center
transition: all 0.9s ease
.infinity-sign
position: absolute
margin-top: -3px
filter: grayscale(1)
transition: filter 0.9s ease
.button-wrap
text-align: center
position: relative
display: flex
justify-content: center
&-left
margin-top: 52px
&-right
margin-top: 97px
.button-gradient
width: 137px
height: 44px
border-radius: 57px
padding: 1px
opacity: 0
z-index: 7
&.red
transition: all 0.4s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.2s
transform: translateX(-76px)
background-image: linear-gradient(233deg, #ed0088 0%, #f9b225 100%)
&.yellow
transition: all 0.4s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.2s
transform: translateX(76px)
background-image: linear-gradient(-138deg, #F9EB25 0%, #F9B225 100%)
.hero-button
position: relative
color: #ffffff
width: 137px
height: 44px
font-family: "Montserrat"
font-size: 15px
font-weight: 400
display: flex
justify-content: center
align-items: center
background-color: #242424
width: 100%
height: 100%
border-radius: 57px
transition: all 0.4s linear
.right-block
text-align: center
padding-top: 165px
.logo-wrap
display: flex
flex-direction: column
align-items: center
transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
opacity: 0
transform: translateX(-76px)
.labs-logo
position: relative
.labs-circles
position: relative
margin-bottom: 5px
svg
overflow: visible
@keyframes bounce
0%
opacity: 1
letter-spacing: 10px
50%
opacity: 0.8
letter-spacing: 7px
100%
opacity: 1
letter-spacing: 10px
.right-block
&.active
.logo-wrap
opacity: 1
transform: translateX(0)
.infinity
.infinity-sign
filter: grayscale(0)
#loop
&:before
background: #f3655b
svg
path
stroke: #000000
.button-gradient.red
opacity: 1
transform: translateX(0)
.hero-button
background-color: #000000
.text-wrap
transform: translateX(0)
opacity: 1
#mask
filter: grayscale(0)
.left-block
position: relative
padding-top: 218px
.circles-description
position: absolute
display: flex
justify-content: space-between
text-align: center
width: 100%
left: 0
bottom: 97px
z-index: 4
.desc
&-left
opacity: 0
transition: all 0.3s cubic-bezier(0.80, 0.00, 0.83, 1.00) 0.3s
transform: translateX(-30px)
width: 100%
max-width: 120px
margin-left: 46px
&-right
opacity: 0
transition: all 0.3s cubic-bezier(0.80, 0.00, 0.83, 1.00) 0.3s
transform: translateX(30px)
max-width: 170px
margin-right: 6%
.left-block
&.active
.button-gradient.yellow
opacity: 1
transform: translateX(0)
.hero-button
background-color: #000000
.text-wrap
transform: translateX(0)
opacity: 1
.circles-description
.desc
&-left
opacity: 1
transform: translateX(0)
&-right
opacity: 1
transform: translateX(0)
#animated-bg
position: absolute
z-index: 0
left: 0
top: 0
width: 100%
height: 100%
display: flex
justify-content: center
svg
height: auto !important
width: 101% !important
position: absolute
top: 0
left: 50%
transform: translateX(-50%) !important
#mask
position: absolute
filter: grayscale(1)
transition: filter 0.4s linear 0.1s
z-index: 3
margin-left: 0px
#loop
position: relative
z-index: 2
svg
width: auto !important
height: auto !important
path
transition: stroke 0.4s linear 0.1s
stroke: #242424
stroke-width: 22
// FIREFOX
#infinity.ff
#mask
margin-left: 2px
#mask-rect
clip-path: polygon(48.2558% 76px, 53.7282% 51.1256%, 50.2641% 57.1359%, 196px 46.4487%) !important
.infinity-sign
margin-top: -5px
#infinity.ff-old
.infinity-sign
top: 0
left: 0
margin-top: 0px
#mask
top: 0
left: 0
#mask-rect
clip-path: url(#y-shape)
// END FIREFOX
#mask
visibility: hidden
// INTERNET EXPLORER && EDGE
.trident-mask
position: absolute
top: 50%
left: 50%
width: 15px
transform: translate(-50%, -50%) rotate(-45deg)
height: 40px
z-index: 3
margin-left: 2px
background-image: linear-gradient(to bottom, #f46052 0%, #f24762 100%)
display: none
opacity: 0
#infinity
&.ie
display: block
.infinity-sign
margin-top: 5px
top: 0
left: 0
#mask
opacity: 0
.trident-mask
opacity: 1
display: block
&.edge
display: block
#mask
display: none
#loop
display: none
.infinity-sign
position: relative
top: 0
left: 0
#right-block
&.ie
.button-wrap-right
margin-top: 133px
&.edge
.button-wrap-right
margin-top: 133px
#left-block
&.ie
.circles-description
bottom: 67px
position: relative
.button-wrap-left
margin-top: 0
&.edge
.circles-description
bottom: 67px
position: relative
.button-wrap-left
margin-top: 0
// END EXPLORER && EDGE
@media all and(min-width: 1800px)
.hero-section__container
width: 1350px
@media all and(max-width: 1700px)
#circles
width: 415px
svg
height: auto !important
width: initial !important
position: absolute
z-index: 1
left: -24.5%
top: 0
@media all and(max-width: 1680px)
#animated-bg svg
height: auto !important
width: 101% !important
@media all and(max-width: 1480px)
#circles
width: 415px
svg
height: auto !important
width: initial !important
position: absolute
z-index: 1
left: -24.5%
top: 0
.left-block .circles-description
.desc-left
margin-left: 32px
.desc-right
@media all and(max-width: 1400px)
#mask
margin-left: 0px
.trident-mask
width: 14px
@media all and(max-width: 1330px)
#circles
width: 100%
svg
width: 500px !important
left: -15.5%
@media all and(max-width: 1200px)
.hero-section__container
justify-content: space-around
.left-block
padding-top: 168px
.right-block
padding-top: 115px
@media all and(max-width: 1120px)
.hero-section__container
width: 100%
padding: 0 15px
@media all and(max-width: 1024px)
#mask
margin-left: 0px
.right-block
padding-top: 85px
.left-block
padding-top: 138px
.hero-section
height: 1400px
#animated-bg svg
width: 1900px !important
position: absolute
top: 0
left: 50%
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(90deg)
.hero-section__container
flex-direction: column
align-items: center
#left-indicator
width: 100%
height: 50%
left: 0
top: 0
#right-indicator
height: 50%
width: 100%
left: 0
bottom: 0
top: inherit
@media all and(max-width: 768px)
#animated-bg svg
width: 1500px !important
@media all and(max-width: 480px)
#animated-bg svg
width: 1030px !important
.hero-section
height: 1000px
.left-block
padding-top: 58px
.text-wrap-left
margin: 0
#circles
display: flex
justify-content: center
svg
width: 350px !important
left: 0
position: relative
#loop svg
width: 300px !important
.infinity .infinity-sign
width: 300px
margin-top: -2px
.button-wrap-right
margin-top: 30px
#mask defs #myClip rect
transform: rotate(-45deg) translateX(3px) !important
width: 13px
@media (max-width: 320px)
#mask
margin-left: -2px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment