script.js

const { gsap } = window;
const { timeline, to, set } = gsap;

const $RAIN = document.querySelector('.rain');
const $BACKDROP = document.querySelector('.backdrop');
const $HEARTS = document.querySelector('.hearts');
const $BEAR = document.querySelector('.care-bear');
const $BEAR_ARM_LEFT = document.querySelector('.care-bear__arm--left');
const $BEAR_ARM_RIGHT = document.querySelector('.care-bear__arm--right');
const $BEAR_EAR_LEFT = document.querySelector('.care-bear__ear--left');
const $BEAR_EAR_RIGHT = document.querySelector('.care-bear__ear--right');
const $BEAR_MOUTH = document.querySelector('.care-bear__mouth');
const $BEAR_NOSE = document.querySelector('.care-bear__nose');
const $BEAR_CHEEK_LEFT = document.querySelector('.care-bear__cheek--left');
const $BEAR_CHEEK_RIGHT = document.querySelector('.care-bear__cheek--right');
const $BEAR_EYE_LEFT = document.querySelector('.care-bear__eye--left');
const $BEAR_EYE_RIGHT = document.querySelector('.care-bear__eye--right');
const $BEAR_PUPIL_LEFT = document.querySelector('.care-bear__pupil--left');
const $BEAR_PUPIL_RIGHT = document.querySelector('.care-bear__pupil--right');
const $BEAR_BELLY = document.querySelector('.care-bear__belly');
const $BEAR_MUZZLE = document.querySelector('.care-bear__muzzle');
const $BEAR_HEART = document.querySelector('.care-bear__heart');

const SPEEDS = {
  BACKDROP: {
    SCALE: 0.25,
    SPIN: 0.85 },

  BREATHING: 1.5,
  SWITCH: 0.05 };


const STATE = {
  FIRING: false,
  CLOSING: false };


set(document.body, { opacity: 1 });
// Set the backdrop scale to 0
set($BACKDROP, { scale: 0 });
// Set bear to sulking
set($BEAR, { '--hue': Math.floor(Math.random() * 360), '--saturation': 0 });
set($BEAR_ARM_LEFT, {
  transformOrigin: '85% 80%',
  scale: 0.85,
  rotate: -110 });

set($BEAR_ARM_RIGHT, {
  transformOrigin: '15% 80%',
  scale: 0.85,
  rotate: 110 });

set($BEAR_EAR_LEFT, { transformOrigin: '70% 85%', rotate: -60 });
set($BEAR_EAR_RIGHT, { transformOrigin: '30% 85%', rotate: 60 });
set($BEAR_MOUTH, { transformOrigin: '50%, 0', scaleY: 0, y: '+=2' });
set($BEAR_NOSE, { transformOrigin: '50% 50%', y: '+=2' });
set($BEAR_BELLY, { transformOrigin: '50% 50%' });
set($BEAR_MUZZLE, { transformOrigin: '50% 50%' });
set($BEAR_HEART, { transformOrigin: '50% 50%' });
set([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
  transformOrigin: '50% 50%',
  opacity: 0,
  y: '+=2' });

set([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  transformOrigin: '50% 50%',
  y: '+=2',
  clipPath: 'inset(50% 0 0 0)' });

set([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
  transformOrigin: '50% 50%',
  z: 1,
  y: '+=1.25' });


const OPEN_BACKDROP_TL = new timeline({}).
add(to($BACKDROP, { scale: 1.5, duration: SPEEDS.BACKDROP.SCALE })).
add(
to($BACKDROP, {
  rotate: 360,
  duration: SPEEDS.BACKDROP.SPIN,
  repeat: -1,
  ease: 'none' }),

0);

OPEN_BACKDROP_TL.pause();

const CLOSE_BACKDROP_TL = new timeline({
  onComplete: () => {
    if (OPEN_BACKDROP_TL) {
      STATE.CLOSING = false;
      STATE.FIRING = false;
      OPEN_BACKDROP_TL.pause();
      BREATHING_TL.play();
    }
  } }).
add(to($BACKDROP, { scale: 0, duration: SPEEDS.BACKDROP.SCALE }));

const HEART_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.258088 6.7122535">
  <path d="M2.56864 1.32292c-.31816 0-.63626.12209-.88005.36587-.48757.48758-.48757 1.27253 0 1.7601l.18035.18035 1.7601 1.7601 1.7601-1.7601.18035-.18035c.48757-.48757.48757-1.27252 0-1.7601-.24379-.24378-.56189-.36587-.88005-.36587-.31815 0-.63626.12209-.88005.36587l-.18035.18035-.18035-.18035c-.24379-.24378-.5619-.36587-.88005-.36587z" fill="red"/>
</svg>
`;
const fireHearts = () => {
  const newHeart = document.createElement('div');
  newHeart.className = 'heart';
  newHeart.style.setProperty(
  '--size',
  Math.floor(Math.random() * 30 - 10 + 1) + 5);

  // newHeart.style.setProperty(
  //   '--hue',
  //   Math.floor(Math.random() * 150 - 10 + 1) + 10
  // )
  newHeart.style.setProperty('--hue', Math.floor(Math.random() * 360));
  newHeart.innerHTML = HEART_SVG;
  const svg = newHeart.querySelector('svg');
  $HEARTS.appendChild(newHeart);
  set(newHeart, { rotate: 'random(0, 360)', transformOrigin: '50% 50%' });
  to(svg, {
    y: '-100vmax',
    duration: 'random(0.5, 1.5)',
    onComplete: () => {
      newHeart.remove();
    } });

  if (STATE.FIRING && !STATE.CLOSING) {
    requestAnimationFrame(fireHearts);
  } else {
    $HEARTS.innerHTML = '';
  }
};

CLOSE_BACKDROP_TL.pause();
const RAISE_TL = new timeline().
add(
to([$BEAR_ARM_LEFT, $BEAR_ARM_RIGHT], {
  duration: SPEEDS.SWITCH,
  scale: 1,
  rotate: 0 })).


add(
to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
  duration: SPEEDS.SWITCH,
  rotate: 0 }),

0).

add(
to($BEAR_HEART, {
  duration: SPEEDS.SWITCH,
  scale: 1.1 }),

0).

add(to($BEAR_NOSE, { duration: SPEEDS.SWITCH, y: 0 }), 0).
add(to($BEAR_MOUTH, { duration: SPEEDS.SWITCH, y: 0, scaleY: 1 })).
add(
to([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
  duration: SPEEDS.SWITCH,
  opacity: 1,
  y: 0 }),

0).

add(
to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  duration: SPEEDS.SWITCH,
  clipPath: 'inset(0 0 0 0)',
  y: 0 }),

0).

add(
to([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
  duration: SPEEDS.SWITCH,
  y: 0 }),

0).

add(to($BEAR_HEART, { duration: SPEEDS.SWITCH, '--saturation': 100 }), 0).
add(to($BEAR, { duration: SPEEDS.SWITCH, '--saturation': 100 }), 0);
RAISE_TL.pause();

const BREATHING_TL = new timeline({ repeat: -1, yoyo: true }).
add(to($BEAR_BELLY, { scale: 1.025, duration: SPEEDS.BREATHING })).
add(to($BEAR_ARM_RIGHT, { rotate: 108, duration: SPEEDS.BREATHING }), 0).
add(to($BEAR_ARM_LEFT, { rotate: -108, duration: SPEEDS.BREATHING }), 0).
add(to($BEAR_NOSE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0).
add(
to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
  y: '-=0.4',
  duration: SPEEDS.BREATHING }),

0).

add(
to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
  y: '-=0.4',
  duration: SPEEDS.BREATHING }),

0).

add(to($BEAR_MUZZLE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0);

let BLINKING_TL;
const blink = () => {
  const DELAY = Math.floor(Math.random() * 5 - 1 + 1) + 1;
  BLINKING_TL = new timeline().add(
  to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
    delay: DELAY,
    scaleY: 0,
    duration: SPEEDS.SWITCH,
    repeat: 1,
    yoyo: true,
    onComplete: blink }));


};
blink();

const tease = () => {
  BLINKING_TL.seek(0);
  BLINKING_TL.pause();
  to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
    duration: SPEEDS.SWITCH,
    clipPath: 'inset(0 0 0 0)' });

};

const sadden = () => {
  BLINKING_TL.restart();
  to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
    clipPath: 'inset(50% 0 0 0)',
    duration: SPEEDS.SWITCH });

};

const handleKeyDown = e => {
  if (e.keyCode === 32 && !STATE.FIRING && !STATE.CLOSING) start();
};

const handleKeyUp = e => {
  if (e.keyCode === 32 && STATE.FIRING && !STATE.CLOSING) end();
};

const start = () => {
  if (STATE.CLOSING) return;
  document.body.removeEventListener('keypress', handleKeyDown);
  STATE.FIRING = true;
  OPEN_BACKDROP_TL.restart();
  RAISE_TL.play();
  BREATHING_TL.pause();
  BLINKING_TL.pause();
  BLINKING_TL.seek(0);
  $RAIN.style.display = 'none';
  fireHearts();
};

const end = () => {
  if (STATE.CLOSING || !STATE.FIRING) return;
  document.body.addEventListener('keypress', handleKeyDown);
  STATE.CLOSING = true;
  CLOSE_BACKDROP_TL.restart();
  BLINKING_TL.restart();
  RAISE_TL.reverse();
  $RAIN.style.display = 'block';
  sadden();
};

$BEAR.addEventListener('mousedown', start);
$BEAR.addEventListener('touchstart', start);
$BEAR.addEventListener('mouseup', end);
$BEAR.addEventListener('touchend', end);
$BEAR.addEventListener('mouseover', tease);
$BEAR.addEventListener('mouseleave', sadden);
document.body.addEventListener('keydown', handleKeyDown);
document.body.addEventListener('keyup', handleKeyUp);

/**
 * Should it be raining?
 */
const letItRain = new Date().getHours() % 2;
if (letItRain) {
  // Create a random number of rain drops and animate them.
  for (let d = 0; d < Math.floor(Math.random() * 25); d++) {
    // Create an SVG droplet and append it to the DOM
    const droplet = document.querySelector('svg').cloneNode();
    droplet.setAttribute('viewBox', '0 0 5 50');
    droplet.setAttribute(
    'style',
    `--x: ${Math.floor(Math.random() * 100)}; --y: ${Math.floor(
    Math.random() * 100)
    }; --o: ${Math.random()}; --a: ${Math.random() +
    0.5}; --d: ${Math.random() * 2 - 1}; --s: ${Math.random()}`);

    droplet.innerHTML = `<path d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path>`;
    $RAIN.appendChild(droplet);
  }
}