Skip to content

Instantly share code, notes, and snippets.

@shibe97

shibe97/card_animation.html

Created June 22, 2016 13:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shibe97/3f574328e955d09715930ca170d12e2b to your computer and use it in GitHub Desktop.
Save shibe97/3f574328e955d09715930ca170d12e2b to your computer and use it in GitHub Desktop.
Download ZIP
card type animation
Raw
card_animation.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>card animation</title>
<style>
body {
background-color: #7cccbe;
}
</style>
</head>
<body>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 541 446" xml:space="preserve">
<g class="smartphone">
<g class="background">
<path class="bodyShadow" fill="#ccc" d="M180,348.8v-331c0-6.6,5.5-10.5,12-8l179,70c5.7,2.6,12,9.4,12,16v331c0,6.6-7.5,14.5-16,12l-175-73
C186.1,362.9,180,357.8,180,348.8z"/>
<path class="headerShadow" fill="#555" d="M175,36V19.8c0-6.6,10.5-12.5,17-10l179,70c5.7,2.6,12,9.4,12,16v19.7l-5,3.8"/>
<path class="body" fill="#eee" d="M175,352V21c0-6.6,5.5-10.5,12-8l179,70c5.7,2.6,12,9.4,12,16v331c0,6.6-3.5,11.5-12,9l-179-70
C181.1,366.1,175,361,175,352z"/>
<path class="header" fill="#666" d="M175,39.3V21c0-6.6,5.5-10.5,12-8l179,70c5.7,2.6,12,9.4,12,16v20.3"/>
</g>
<g class="parts" fill="#333">
<circle cx="235.7" cy="46.5" r="3"/>
<path d="M302.3,76.4l-51.5-20.8c-1.3-0.5-1.9-2-1.4-3.3v0c0.5-1.3,2-1.9,3.3-1.4l51.5,20.8c1.3,0.5,1.9,2,1.4,3.3h0
C305,76.3,303.6,76.9,302.3,76.4z"/>
</g>
<g>
<path class="card1" fill="#fff" d="M167.7,59.1c0-2.4,2-3.9,4.4-3L358.8,131c2.1,1,4.4,3.5,4.4,5.9v68.9c0,2.4-1.3,4.3-4.4,3.3l-186.6-74.8
c-2.2-1.1-4.4-3-4.4-6.3"/>
<g class="text1" fill="#7cccbe">
<polygon points="183,106.5 348.5,172.1 348.5,176.8 183,111.2"/>
<polygon points="183,77.2 237.5,98.8 237.5,113.5 183,91.8"/>
<polygon points="183,119.5 348.5,185.1 348.5,189.8 183,124.2"/>
</g>
</g>
<g>
<path class="card2" fill="#fff" d="M167.7,147.1c0-2.4,2-3.9,4.4-3L358.8,219c2.1,1,4.4,3.5,4.4,5.9v68.9c0,2.4-1.3,4.3-4.4,3.3l-186.6-74.8
c-2.2-1.1-4.4-3-4.4-6.3"/>
<g class="text2" fill="#7cccbe">
<polygon points="183,194.5 348.5,260.1 348.5,264.8 183,199.2"/>
<polygon points="183,165.2 237.5,186.8 237.5,201.5 183,179.8"/>
<polygon points="183,207.5 348.5,273.1 348.5,277.8 183,212.2"/>
</g>
</g>
<g>
<path class="card3" fill="#fff" d="M167.7,235.1c0-2.4,2-3.9,4.4-3L358.8,307c2.1,1,4.4,3.5,4.4,5.9v68.9c0,2.4-1.3,4.3-4.4,3.3l-186.6-74.8
c-2.2-1.1-4.4-3-4.4-6.3"/>
<g class="text3" fill="#7cccbe">
<polygon points="183,282.5 348.5,348.1 348.5,352.8 183,287.2"/>
<polygon points="183,253.2 237.5,274.8 237.5,289.5 183,267.8"/>
<polygon points="183,295.5 348.5,361.1 348.5,365.8 183,300.2"/>
</g>
</g>
</g>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script>
var xmlns="http://www.w3.org/2000/svg",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
smartphone = select('.smartphone'),
background = select('.background'),
parts = select('.parts'),
card1 = select('.card1'),
card2 = select('.card2'),
card3 = select('.card3'),
text1 = selectAll('.text1 polygon'),
text2 = selectAll('.text2 polygon'),
text3 = selectAll('.text3 polygon');
TweenMax.set([background, card1, card2, card3, text1, text2, text3], {
transformOrigin : '50% 50%'
});
var timeline1 = new TimelineMax({repeat:0, delay:1, yoyo:false, paused:false});
timeline1.from(background, 0.5, {
scale: 0,
ease: Power1.easeOut
})
.from(parts, 0.5, {
opacity: 0,
ease: Power1.easeOut
})
.from(card1, 0.5, {
scale: 0
})
.staggerFrom(text1, 0.5, {
scale: 0
}, 0.1)
.from(card2, 0.5, {
scale: 0
})
.staggerFrom(text2, 0.5, {
scale: 0
}, 0.1)
.from(card3, 0.5, {
scale: 0
})
.staggerFrom(text3, 0.5, {
scale: 0
}, 0.1);
var timeline2 = new TimelineMax({repeat:-1, delay:1, yoyo:true, paused:false});
timeline2.from(smartphone, 2, {
y: 10,
ease: Power1.easeInOut
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment