Animated Heart Triangles

animated-heart-triangles.markdown

Animated Heart Triangles

Animated rebound of https://codepen.io/tarynewens/pen/WPgwZO with the names of 2 love birds

A Pen by hngocuyen on CodePen.

License.

index.html

<div id="box" class="box">
  <div class="grid">
    
    <div class="col1-row1">
      <div class="triangle"></div>
    </div>
    <div class="col2-row1">
      <div class="triangle"></div>
    </div>
    <div class="col3-row1">
      <div class="triangle"></div>
    </div>
    <div class="col4-row1">
      <div class="triangle"></div>
    </div>

    <div class="col1-row2">
      <div class="triangle"></div>
    </div>
    <div class="col2-row2">
      <div class="triangle"></div>
    </div>
    <div class="col3-row2">
      <div class="triangle"></div>
    </div>
    <div class="col4-row2">
      <div class="triangle"></div>
    </div>

    <div class="col1-row3">
      <div class="triangle"></div>
    </div>
    <div class="col2-row3">
      <div class="triangle"></div>
    </div>
    <div class="col3-row3">
      <div class="triangle"></div>
    </div>
    <div class="col4-row3">
      <div class="triangle"></div>
    </div>

    <div class="col1-row4">
      <div class="triangle"></div>
    </div>
    <div class="col2-row4">
      <div class="triangle"></div>
    </div>
    <div class="col3-row4">
      <div class="triangle"></div>
    </div>
    <div class="col4-row4">
      <div class="triangle"></div>
    </div>
    
  </div>
  <div class="text" data-splitting>Joseph <code>x</code> Amanda</div>
</div>

script.js

Splitting();
const $ = document.querySelectorAll.bind(document);
const chars = document.querySelectorAll('.char');
const config = {
  delay: 1,
  repeat: 1,
  yoyo: true,
};
const id = {};
const elements = {
  one: '.col1-row1',
  two: '.col2-row1',
  three: '.col3-row1',
  four: '.col4-row1',
  five: '.col1-row2',
  six: '.col2-row2',
  seven: '.col3-row2',
  eight: '.col4-row2',
  nine: '.col1-row3',
  ten: '.col2-row3',
  eleven: '.col3-row3',
  twelve: '.col4-row3',
  thirteen: '.col1-row4',
  fourteen: '.col2-row4',
  fifteen: '.col3-row4',
  sixteen: '.col4-row4',
};

Object.keys(elements).forEach(key => {
  id[key] = $(`${elements[key]} .triangle`);
});

const tl = new TimelineMax(config);

const explodeTime = 2;
const explodeEase = SlowMo.ease.config(0.7, 0.7, false);


tl
  .to(id.one, explodeTime, { x: -500, y: -500, ease: explodeEase }, 'explode')
  .to(id.two, explodeTime, { x: 400, y: -500, ease: explodeEase }, 'explode')
  .to(id.three, explodeTime, { x: -400, y: -500, ease: explodeEase }, 'explode')
  .to(id.four, explodeTime, { x: 500, y: -500, ease: explodeEase }, 'explode')
  .to(id.five, explodeTime, { x: -500, y: -500, rotate: '-30deg', ease: explodeEase }, 'explode')
  .to(id.six, explodeTime, { x: -500, y: 500, rotate: '30deg', ease: explodeEase }, 'explode')
  .to(id.seven, explodeTime, { x: 400, y: -500, rotate: '-30deg', ease: explodeEase }, 'explode')
  .to(id.eight, explodeTime, { x: 500, y: 500, rotate: '30deg', ease: explodeEase }, 'explode')
  .to(id.nine, explodeTime, { x: -500, y: 400, ease: explodeEase }, 'explode')
  .to(id.ten, explodeTime, { x: -600, y: 700, ease: explodeEase }, 'explode')
  .to(id.eleven, explodeTime, { x: 600, y: 700, ease: explodeEase }, 'explode')
  .to(id.twelve, explodeTime, { x: 500, y: 400, ease: explodeEase }, 'explode')
  .to(id.fourteen, explodeTime, { x: -500, y: 500, ease: explodeEase }, 'explode')
  .to(id.fifteen, explodeTime, { x: 500, y: 500, ease: explodeEase }, 'explode')
  .staggerFrom(Array.from(chars), 1.5, { opacity:0, scale:0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50",  ease: Back.easeOut }, 0.01, '-=1.2')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.scss

body{
  overflow: hidden;
  margin: 0;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #772B39;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
  width: 400px;
  height: 450px;
  margin: auto;
}

.col1-row1 > .triangle {
  border-bottom: 100px solid transparent;
  border-right: 100px solid #ff0024;
  transform: rotate(90deg);
}

.col2-row1 > .triangle {
  border-bottom: 100px solid transparent;
  border-left: 100px solid #ff3e74;
  transform: rotate(-90deg);
}

.col3-row1 > .triangle {
  border-bottom: 100px solid transparent;
  border-right: 100px solid #ff6e82;
  transform: rotate(90deg);
}

.col4-row1 > .triangle {
  border-bottom: 100px solid transparent;
  border-left: 100px solid #fdd8de;
  transform: rotate(-90deg);
}

.col1-row2 > .triangle {
  border-bottom: 50px solid #ff3e74;
  border-right: 50px solid #ff3e74;
  border-top: 50px solid #ff6e81;
  border-left: 50px solid #ff6e81;
  transform: rotate(90deg);
}

.col2-row2 > .triangle {
  border-bottom: 50px solid #ff0024;
  border-right: 50px solid #ff0024;
  border-top: 50px solid #fdd7de;
  border-left: 50px solid #fdd7de;
  transform: rotate(180deg);
}

.col3-row2 > .triangle {
  border-bottom: 50px solid #ff0023;
  border-right: 50px solid #ff0023;
  border-top: 50px solid #ff3e74;
  border-left: 50px solid #ff3e74;
  transform: rotate(90deg);
}

.col4-row2 > .triangle {
  border-bottom: 50px solid #ff6d81;
  border-right: 50px solid #ff6d81;
  border-top: 50px solid #ff0024;
  border-left: 50px solid #ff0024;
  transform: rotate(180deg);
}

.col1-row3 > .triangle {
  border-bottom: 100px solid transparent;
  border-left: 100px solid #fdd8de;
  transform: rotate(90deg);
}

.col2-row3 > .triangle {
  border-bottom: 50px solid #ff3c73;
  border-right: 50px solid #ff3c73;
  border-top: 50px solid #ff6e82;
  border-left: 50px solid #ff6e82;
  transform: rotate(180deg);
}

.col3-row3 > .triangle {
  border-bottom: 50px solid #fdd8de;
  border-right: 50px solid #fdd8de;
  border-top: 50px solid #ff6e81;
  border-left: 50px solid #ff6e81;
  transform: rotate(90deg);
}

.col4-row3 > .triangle {
  border-bottom: 100px solid transparent;
  border-left: 100px solid #ff3e74;
  transform: rotate(0deg);
}

.col2-row4 > .triangle {
  border-bottom: 100px solid transparent;
  border-right: 100px solid #ff0024;
  transform: rotate(0deg);
}

.col3-row4 > .triangle {
  border-bottom: 100px solid transparent;
  border-right: 100px solid #ff3d74;
  transform: rotate(270deg);
}
.text{
  position: absolute;
  top: 40%;
  color: #fff;
  font-size: 40px;
  font-family: 'Felipa', cursive;
  perspective: 400;
  code, [data-char="x"]{
    font-size: 18px;
  }
}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Felipa" rel="stylesheet" />