Need to add pictures to timeline slider

MadihaSyed · April 1, 2022

Site URL: https://www.thelibertyproject.org/

Hey! I have a timeline at the bottom of my homepage and I would like to add pictures sliding in on either side of it as a person scrolls down (reference image attached) Any idea how to do this?

I also seem to be having an issue with the timeline becoming very messy in terms of alignment if someone decreases their window size, even though its position is relative. Any help on this would be much appreciated! For your reference, I had attached the CSS of the timeline and the .js file embedded.

Quote

//Timeline//
.top-section{
text-align: center;
max-width: 900px;
margin: 0 auto;
}

.timeline{
position:relative;
min-height: 150px;
}

.line{
position: absolute;
z-index:1;
left: calc(50.6% - 1px);
width: 2px;
top: -50px;
bottom: -0px;
background-color: #000;
display: none;
}

.line:before,
.line:after{
position: absolute;
display: block;
content: '';
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #000;
left: 50%;
transform: translateX(-50%);
}

.line:after{
bottom:0;
}

.section{
display: flex;
width: 590px;
color: #2D2F1F;
opacity: 0;
transform: translateX(16%) !important;
transition: 500ms ease;
position: relative;
z-index: 1;
margin: 70px 0;
padding: 1rem;
border-radius: 1rem;
align-items: left;
text-align: justify;
min-height: 180px;
}

.section:nth-child(odd) {
flex-direction: row-reverse;
transform: translateX(125.9%) !important;
}
.bead{
position:absolute;
display: block;
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #000;
left: 103.5%;
top: 20%;
transform: translateX(50%);
}

.beadeven {
position:absolute;
display: block;
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #000;
left: -3.9%;
top: 14.8%;
transform: translateX(-50%);
}
.content{
width: calc(50% - 1rem);
}
.show-me:nth-child(n) {
transform: none;
opacity: 1;
}

JAVASCRIPT

Quote

"use strict";

function qs(selector, all = false) {
return all ? document.querySelectorAll(selector) : document.querySelector(selector);
}

const sections = qs('.section', true);
const timeline = qs('.timeline');
const line = qs('.line');
line.style.bottom = `calc(100% - 20px)`;
let prevScrollY = window.scrollY;
let up, down;
let full = false;
let set = 0;
const targetY = window.innerHeight * .8;

function scrollHandler(e) {
const {
scrollY
} = window;
up = scrollY < prevScrollY;
down = !up;
const timelineRect = timeline.getBoundingClientRect();
const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top;

const dist = targetY - timelineRect.top;
console.log(dist);

if (down && !full) {
set = Math.max(set, dist);
line.style.bottom = `calc(100% - ${set}px)`;
}

if (dist > timeline.offsetHeight + 50 && !full) {
full = true;
line.style.bottom = `-50px`;
}

sections.forEach(item => {
// console.log(item);
const rect = item.getBoundingClientRect(); // console.log(rect);

if (rect.top + item.offsetHeight / 5 < targetY) {
item.classList.add('show-me');
}
}); // console.log(up, down);

prevScrollY = window.scrollY;
}

scrollHandler();
line.style.display = 'block';
window.addEventListener('scroll', scrollHandler);

tuanphan · April 2, 2022

Your code IS CSS + JavaScript

Can you send HTML code to add Timeline content (Text)? We can check easier

--

Also, you should consider using a plugin to add timeline, it will look better. Or find a better timeline code on Codepen.io (then share link, we can convert it to Squarespace code)

MadihaSyed · April 8, 2022

Thank you! Will try looking on codepen to see if there's anything similar. The HTML content is as follows:

Quote

<div class="container">
<div class="top-section">
<h3> The Liberty Narrative</h3>
<p>
The Liberty Narrative delves deep into the core of your story, and crafts timeless brand identities through deeply rooted strategy, aligned design, and heartfelt visuals.
</p>
</div>

<div class="timeline">
<div class="line"></div>
<div class ="section">
<div class="bead"></div>
<div class ="content">
<h2> Chapter 1: Prologue</h2>
<p class=“p1”>
Think of this as your brand's origin story.
We will start with a 1:1 Discovery call to
get an insightful understanding of your
brand's ethos. A clear timeline is established, and
we begin to dig in deep to get to the essence and
foundation of your brand, to lay down the framework
for the rest of your business model.
</p>
</div>
</div>

<div class ="section">
<div class="beadeven"></div>
<div class ="content">
<h2> Chapter Two: Narrative</h2>
<p>
What are the ultimate goals for your brand?
Your vision, your mission? Who does your brand
speak to, and who is it welcoming into
your community of like-minded individuals?
After delving into all this information,
we use the one-concept approach
to draft a creative direction for your brand
that speaks directly to your ideal customer.
</p>
</div>
</div>

<div class ="section">
<div class="bead"></div>
<div class ="content">
<h2> Chapter 3: Creation</h2>
<p>
Now comes the fun part. Weaving your built strategy
with heartfelt visuals, we now delve into the perception of
your brand.
<br>
This includes the design of your logos, collateral design,
social media, website design, and any additional
services that may be unique to your brand.
</p>
</div>
</div>

<div class ="section">
<div class="beadeven"></div>
<div class ="content">
<h2> Chapter Four: Synthesis</h2>
<p>
We come to the bittersweet end of our journey with
synthesis. This include the collation of all your
brand files, a full fledged brand direction board,
brand guidelines, and the prospect of investing further
in our customized Interior Design services for our
journey to come full circle.
</p>
</div>
</div>


</div>

</div>
<script src="/s/timeline.js"></script>

Thanks!

MadihaSyed · April 10, 2022

@tuanphan does this help?

tuanphan · April 11, 2022

Sorry. Misread your question. I thought you want to add image under text

I think you should consider finding another timeline code to achieve this

With current timeline, try adding this to Design > Custom CSS

@media screen and (min-width:768px) {
.section.show-me:nth-child(2):after {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/16/23/12/desert-6943430__480.jpg);
    background-position: right;
    content: "";
    width: 100%;
    z-index: 99999;
    transform: translateX(100%);
}
.section.show-me:nth-child(3):after {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/16/23/12/desert-6943430__480.jpg);
    background-position: left;
    content: "";
    width: 100%;
    z-index: 99999;
    transform: translateX(-150%);
}
}

MadihaSyed · April 11, 2022

Thanks! I did try it out and this was the result: The text width is also decreasing. And overall I think on smaller windows the timeline's text and bead keeps moving left/right and isn't responsive.

I am trying to look for something similar on codepen but not able to 😞 Any idea what I can do?

tuanphan · April 17, 2022

On 4/11/2022 at 6:07 PM, MadihaSyed said:

Thanks! I did try it out and this was the result: The text width is also decreasing. And overall I think on smaller windows the timeline's text and bead keeps moving left/right and isn't responsive.

I am trying to look for something similar on codepen but not able to 😞 Any idea what I can do?

Hi,

How about this: https://codepen.io/samedkazan/pen/gOgNpzL

I tweaked some code to Squarespace: https://thung.squarespace.com/timeline-textimage-side-by-side?noredirect

Password: abc

(I haven't adjusted layout on mobile yet)

MadihaSyed · April 30, 2022

Thank you so much! Will check it out.

Localmotionuk · June 13, 2022

Hey @MadihaSyed @tuanphan,

Did you manage to find a solution for having the text and image on opposite sides of the timeline? I would like to do the same.

I would like to move the circled in red text onto the opposite side of the timeline to reduce the section length.

This is the code I am currently using:

<p>ZeroJet’s story begins in 2014 when our co-founders - entrepreneurs and outdoors-enthusiasts Bex and Neil - moved to Perth and opened the world’s first Jetsurf Experience Centre. Through buying, selling and renting out these Czech-made boards, they simultaneously realised a) how big the market was, and b) the negative impact these petrol powered, two-stroke motorised surfboards were having on the environment. During this time Bex made a video which went viral online, and it was further proof that there was an enthusiastic market waiting to be served.

<p>But Bex and Neil decided to serve up something a bit greener; something to counteract the jetboards’ carbon footprint. So in 2015 they moved back to New Zealand and founded Voltaic Jetboards. After assembling a team of four engineers - all ex-Buckley Systems; a New Zealand success story making electromagnets for particle accelerators - the crew started work on a more environmentally-friendly alternative, and they spent the next two years developing high-performance electric jetboards.

</div>

</li>

<p>Fast forward to 2018, the team had carried out significant Research & Development on a bespoke jet pump design paired with electric motor and custom hull design using their hydrodynamic expertise. In other words, they produced a finalised design and a high-performing prototype: the world’s fastest electric jetboard, hitting speeds of 70km/hr.

</div>

</li>

<p>With such positive feedback about the impressive performance their electric jetboard was capable of, it was the interest of boat builders that ultimately influenced the team to pivot their business and focus purely on electric jet systems for boats. Although the opportunity was a daunting one, it was also a fantastic chance to make a much greater impact in the world. During this year the first prototype electric jet tender was designed and built - though it actually packed a little too much punch!

</div>

<p>Despite the relative international chaos of 2020, it was a year of exponential growth for Bex, Neil and their team. After rebranding to ZeroJet and raising seed capital from investors, the team grew to 10 and managed to hit a number of key milestones, including: - completed a 3 month Startmate accelerator program - built the world’s lightest electric jet tender - developed a highly efficient jetpod system designed for 3m to 4m boats - formed an ongoing partnership with Offshore Cruising Tenders - launched publicly and started making sales to a very interested marine industry

</div>

<h3>2021 and beyond</h3>

<p>Alongside the material and technical development journey of ZeroJet, some powerful comparisons have been made to the automotive industry, to gauge the impact of traditional petrol-powered outboard motors on the marine environment. In short, taking one 20hp four-stroke outboard off the water is the equivalent of taking 150 cars off the road - and that’s something we’re striving to have a hand in. Our plans include partnering with more boat builders, expanding internationally, and developing systems for larger 5m and 6m tenders, all working towards our ultimate audacious goal of eliminating the need for combustion engines on small watercraft.

</div>

</ul>

</div>

<style>

@import url('https://fonts.googleapis.com/css?family=Amaranth|Source+Sans+Pro&display=swap');

.main-timeline {

padding: 2em 0;

}

.main-timeline h1 {

color: #00AEEF;

font-family: 'Amaranth', sans-serif;

line-height: 3em;

}

.main-timeline h3 {

color: #003D58;

font-family: 'Amaranth', sans-serif;

}

.main-timeline p {

color: #003D58;

font-family: 'Source Sans Pro', sans-serif;

font-size: 18px;

font-weight: 400;

line-height: 1.4em;

}

.main-timeline .timeline {

position: relative;

}

.main-timeline .timeline:before {

background: #003D58;

content: '';

height: 100%;

left: 50%;

position: absolute;

transform: translateX(-50%);

width: 4px;

}

.main-timeline .timeline .timeline-item {

clear: both;

list-style-type: none;

padding: 0 30px;

position: relative;

}

.main-timeline .timeline .timeline-item:before {

background: #003D58;

border-radius: 50%;

content: '';

height: 20px;

left: 50%;

position: absolute;

transform: translateX(-50%);

width: 20px;

}

.main-timeline .timeline .timeline-item .timeline-content {

background: #E9E9F3;

border: 2px #E9E9F3;

padding: 1em;

width: 46%;

}

.main-timeline .timeline .timeline-item .timeline-content h3, .main-timeline .timeline .timeline-item .timeline-content p, .main-timeline .timeline .timeline-item .timeline-content button {

margin: 20px;

}

.main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

float: right;

}

.main-timeline .timeline .timeline-item:nth-child(2):before {

background: #003D58;

}

.main-timeline .timeline .timeline-item:nth-child(2) .timeline-content {

background: #E9E9F3;

border: 2px #E9E9F3;

}

.main-timeline .timeline .timeline-item:nth-child(3):before {

background: #003D58;

}

.main-timeline .timeline .timeline-item:nth-child(3) .timeline-content {

background: #E9E9F3;

border: 2px #E9E9F3;

}

.main-timeline .timeline button {

background: #fff;

border: 2px solid #fff;

color: #656565;

font-weight: 500;

padding: 10px;

transition: all 0.3s;

}

.main-timeline .timeline button:hover {

background: #fff;

border: 2px solid #656565;

}

@media screen and (max-width: 968px) {

.main-timeline .timeline {

margin: 0 0 0 10px;

}

.main-timeline .timeline:before {

left: 0px;

}

.main-timeline .timeline .timeline-item:before {

left: 0;

}

.main-timeline .timeline .timeline-item .timeline-content {

margin: 2em 0;

width: 100%;

}

.main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

float: initial;

}

.timeline {

padding-left:0;

}

</style>

tuanphan · June 14, 2022

11 hours ago, Localmotionuk said:

Hey @MadihaSyed @tuanphan,

Did you manage to find a solution for having the text and image on opposite sides of the timeline? I would like to do the same.

I would like to move the circled in red text onto the opposite side of the timeline to reduce the section length.

This is the code I am currently using:

<div class="main-timeline">

    <ul class="timeline">

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/5d33320c-7d51-4d76-9b00-6853cf8df142/Bex-jetsurfing.jpg?format=750w" />

                <h3>2014</h3>

                <p>ZeroJet’s story begins in 2014 when our co-founders - entrepreneurs and outdoors-enthusiasts Bex and Neil - moved to Perth and opened the world’s first Jetsurf Experience Centre. Through buying, selling and renting out these Czech-made boards, they simultaneously realised a) how big the market was, and b) the negative impact these petrol powered, two-stroke motorised surfboards were having on the environment. During this time Bex made a video which went viral online, and it was further proof that there was an enthusiastic market waiting to be served.

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/e0c8f833-28e2-4ee7-9ee9-9219f221dce9/water-blasting.jpg?format=750w" />

                <h3>2015</h3>

                <p>But Bex and Neil decided to serve up something a bit greener; something to counteract the jetboards’ carbon footprint. So in 2015 they moved back to New Zealand and founded Voltaic Jetboards. After assembling a team of four engineers - all ex-Buckley Systems; a New Zealand success story making electromagnets for particle accelerators - the crew started work on a more environmentally-friendly alternative, and they spent the next two years developing high-performance electric jetboards.

            </div>

        </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1e5026d8-98a3-436e-871b-409a3f248e3e/voltaic_electric_jetboards-jumping.jpg?format=750w" />

                <h3>2018</h3>

                <p>Fast forward to 2018, the team had carried out significant Research & Development on a bespoke jet pump design paired with electric motor and custom hull design using their hydrodynamic expertise. In other words, they produced a finalised design and a high-performing prototype: the world’s fastest electric jetboard, hitting speeds of 70km/hr.

            </div>

        </li>

      </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/2485dbe7-0fa0-4a7f-a8ce-bd6dcd84fbba/20191123_1339280-scaled.jpg?format=750w" />

                <h3>2019</h3>

                <p>With such positive feedback about the impressive performance their electric jetboard was capable of, it was the interest of boat builders that ultimately influenced the team to pivot their business and focus purely on electric jet systems for boats. Although the opportunity was a daunting one, it was also a fantastic chance to make a much greater impact in the world. During this year the first prototype electric jet tender was designed and built - though it actually packed a little too much punch!

            </div>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/ae1f0edb-7bb6-453b-84cc-12e912aa86a8/zerojet-electric_jet_tender-transparent-front.jpg?format=750w" />

                <h3>2020</h3>

                <p>Despite the relative international chaos of 2020, it was a year of exponential growth for Bex, Neil and their team. After rebranding to ZeroJet and raising seed capital from investors, the team grew to 10 and managed to hit a number of key milestones, including: - completed a 3 month Startmate accelerator program - built the world’s lightest electric jet tender - developed a highly efficient jetpod system designed for 3m to 4m boats - formed an ongoing partnership with Offshore Cruising Tenders - launched publicly and started making sales to a very interested marine industry

            </div>

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1290933b-c060-4bf1-9861-1243b298a668/about_us-2021-scaled.jpg?format=750w" />

                <h3>2021 and beyond</h3>

                <p>Alongside the material and technical development journey of ZeroJet, some powerful comparisons have been made to the automotive industry, to gauge the impact of traditional petrol-powered outboard motors on the marine environment. In short, taking one 20hp four-stroke outboard off the water is the equivalent of taking 150 cars off the road - and that’s something we’re striving to have a hand in. Our plans include partnering with more boat builders, expanding internationally, and developing systems for larger 5m and 6m tenders, all working towards our ultimate audacious goal of eliminating the need for combustion engines on small watercraft.

            </div>

    </ul>

</div>

<style>

@import url('https://fonts.googleapis.com/css?family=Amaranth|Source+Sans+Pro&display=swap');

.main-timeline {

              padding: 2em 0;

}

.main-timeline h1 {

              color: #00AEEF;

              font-family: 'Amaranth', sans-serif;

              line-height: 3em;

}

.main-timeline h3 {

              color: #003D58;

              font-family: 'Amaranth', sans-serif;

}

.main-timeline p {

              color: #003D58;

              font-family: 'Source Sans Pro', sans-serif;

              font-size: 18px;

              font-weight: 400;

              line-height: 1.4em;

}

.main-timeline .timeline {

              position: relative;

}

.main-timeline .timeline:before {

              background: #003D58;

              content: '';

              height: 100%;

              left: 50%;

              position: absolute;

              transform: translateX(-50%);

              width: 4px;

}

.main-timeline .timeline .timeline-item {

              clear: both;

              list-style-type: none;

              padding: 0 30px;

              position: relative;

}

.main-timeline .timeline .timeline-item:before {

              background: #003D58;

              border-radius: 50%;

              content: '';

              height: 20px;

              left: 50%;

              position: absolute;

              transform: translateX(-50%);

              width: 20px;

}

.main-timeline .timeline .timeline-item .timeline-content {

              background: #E9E9F3;

              border: 2px #E9E9F3;

              padding: 1em;

              width: 46%;

}

.main-timeline .timeline .timeline-item .timeline-content h3, .main-timeline .timeline .timeline-item .timeline-content p, .main-timeline .timeline .timeline-item .timeline-content button {

              margin: 20px;

}

.main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

              float: right;

}

.main-timeline .timeline .timeline-item:nth-child(2):before {

              background: #003D58;

}

.main-timeline .timeline .timeline-item:nth-child(2) .timeline-content {

              background: #E9E9F3;

              border: 2px #E9E9F3;

}

.main-timeline .timeline .timeline-item:nth-child(3):before {

              background: #003D58;

}

.main-timeline .timeline .timeline-item:nth-child(3) .timeline-content {

              background: #E9E9F3;

              border: 2px #E9E9F3;

}

.main-timeline .timeline button {

              background: #fff;

              border: 2px solid #fff;

              color: #656565;

              font-weight: 500;

              padding: 10px;

              transition: all 0.3s;

}

.main-timeline .timeline button:hover {

              background: #fff;

              border: 2px solid #656565;

}

@media screen and (max-width: 968px) {

              .main-timeline .timeline {

                             margin: 0 0 0 10px;

              }

              .main-timeline .timeline:before {

                             left: 0px;

              }

              .main-timeline .timeline .timeline-item:before {

                             left: 0;

              }

              .main-timeline .timeline .timeline-item .timeline-content {

                             margin: 2em 0;

                             width: 100%;

              }

              .main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

                             float: initial;

              }

}

.timeline {

padding-left:0;

}

</style>

Can you share link to page where you added Timeline?

Localmotionuk · June 15, 2022

@tuanphan

Please see link here:https://cornet-asparagus-m6a4.squarespace.com/our-story

tuanphan · June 16, 2022

On 6/15/2022 at 7:01 AM, Localmotionuk said:

@tuanphan

Please see link here:https://cornet-asparagus-m6a4.squarespace.com/our-story

I see you figured it out with bottom timeline??

Localmotionuk · June 16, 2022

Its a very ugly fix, I just managed to add a border to the blocks images+texts down one side. I would rather fix the top timeline if you can think of a appropriate solution?

Localmotionuk · June 21, 2022

Hi @tuanphan do you think you will be able to assist with this. Your assistance is much appreciated.

tuanphan · June 22, 2022

On 6/21/2022 at 8:41 AM, Localmotionuk said:

Hi @tuanphan do you think you will be able to assist with this. Your assistance is much appreciated.

It looks fine to me.

Need to add pictures to timeline slider

Recommended Posts

MadihaSyed

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

tuanphan

MadihaSyed

MadihaSyed

tuanphan

MadihaSyed

tuanphan

MadihaSyed

Localmotionuk

tuanphan

Localmotionuk

tuanphan

Localmotionuk

Localmotionuk

tuanphan

Create an account or sign in to comment

News

tuanphan

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources