Bouncy full stop

bouncy-full-stop.markdown

Bouncy full stop

Inspired by Readymag's video https://vimeo.com/112044515

A Pen by Maxime Bonhomme on CodePen.

License.

index.html

<div class="sentance">
  <div class="sentance__half left">
    <span class="inner">
      It all starts 
    </span>
  </div>
  <div class="sentance__half right">
    <span class="inner">
      with an idea
    </span>
    <span class="dot"></span>
  </div>
</div>

<div class="info">Hit space to restart</div>

script.js

var $left = $('.sentance__half.left .inner');
var $right = $('.sentance__half.right .inner');
var $dot = $('.dot');
var rightW = $right.width();
var mainDuration = 1.2;

var tl = new TimelineLite({delay: 3, paused: false});

$(document).on('keyup', keyup);

tl
  .to($left, mainDuration, {xPercent: 101, ease: Expo.easeIn})
  .to($right, mainDuration, {xPercent: -101, ease: Expo.easeIn}, '-=' + mainDuration)
  .to($dot, mainDuration, {x: -rightW, ease: Expo.easeIn}, '-=' + mainDuration)
  .to($dot, 0.2, {y: -16})
  .to($dot, 0.6, {y: 0, ease: Bounce.easeOut})
  .to($dot, 1, {x: -rightW + 15}, '-=0.8')


function keyup(e) {
  var key = e.keyCode;

  if(key === 32) tl.restart();
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TimelineLite.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato);

$main-color: black;

body {
  margin: 0;
  color: $main-color;
  font-family: 'Lato', sans-serif;
  font-size: 1.4em;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sentance {
  display: flex;
  line-height: 1;
}

.sentance__half {
  position: relative;
  display: flex;
  padding: 0 0.1em;
  overflow: hidden;
  
  &.right {
    padding-right: 0.2em;
  }
  
  & > .inner {
    display: inline-block;
  }
}

.dot {
  position: absolute;
  bottom: 2px;
  right: 0;
  display: block;
  width: 4px;
  height: 3px;
  background-color: $main-color;
  border-radius: 50%;
}


.info {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: $main-color;
  font-family: monospace;
  font-size: 0.8em;
  opacity: 0.2;
}