Add Code Pen to html block

Hi, I'm struggling with my first attempt at plugging a basic Codepen design into a SS html block. I read I need to enter the html followed by the CSS followed by the JS in the sequence [below] but I cannot get it to work. What I am getting is a single image opposed to the more effective showreel.

Appreciate any suggestions, advice or for someone to have a go generating what I need form the codepen link below.

HMTL> HTML code here > CSS <style> CSS code here JS </style> <script src="https:e”sources> JS code here </script>

Here is the design link > https://codepen.io/vadymhimself/pen/eYmRMOX

Thank you in advance.

The current Codepen uses SCSS & Babel script so you need to convert it to CSS & JavaScript first

Also, the script uses external code so you need to declare it

You can edit page where you want to use code > Add a Code Block > Paste these code

<h1 class="text">Monochrome</h1>
<div class="wrap">
  <div class="image" style="background-image: url(https://picsum.photos/id/192/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/209/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/331/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/334/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/345/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/349/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/356/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/363/1024/768)"></div>
</div>
<style>
  .wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -10%;
  z-index: 1;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 12vw;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.75);
  mix-blend-mode: overlay;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js"></script>
<script>
  // https://tympanus.net/codrops/2019/08/07/image-trail-effects/

const MathUtils = {
  // distance between two points
  distance: (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1) };


let mousePos = { x: 0, y: 0 };
let lastPos = { x: 0, y: 0 };

const getDistance = () => MathUtils.distance(mousePos.x, mousePos.y, lastPos.x, lastPos.y);

class ImageTrail {
  constructor() {
    this.imageList = [...document.querySelectorAll('.image')];
    this.state = {
      zIndex: 1,
      currentImage: 0,
      totalImages: this.imageList.length };


    this.onMouseMove = this.onMouseMove.bind(this);

    this.bindEvents();
  }

  bindEvents() {
    window.addEventListener('mousemove', this.onMouseMove);
  }

  onMouseMove(e) {
    mousePos = { x: e.clientX, y: e.clientY };
    this.changeImage();
  }

  changeImage() {
    const distance = getDistance();
    if (distance >= 150) {
      this.state.currentImage = this.state.currentImage < this.state.totalImages - 1 ? this.state.currentImage + 1 : 0;

      this.state.zIndex++;

      TweenMax.killTweensOf(this.imageList[0].parentEl);

      const currentEl = this.imageList[this.state.currentImage];
      TweenMax.set(currentEl, {
        zIndex: this.state.zIndex,
        x: 0 });

      TweenMax.to(currentEl, 1.5, {
        x: 50,
        ease: Expo.easeOut });


      lastPos = mousePos;
    }
  }}


new ImageTrail();
</script>

Works like a dream. Thank you @tuanphan 

HI @tuanphan the code works great but since trying to build out I'm now getting a massive bleed below the embedded content block.   Attached a pic of the white space and a link.  Thoughts? 

https://tortoise-cricket-r3r3.squarespace.com/config/pages

On 11/1/2023 at 11:44 PM, ABCDEFGHUMAN said:

HI @tuanphan the code works great but since trying to build out I'm now getting a massive bleed below the embedded content block.   Attached a pic of the white space and a link.  Thoughts? 

https://tortoise-cricket-r3r3.squarespace.com/config/pages

 

/config is url for site owner, you can click arrow on top right or top left > real url will appear on browser address bar

Oops... Here you go @tuanphan https://www.abcdefghuman.com/test-page

On 11/3/2023 at 9:33 PM, ABCDEFGHUMAN said:

Oops... Here you go @tuanphan https://www.abcdefghuman.com/test-page

You try using Classic Editor Section instead, then add embed block again

(Click Add Blank Classic Editor Section above red arrow)

Or if you still want to keep current section, try this code to Website > Website Tools (under Not Linked) > Custom CSS

/* embed block */
.fe-653d3116a926e015fbc9ba53 {
    grid-template-rows: repeat(2,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

Thank you @tuanphan, that seems to work ok. Much appreciated.