Cta Collage

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-cta-collage {
  position: relative;
  overflow: hidden;

  @include bp($md) {
    min-height: 815px;
  }

  &__content {
    position: relative;
    z-index: 1;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
    max-width: 820px;
    padding: 160px 16px;
    display: flex;
    flex-direction: column;

    @include bp($md) {
      padding: 260px 80px;
    }

    &--top {
      padding-top: clamp(64px, 8vw, 96px);

      & + .block-cta-collage__images.simple picture {
        &:nth-of-type(1) {
          top: 12px;

          @include bp($md) {
            top: auto;
            bottom: clamp(150px, 20vw, 300px);
          }

          @include bp($xxl) {
            bottom: auto;
            top: clamp(150px, 20vw, 300px);
          }
        }

        &:nth-of-type(2) {
          bottom: clamp(80px, 9vw, 140px);
          top: auto;

          @include bp($xxl) {
            bottom: auto;
            top: 80px;
          }
        }
      }
    }

    &--center {
      justify-content: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-bottom: 1.5rem;
    }

    p:not(.overline) {
      @include fluid-type(16, 20, 375, $max-container-size);
    }

    p.overline {
      font-size: rem-calc(16);
    }
  }

  &__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;

    &.bg--center {
      background-size: cover;
    }

    &.bg--bottom {
      background-size: contain;
      background-position: bottom;
    }

    picture {
      position: absolute;
      animation-name: fade-in-up;
      animation-fill-mode: forwards;
      animation-play-state: paused;
      animation-duration: 1.5s;
      opacity: 1;
    }

    &.is-animated picture {
      animation-play-state: running;
    }

    &.simple {
      picture {
        &:nth-of-type(1) {
          top: 12px;
          left: 16px;
          width: 80px;
          height: 80px;
          animation-delay: .15s;

          @include bp($md) {
            width: clamp(98px, 12vw, 220px);
            height: clamp(98px, 12vw, 220px);
            top: clamp(150px, 20vw, 300px);
            left: clamp(40px, 8vw, 200px);
          }
        }

        &:nth-of-type(2) {
          top: 80px;
          right: 80px;
          width: 48px;
          height: 48px;
          animation-delay: .3s;

          @include bp($md) {
            width: clamp(98px, 18vw, 340px);
            height: clamp(98px, 18vw, 340px);
          }
        }

        &:nth-of-type(3) {
          bottom: clamp(64px, 8vw, 96px);
          left: 30%;
          width: clamp(85px, 10vw, 112px);
          height: clamp(85px, 10vw, 112px);
          animation-delay: .45s;

          @include bp($md) {
            left: clamp(300px, 35vw, 560px);
          }
        }
      }
    }

    &.complex {
      picture {
        &:nth-of-type(1) {
          top: 200px;
          left: 80px;
          width: clamp(98px, 8vw, 163px);
          height: clamp(98px, 8vw, 163px);
          animation-delay: .15s;
          display: none;

          @include bp($lg) {
            display: block;
          }
        }

        &:nth-of-type(2) {
          top: 8px;
          left: 16px;
          width: 98px;
          height: 98px;
          animation-delay: .15s;

          @include bp($md) {
            top: auto;
            bottom: 97px;
            left: calc(100% - 340px);
            width: clamp(132px, 8vw, 163px);
            height: clamp(132px, 8vw, 163px);
            animation-delay: .3s;
          }

          @include bp($lg) {
            left: calc(100% - 440px);
          }

          @include bp($xl) {
            left: calc(100% - 540px);
          }
        }

        &:nth-of-type(3) {
          top: 80px;
          left: calc(100% - 520px);
          width: 98px;
          height: 98px;
          display: none;
          animation-delay: .45s;

          @include bp($md) {
            display: block;
          }

          @include bp($xl) {
            left: calc(100% - 668px);
          }
        }

        &:nth-of-type(4) {
          bottom: 32px;
          left: calc(50% - 60px);
          width: clamp(120px, 10vw, 220px);
          height: clamp(120px, 10vw, 220px);
          animation-delay: .6s;

          @include bp($md) {
            display: none;
          }

          @include bp($xl) {
            bottom: auto;
            top: calc(65% - 120px);
            left: 210px;
            display: block;
          }
        }

        &:nth-of-type(5) {
          top: 90px;
          right: 60px;
          width: 48px;
          height: 48px;
          animation-delay: .45s;

          @include bp($lg) {
            display: none;
          }

          @include bp($xl) {
            right: auto;
            top: calc(50% - 49px);
            left: calc(100% - 300px);
            width: 98px;
            height: 98px;
            display: block;
            animation-delay: .75s;
          }
        }

        &:nth-of-type(6) {
          bottom: 110px;
          left: 16px;
          width: 48px;
          height: 48px;
          animation-delay: .45s;

          @include bp($md) {
            animation-delay: .6s;
            bottom: auto;
            top: 90px;
            left: 120px;
          }

          @include bp($lg) {
            top: 80px;
            left: 270px;
          }

          @include bp($xl) {
            animation-delay: .9s;
          }
        }

        &:nth-of-type(7) {
          top: 32px;
          left: calc(100% - 200px);
          width: 48px;
          height: 48px;
          animation-delay: .6s;

          @include bp($md) {
            top: 160px;
            animation-delay: 1.05s;
          }

          @include bp($xl) {
            left: calc(100% - 425px);
          }
        }

        &:nth-of-type(8) {
          bottom: 125px;
          right: 20px;
          width: 48px;
          height: 48px;
          animation-delay: .75s;

          @include bp($md) {
            right: auto;
            bottom: 145px;
            left: 200px;
            animation-delay: 1.2s;
          }

          @include bp($lg) {
            left: calc(100% - 800px);
          }

          @include bp($xl) {
            left: calc(100% - 910px);
          }
        }
      }
    }
  }
}

import gsap from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

class CtaCollage {
  constructor() {
    this.elements = document.querySelectorAll('.js-aos')
    this.events()
  }

  events = () => {
    if (!this.elements.length) return
    this.elements.forEach(element => {
      gsap.from(element, {
        scrollTrigger: {
          trigger: element,
          start: "20% bottom",
          once: true,
          toggleClass: 'is-animated'
        }
      })
    })
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new CtaCollage();
});

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "strategiq/cta-collage",
  "title": "Cta Collage",
  "description": "Example block to be used as a template",
  "category": "strategiq",
  "icon": "strategiq",
  "acf": {
      "mode": "preview",
      "renderTemplate": "block-cta-collage.php"
  },
  "supports": {
      "anchor": true,
      "align": false,
      "spacing": {
          "margin": [
              "top",
              "bottom"
          ]
      }
  },
  "example": {
      "attributes": {
          "mode": "preview",
          "data": {
              "heading_type": "h2",
              "heading_text": "Example - Cta Collage",
              "content": "This is some example content to represent what the content will look like"
          }
      }
  },
  "style": "file:../../assets/css/cta-collage/block-cta-collage.css",
  "viewScript": ["cta-collage"]
}