Can't add a timeline component in my squarespace website

Hi! Thank you for your help first.

First of all, I'm sorry that I'm not a professional developer(basic level HTML/CSS, still learning JS), so my question might sound weird.

The problem is I want to use a timeline component I found from Codepen, so I copied the code and pasted it to Squarespace but it does not have the motion effect.

I pasted the HTML part in a page section -> add block -> code And the CSS part pasted in Design -> custom CSS

I have tried to paste the JS part in this page setting -> advance, but still can't make the motion effect.

I read some posts and I tried to add <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>, but it does not help.

It runs very smoothly when I'm using Codepen, but I don't know why it can't work when I paste it into Squarespace.

Here is the timeline component: https://codepen.io/knyttneve/pen/bgvmma

And here is the code I used:

HTML PART

        <div class="timeline-container" id="timeline-1">
          <div class="timeline-header">
            <h2 class="timeline-header__title">E3A Healthcare</h2>
            <h3 class="timeline-header__subtitle">History Timeline</h3>
          </div>
          <div class="timeline">
            <div class="timeline-item" data-text="FATHER OF THE TURKS">
              <div class="timeline__content"><img class="timeline__img" src="http://i.cdn.ensonhaber.com/resimler/diger/ataturk_3473.jpg"/>
                <h2 class="timeline__content-title">2019</h2>
                <p class="timeline__content-desc">Our journey began with a vision to prioritize the health and well-being of newborns and women. Established in the early 2019s, we set out on a mission to provide cutting-edge healthcare solutions and compassionate care to families worldwide.</p>
              </div>
            </div>
            <div class="timeline-item" data-text="FATHER OF THE TURKS">
              <div class="timeline__content"><img class="timeline__img" src="http://gazetemanifesto.com/wp-content/uploads/2015/11/mustafa-kemal.jpg"/>
                <h2 class="timeline__content-title">2020</h2>
                <p class="timeline__content-desc">our dedication to excellence allowed us to expand our reach, offering specialized care and innovative products to a broader audience. Our commitment to research and development led to significant breakthroughs in maternal and infant healthcare.</p>
              </div>
            </div>
            <div class="timeline-item" data-text="FATHER OF THE TURKS">
              <div class="timeline__content"><img class="timeline__img" src="http://www.volpeypir.com/upload/3732.jpg"/>
                <h2 class="timeline__content-title">2021</h2>
                <p class="timeline__content-desc">As we entered the new millennium, we continued to lead the way in pioneering innovations for newborns and women's health. Introducing state-of-the-art technologies and evidence-based practices, we focused on improving outcomes and providing personalized care.</p>
              </div>
            </div>
            <div class="timeline-item" data-text="FATHER OF THE TURKS">
              <div class="timeline__content"><img class="timeline__img" src="http://cdn.yemek.com/uploads/2014/11/ataturk-10-kasim.jpg"/>
                <h2 class="timeline__content-title">2022</h2>
                <p class="timeline__content-desc">The 2022s marked a period of significant growth and global impact for [Company Name]. Collaborating with healthcare professionals and organizations worldwide, we worked to address critical maternal and infant health challenges, making a lasting difference in countless lives.</p>
              </div>
            </div>
            <div class="timeline-item" data-text="FATHER OF THE TURKS">
              <div class="timeline__content"><img class="timeline__img" src="http://ataturk.istanbul.gov.tr/GalleryLibrary/12.jpg"/>
                <h2 class="timeline__content-title">2023</h2>
                <p class="timeline__content-desc">Looking ahead, E3A Healthcare envisions a future where every newborn and woman receives the highest standard of care and support. We will continue to invest in research, innovation, and collaboration, advancing together towards a healthier and happier world for newborn and women.</p>
              </div>
            </div>

CSS PART

  @import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");
        .timeline {
          display: flex;
          margin: 0 auto;
          flex-wrap: wrap;
          flex-direction: column;
          max-width: 700px;
          position: relative; }
          .timeline__content-title {
            font-weight: normal;
            font-size: 66px;
            margin: -10px 0 0 0;
            transition: .4s;
            padding: 0 10px;
            box-sizing: border-box;
            font-family: "Pathway Gothic One", sans-serif;
            color: #fff; }
          .timeline__content-desc {
            margin: 0;
            font-size: 15px;
            box-sizing: border-box;
            color: rgba(255, 255, 255, 0.7);
            font-family: Cardo;
            font-weight: normal;
            line-height: 25px; }
          .timeline:before {
            position: absolute;
            left: 50%;
            width: 2px;
            height: 100%;
            margin-left: -1px;
            content: "";
            background: rgba(255, 255, 255, 0.07); }
            @media only screen and (max-width: 767px) {
              .timeline:before {
                left: 40px; } }
          .timeline-item {
            padding: 40px 0;
            opacity: .3;
            filter: blur(2px);
            transition: .5s;
            box-sizing: border-box;
            width: calc(50% - 40px);
            display: flex;
            position: relative;
            transform: translateY(-80px); }
            .timeline-item:before {
              content: attr(data-text);
              letter-spacing: 3px;
              width: 100%;
              position: absolute;
              color: rgba(255, 255, 255, 0.5);
              font-size: 13px;
              font-family: "Pathway Gothic One", sans-serif;
              border-left: 2px solid rgba(255, 255, 255, 0.5);
              top: 70%;
              margin-top: -5px;
              padding-left: 15px;
              opacity: 0;
              right: calc(-100% - 56px); }
            .timeline-item:nth-child(even) {
              align-self: flex-end; }
              .timeline-item:nth-child(even):before {
                right: auto;
                text-align: right;
                left: calc(-100% - 56px);
                padding-left: 0;
                border-left: none;
                border-right: 2px solid rgba(255, 255, 255, 0.5);
                padding-right: 15px; }
            .timeline-item--active {
              opacity: 1;
              transform: translateY(0);
              filter: blur(0px); }
              .timeline-item--active:before {
                top: 50%;
                transition: .3s all .2s;
                opacity: 1; }
              .timeline-item--active .timeline__content-title {
                margin: -50px 0 20px 0; }
            @media only screen and (max-width: 767px) {
              .timeline-item {
                align-self: baseline !important;
                width: 100%;
                padding: 0 30px 150px 80px; }
                .timeline-item:before {
                  left: 10px !important;
                  padding: 0 !important;
                  top: 50px;
                  text-align: center !important;
                  width: 60px;
                  border: none !important; }
                .timeline-item:last-child {
                  padding-bottom: 40px; } }
          .timeline__img {
            max-width: 100%;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); }
          .timeline-container {
            width: 100%;
            position: relative;
            padding: 80px 0;
            transition: .3s ease 0s;
            background-attachment: fixed;
            background-size: cover; }
            .timeline-container:before {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(99, 99, 99, 0.8);
              content: ""; }
          .timeline-header {
            width: 100%;
            text-align: center;
            margin-bottom: 80px;
            position: relative; }
            .timeline-header__title {
              color: #fff;
              font-size: 46px;
              font-family: Cardo;
              font-weight: normal;
              margin: 0; }
            .timeline-header__subtitle {
              color: rgba(255, 255, 255, 0.5);
              font-family: "Pathway Gothic One", sans-serif;
              font-size: 16px;
              letter-spacing: 5px;
              margin: 10px 0 0 0;
              font-weight: normal; }

JS PART

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
        (function($) {
          $.fn.timeline = function() {
            var selectors = {
              id: $(this),
              item: $(this).find(".timeline-item"),
              activeClass: "timeline-item--active",
              img: ".timeline__img"
            };
            selectors.item.eq(0).addClass(selectors.activeClass);
            selectors.id.css(
              "background-image",
              "url(" +
                selectors.item
                  .first()
                  .find(selectors.img)
                  .attr("src") +
                ")"
            );
            var itemLength = selectors.item.length;
            $(window).scroll(function() {
              var max, min;
              var pos = $(this).scrollTop();
              selectors.item.each(function(i) {
                min = $(this).offset().top;
                max = $(this).height() + $(this).offset().top;
                var that = $(this);
                if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
                  selectors.item.removeClass(selectors.activeClass);
                  selectors.id.css(
                    "background-image",
                    "url(" +
                      selectors.item
                        .last()
                        .find(selectors.img)
                        .attr("src") +
                      ")"
                  );
                  selectors.item.last().addClass(selectors.activeClass);
                } else if (pos <= max - 40 && pos >= min) {
                  selectors.id.css(
                    "background-image",
                    "url(" +
                      $(this)
                        .find(selectors.img)
                        .attr("src") +
                      ")"
                  );
                  selectors.item.removeClass(selectors.activeClass);
                  $(this).addClass(selectors.activeClass);
                }
              });
            });
          };
        })(jQuery);

        $("#timeline-1").timeline();
        </script>

Hi,

Did you add SCSS or CSS?

Can you share link to page where you added code on your site?