We Keep Coding

How do I code smooth transitions between components?

I'm making my own single page application and I don't want the content to be static as I scroll down. I want it to ease in with a smooth animation. I couldn't find any guides on the subject. Here is a perfect example of what I'm talking about: qanplatform.com , as you scroll down the content has these nice transitions between components. Is it code-splitting?
so basically i have my:
<div className='App'>
<Navbar/>
<Hero/>
<Stats/>
<Business/>
<Team/>
<Footer/>
</div>
and I want every component to render with a simple animation only when I scroll down to it and not before. I don't need anyone to write code for me, all I need is a tip on how to proceed. I think qanplatform.com best represents what my idea is.

You can try this alternative one quite simple without an intersection observer, combining the CSS animation keyframes and JS to detect and reveal the content height
article: https://alvarotrigo.com/blog/css-animations-scroll/
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
#import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Asap", sans-serif;
}
body {
background: #42455a;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1) {
color: #e0ffff;
}
section:nth-child(2) {
color: #42455a;
background: #e0ffff;
}
section:nth-child(3) {
color: #e0ffff;
}
section:nth-child(4) {
color: #42455a;
background: #e0ffff;
}
section .container {
margin: 100px;
}
section h1 {
font-size: 3rem;
margin: 20px;
}
section h2 {
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .text-container {
display: flex;
}
section .text-container .text-box {
margin: 20px;
padding: 20px;
background: #00c2cb;
}
section .text-container .text-box h3 {
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px) {
section h1 {
font-size: 2rem;
text-align: center;
}
section .text-container {
flex-direction: column;
}
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-bottom {
animation: fade-bottom 1s ease-in;
}
.active.fade-left {
animation: fade-left 1s ease-in;
}
.active.fade-right {
animation: fade-right 1s ease-in;
}
#keyframes fade-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<section>
<h1>Scroll Down to Reveal Elements ↓</h1>
</section>
<section>
<div class="container reveal fade-bottom">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal fade-left">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal fade-right">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>

You can use IntersectionObserver for new elements entering into view. After that, applying styles has animation on newly entered elements. You can utilise the same technique in React with refs if you don't want to use class names or inline styles.
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
//add a new class
entry.target.classList.add('fade-in-up');
}
});
}
const options = {
rootMargin: '0px',
threshold: 0 //when it just appear in your viewport, you can modify it based on your needs
}
const observer = new IntersectionObserver(intersectionCallback, options);
//find all elements which have a class name `content` to observe, you can use React's refs as well
const contentElements = document.querySelectorAll('.content')
for (const contentElement of contentElements) {
observer.observe(contentElement)
}
#keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/*Animation styles*/
.fade-in-up {
opacity: 0;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
.content {
height: 100vh;
width: 100vw;
}
<div class="content">
<h1>
Scroll down to see the animation
</h1>
</div>
<div class="content">
<h1>
Scroll down to see the animation
</h1>
</div>
<div class="content">
<h1>
End
</h1>
</div>

You can use Animate On Scroll (AOS) or GSAP for this!
They're both pretty easy to use but for this example I'll use AOS since it's quite simpler:
// Initialize the lbrary after the page loads
AOS.init();
/* Basic styling (not needed) */
div {
margin-top: 50vh;
}
<!-- Add the required libraries for AOS -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<body>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
More examples in the AOS homepage
</body>
To use this in react just import the libraries

Trying to use the same function on individual cards

i have these 3 cards where i have the main body of text hidden. i want to be able to click on each individual button and it shows the details for that card. but every time i do get the JavaScript to work each button will only open the first cards hidden text. i was hiding the text by setting a max-height so i could use transition on the height.
any help would be appreciated
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
cardBtns.forEach(function(cardBtn) {
cardBtn.addEventListener('click', function() {
cardDetails.classList.toggle('card-open');
});
});
<div class="container">
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
</div>
I feel like the JavaScript is wrong, I've tried many alternatives

You were close:
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
cardBtns.forEach(function (cardBtn, index) {
cardBtn.addEventListener('click', function(){
cardDetails[index].classList.toggle('card-open');
});
});
The problem was inside the event handler, bacause by calling cardDetails you deal with an array of elements, not just one.

You had all 3 with id='card' so I made that a class.
The way you can find the relative 'card-detail' is through capturing the event (e) and finding the closest 'card' class, then querySelector finding the associated 'card-body'
The transition is a css rule, and with height the way to do it is to work with max-height - setting the 'open' max-height to be larger than the actual.
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
window.addEventListener('load', () => {
cardBtns.forEach(cardBtn => {
cardBtn.addEventListener('click', e => {
e.target.closest('.card').querySelector('.card-body').classList.toggle('card-open');
});
});
});
.card {}
.card-body {
max-height: 0;
transition: all .5s ease-in;
overflow: hidden;
padding: 15px;
}
.card-body.card-open {
max-height: 200px;
}
<div class="card1 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>

This is the right way to do it:
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<script>
var cardBtns = document.querySelectorAll('.cardBtn');
cardBtns.forEach(function(cardBtn) {
cardBtn.addEventListener('click', function() {
let cardDetails = cardBtn.closest('.card-details');
let cardBody = cardDetails.getElementsByClassName('card-body')[0];
if (cardBody.classList.contains('d-none')) {
cardBody.classList.remove('d-none');
cardBody.classList.add('d-block');
cardBtn.textContent = 'Show Less';
} else {
cardBody.classList.remove('d-block');
cardBody.classList.add('d-none');
cardBtn.textContent = 'Show more';
}
});
});
</script>
<style>
.d-none {
display: none;
}
.d-block {
display: block;
}
</style>
JS fiddle Demo: https://jsfiddle.net/5sqkdp0x/

I would just add one event listener for the entire page. I don't know how many cards you will end up having, but if you got 10.000 of them, it will take time to add them all.
Also, id on elements should be unique, so remove all occurrences of id="card" because they serves almost no purpose.
window.addEventListener('click', function(event) {
let element = event.target;
if (element.classList.contains('cardBtn')) {
let cardHeadingEl = element.parentNode;
let cardDetailsEl = cardHeadingEl.parentNode;
cardDetailsEl.classList.toggle('open');
}
});
.card-body {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 300ms, max-height 400ms;
transition-timing-function: ease-out;
}
.card-details.open > .card-body {
max-height: 200px;
opacity: 1;
}
<div class="container">
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
</div>

What is the best approach to make my HTML code responsive for mobile with minimal amount of re-writing code?

sorry if this is a fairly vague question, I have a grid with two rows ontop of one another with content expanding below either of the two rows when the panel is clicked. This works fine on desktop and tablet sized devices but for mobile I'd like the panels to span vertically, with the expanding content opening directly beneath each panel. Any pointers on a starting point for this would be great, I know I can use media queries but really unsure how to structure my code to make it a reality.
Working fiddle here: https://jsfiddle.net/simoncunningham/a3e6514r/3/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script src="index.js"></script>
</head>
<body>
<div style="text-align: center">
<h2>Expanding Grid</h2>
<p>Click on the boxes below:</p>
</div>
<!-- Four columns -->
<div class="row">
<div class="column" onclick="openTab('b1');">
<img src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b2');">
<img src="./Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b3');">
<img src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b4');">
<img src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<!-- Full-width columns: (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h3>Banking</h3>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b2" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>RegTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b3" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>InsurTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b4" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Lending</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<!-- Bottom four columns -->
<div class="row">
<div class="column" onclick="openTab('b5');">
<img src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b6');">
<img src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b7');">
<img src="./Icons/Quote.svg" />
<p>Quote Aggregators</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b8');">
<img src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<div id="b5" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Accounting</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b6" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Payments</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b7" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Quote</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b8" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>WealthTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
</body>
</html>
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('containerTab');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
}
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.column');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-column');
});
// Set the background of the clicked tab
this.classList.add('active-column');
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Four equal columns that floats next to each other */
.column {
background-color: black;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.active-column {
background-color: green;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}

you can add this code to your css:
#media screen and (max-width: 768px) {
.column{
width:100%
}
}

You can a #media in css to make it so it responds really well on mobile devices

If you want my advice, you should use bootstrap for a base of your css. It will really help you when you'll organise your page. There is a lot of good documentation in their. You only need to add classes in your elements. It's really easy to use.
link: https://getbootstrap.com/docs/4.0/layout/grid/
Your page is separated by 12 pieces. You can say, if my page is large, take 3/12 of the space for each elements. If the page is medium size, take the half of the page and if it's small, take all the horizontal space. So in my class, I'll write class="col-lg-3 col-md-6 col-sm-12". I'm sorry if it's not clear. But for real it's really simple.

How to move a div depending on scroll percentage

I'm trying to make some animations for my application but I can't figure it out. I want the text and description to move depending on how much of the page scrolls. For the first div I managed to do it, but for the others, nothing happens. How could I do that when I scroll more than 40% to move the div according to the scroll?
Here is my code
$(window).on('scroll', function () {
let height = $('body').height();
let scroll = $(document).scrollTop();
if (scroll > height * 0.01) {
$('.div1 .title').css({
left: -350 + Math.min(350, scroll)
});
$('.div1 .description').css({
left: -350 + Math.min(350, scroll)
});
}
if (scroll > height * 0.4) {
$('.div2 .title').css({
right: -350 + Math.min(350, scroll)
});
$('.div2 .description').css({
right: -350 + Math.min(350, scroll)
});
}
});
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.div1 {
}
.div1, .div2, .div3 {
display: flex;
justify-content: center;
margin-top: 500px;
}
.left {
width: 500px;
}
.right {
width: 500px;
margin-left: 50px;
}
.right img, .left img {
width: 100%;
}
.div1 .title {
position: relative;
left: -350px;
}
.div1 .description {
position: relative;
left: -350px;
}
.div2 .title {
position: relative;
right: -350px;
}
.div2 .description {
position: relative;
right: -350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="div1">
<div class="left">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
<div class="right">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
</div>
<div class="div2">
<div class="left">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
<div class="right">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
</div>
<div class="div3">
<div class="left">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
<div class="right">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
</div>

Try the following function to move the title and desription in each divs depending on the scroll position:
function moveOnViewPort(el, mult) {
let scrollPos = $(document).scrollTop();
let viewPortHeight = $(window).height();
let elementScrollPos = $(el).offset().top;
if((scrollPos + viewPortHeight) > elementScrollPos) {
let moveVal = (scrollPos + viewPortHeight - elementScrollPos) * mult;
if($(el).hasClass('move-left')) {
$(el).find('.move').css({
left: -350 + Math.min(350, moveVal)
});
}
else if($(el).hasClass('move-right')) {
$(el).find('.move').css({
right: -350 + Math.min(350, moveVal)
});
}
}
}
Working demo and implementation details can you find here: https://jsfiddle.net/dat57qse/

divs height and width are not fixed in carousel slider

Visit this link for code snippet https://codepen.io/arunkayathi/pen/dRPYzz
html
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<body>
css
#projects {
background-color: #f65d52;
/* background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
js
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
Hello all,
I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.

Your images need a fixed height otherwise things will get pushed down or up.
if you can't set a fixed height on the images then I suggest just a fixed position of the project title and description div. Maybe make it absolute of its parent.

Just simply use a fixed height for images:
.project-image img {
width: 100%;
max-width: 480px;
height: 480px;
margin: 0 auto;
}

Try this, set fixed height to your images.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
#projects {
background-color: #f65d52;
/*background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
height: 340px;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>

Add responsiveClass for set all slide responsive.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true,
responsiveClass:true
});
});