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>
