Animated Star Expanding Lines

animated-star-expanding-lines.markdown

Animated Star Expanding Lines

A Pen by Mike Kormendy on CodePen.

License.

index.html

<h1>click</h1>
<div class="container">
  <div class="star-new-wrapper">
    <div class="star">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
  
  <div class="logo">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 139" enable-background="new 0 0 300 139" xml:space="preserve">
<g id="_x5B_stop_light_x5D_">
	<path id="_x5B_black_box_x5D_" d="M54,139H0.6c-0.3,0-0.6-0.3-0.6-0.6V0.6C0,0.3,0.3,0,0.6,0H54c0.3,0,0.6,0.3,0.6,0.6v137.7
		C54.6,138.7,54.3,139,54,139z"/>
	<path id="_x5B_green_circle_x5D_" fill="#66CC33" d="M43.7,109.6c0.3,9.2-7.4,16.8-16.6,16.6c-8.9-0.1-16.2-7.3-16.2-16.3
		c-0.1-9.2,7.4-16.8,16.8-16.5C36.5,93.6,43.7,100.8,43.7,109.6"/>
	<path id="_x5B_yellow_circle_x5D_" fill="#FFCC00" d="M27.4,85.3c-8.9,0.1-16.6-7-16.5-16.6c0.1-9.2,7.7-16.5,16.9-16.2
		c8.9,0.3,16.2,7.8,15.9,16.9C43.4,78,36.3,85.3,27.4,85.3"/>
	<path id="_x5B_red_circle_x5D_" fill="#FF3333" d="M27.2,44.3c-8.7,0-16.3-7-16.3-16.4c0-9.3,7.6-16.5,16.5-16.4
		c9.2,0.1,16.5,7.6,16.3,16.8C43.5,37,36.2,44.4,27.2,44.3"/>
</g>
<g id="_x5B_outline_x5D__SMART_START_xAE_">
	<path d="M281.6,80.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5c0,2.5-2,4.5-4.5,4.5C283.6,85.1,281.6,83,281.6,80.5z M282.6,80.5
		c0,2,1.6,3.5,3.5,3.5s3.5-1.5,3.5-3.5S288,77,286.1,77S282.6,78.5,282.6,80.5z M288.2,82.8h-1.1l-1.1-1.9h-0.8v1.9h-1v-4.7h2.3
		c1.1,0,1.8,0.2,1.8,1.4c0,0.9-0.4,1.3-1.3,1.4L288.2,82.8z M286.5,80.1c0.5,0,0.9-0.1,0.9-0.6s-0.6-0.5-1.1-0.5h-1.1v1.1
		L286.5,80.1L286.5,80.1z"/>
	<polygon points="266.3,86.8 266.3,137.1 251.7,137.1 251.7,86.8 240,86.8 240,74.6 278.7,74.6 278.7,86.8 	"/>
	<path d="M238.2,137.1c-2.2-2.4-3.6-2.3-3.6-22.5c0-4.8-3.3-6.7-7.1-8.6c6.3-4.6,7.9-7.9,7.9-14.9c0-15.9-10.4-16.6-22.9-16.6h-16.6
		v62.5h14.4v-25c8.6,0,9.9,1.8,10,6.8c0,2.5-0.2,13.8,0.9,18.2H238.2z M220.4,92.4c0,8-3.1,8.1-10.1,8.1V85.4
		C219.1,85.5,220.4,87.9,220.4,92.4"/>
	<path d="M190.5,137.1l-13.5-62.5h-17.4l-13.6,62.5h14.6l1.7-12.1H174l1.7,12.1H190.5z M172.3,113.9h-8.3l4.1-27.3L172.3,113.9z"/>
	<polygon points="137.2,86.8 137.2,137.1 122.5,137.1 122.5,86.8 110.9,86.8 110.9,74.6 149.5,74.6 149.5,86.8 	"/>
	<path d="M89.7,138.7c-11.7,0-17.1-4-17.1-22.9h12.1c0,9.2,1.5,11.4,5.4,11.4c2.6,0,4.9-2,4.9-6.1c0-6.6-14.8-14.6-17.1-16.2
		c-2.7-2-5.8-6.6-5.8-14.3c0-8.2,4.4-17.7,17.9-17.7c11,0,18.4,4.6,18.4,20H95.2c0-2.9-0.3-9.2-4.8-9.2c-1.6,0-4.8,0.8-4.8,5
		c0,3.8,2.1,6.2,10.1,11.1c9.6,6,13.1,8.2,13.1,19.3C108.8,128.7,104.7,138.7,89.7,138.7"/>
	<polygon points="288,14.2 288,64.4 273.3,64.4 273.3,14.2 261.7,14.2 261.7,1.9 300.4,1.9 300.4,14.2 	"/>
	<path d="M260.2,64.4c-2.2-2.4-3.7-2.3-3.7-22.5c0-4.8-3.3-6.7-7-8.6c6.3-4.6,7.9-7.9,7.9-14.9c0-15.9-10.4-16.6-22.9-16.6H218v62.5
		h14.4V39.4c8.6,0,9.9,1.7,10,6.8c0,2.5-0.2,13.8,0.9,18.2H260.2z M242.5,19.8c0,8-3.1,8.1-10.2,8.1V12.8
		C241.1,12.8,242.5,15.2,242.5,19.8"/>
	<path d="M213.4,64.4L199.9,1.9h-17.4l-13.6,62.5h14.6l1.7-12.1h11.6l1.7,12.1H213.4z M195.2,41.3h-8.3l4.1-27.3L195.2,41.3z"/>
	<polygon points="152,64.4 152,26.6 140,61.8 139.8,61.8 127.6,26.6 127.6,64.4 115.1,64.4 115.1,1.9 132.3,1.9 139.8,25.1 
		139.9,25.1 147.5,1.9 164.5,1.9 164.5,64.4 	"/>
	<path d="M89.7,66c-11.6,0-17.2-4-17.2-22.8h12.1c0,9.2,1.5,11.4,5.4,11.4c2.6,0,4.9-2,4.9-6.1c0-6.6-14.8-14.6-17.1-16.2
		c-2.6-2-5.8-6.6-5.8-14.3c0-8.2,4.4-17.7,17.9-17.7c11,0,18.4,4.5,18.4,20H95.2c0-2.9-0.3-9.2-4.8-9.2c-1.6,0-4.8,0.8-4.8,5
		c0,3.8,2.1,6.2,10.1,11.1c9.6,6.1,13.1,8.2,13.1,19.3C108.8,56.1,104.7,66,89.7,66"/>
</g>
</svg>
</div>
</div>

script.js

$(document).on('click', function() {
  $('.star-new-wrapper').addClass('animated');
  setTimeout(function() {
    $('.star-new-wrapper').removeClass('animated');
  }, 300);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$ssi-red: #FF3333;
$lines: 18;
$divisor: 360 / $lines;

*, *:after, *:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body {
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

h1 {
  position: absolute;
  top: calc(50% - 37.5px);
  left: calc(50% - 37.5px);
  z-index: 1;
  text-align: center;
  display: block;
  margin: 0 auto;
  padding: 30px 0 0;
  height: 75px;
  width: 75px;
  background-color: $ssi-red;
  color: #fff;
  border-radius: 50%;
}

.container {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
}

.logo {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% + 80px);
  width: 300px;
  height: 80px;
}

.star-new-wrapper {
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px;
}

.star {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.line { 
  position: absolute; 
  left: calc(50% - 2px);
  top: calc(50% - 1px);
  width: 4px;
  height: 0px;
  background: $ssi-red;
  border-radius: 2px;
  transform-origin: top center;
  @for $i from 1 through $lines {
    $value: $i * $divisor - $divisor;
    &:nth-child(#{$i}) {
      transform: rotate(#{$value}deg) translateY(20px);
    }
  }
}

@for $i from 1 through $lines {
  $value: $i * $divisor - $divisor;
  @keyframes star-line-#{$i} {
    0% {
      height: 0px;
      transform: rotate(#{$value}deg) translateY(20px);
    }
    50% {
      height: 15px;
      transform: rotate(#{$value}deg) translateY(40px);
    }
    100% {
      height: 0px;
      transform: rotate(#{$value}deg) translateY(60px);
    }
  }
}

@for $i from 1 through $lines {
  .star-new-wrapper.animated .line:nth-child(#{$i}) {
    animation: star-line-#{$i} 350ms ease-out forwards;
  }
}