Bubble Animation

by Adrian Enriquez

JavaScript

import { gsap, Back, Power2 } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default (s) => {

  const $chat = $(".block-case-chatbot-order__animation");
  const baseClass = '.chatbot';

  const timeline = gsap.timeline({
    // defaults: { duration: 1 },
    scrollTrigger: {
      trigger: $chat.eq(0),
      toggleActions: 'play pause resume pause',
    },
    onComplete: function() {
      gsap.delayedCall(0, function() {
        timeline.restart();
        timeline.play();
      });
    }
  });

  gsap.set([$chat.find(`${baseClass}__outgoing`), $chat.find(`${baseClass}__incoming`)], { opacity: 0 });

  let chatHeight = $chat.find(`${baseClass}__main`).eq(0).innerHeight();

  let bubbleBottomOffset = 20;
  let logoBottomOffset = 20;
  let logoHeight = $chat.find(`${baseClass}__outgoing-logo`).eq(0).innerHeight();

  let mainScrollPos = {
    y1: chatHeight - bubbleBottomOffset - $chat.find(`${baseClass}__outgoing`).eq(0).outerHeight(true),
  };
  mainScrollPos.y2 = mainScrollPos.y1 - $chat.find(`${baseClass}__incoming`).eq(0).outerHeight(true);
  mainScrollPos.y3 = mainScrollPos.y2 - $chat.find(`${baseClass}__outgoing`).eq(1).outerHeight(true);
  mainScrollPos.y4 = mainScrollPos.y3 - $chat.find(`${baseClass}__incoming`).eq(1).outerHeight(true);
  mainScrollPos.y5 = mainScrollPos.y4 - $chat.find(`${baseClass}__outgoing`).eq(2).outerHeight(true) + $chat.find(`${baseClass}__incoming`).eq(1).outerHeight(true);
  mainScrollPos.y6 = mainScrollPos.y5 - $chat.find(`${baseClass}__incoming`).eq(2).outerHeight(true);
  mainScrollPos.y7 = mainScrollPos.y6 - $chat.find(`${baseClass}__outgoing-logo`).eq(0).innerHeight() - bubbleBottomOffset;
  mainScrollPos.y8 = mainScrollPos.y6 - $chat.find(`${baseClass}__outgoing`).eq(3).outerHeight(true);
  mainScrollPos.y9 = mainScrollPos.y8 - $chat.find(`${baseClass}__outgoing`).eq(4).outerHeight(true);

  // Start
  timeline
    // Bubble 1
   ...