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

why background image slide show delays?

I try to make a background slideshow with a content slider but each one with different code and javascript on loading page the background image slider delays so the content not appear correct with background
html code
<section id="home">
<div class="" id="whiteback"></div>
<div class="row" style="position: absolute; margin: auto; z-index: 10; width: 100%; height: 100vh;">
<div id="slideshow" class="slider__inner">
<div class="slider__contents">
<i class="slider__image fa fa-lightbulb-o"></i>
<h1 class="slider__caption ml5"><span class="text-wrapper"><span class="letters letters-left">loream </span> <span class="letters letters-right">ipsum</span> </span></h1>
<p class="slider__txt">lorem ipsum</p>
</div>
<div class="slider__contents">
<i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents">
<i class="slider__image fa fa-diamond fa-2x"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
</section>
javascript code
<script>
var images = new Array('images/download.jpg', 'images/christ.jpg', 'images/download1.jpg');
var nextimage = 0;
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
if (nextimage >= images.length) { nextimage = 0; }
$('#home')
.css('background-image', 'url("' + images[nextimage++] + '")')
.fadeIn(1000);
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5200);
</script>

Owlcarousel2 "dots:true" not working?

I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :https://jsfiddle.net/aoa9a457/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
CSS( I am just going to show of owl-carousel)
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
Javascript
(function ($) {
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
dots: true,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
});
});
}(jQuery));

'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.
It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4, <<
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
onInitialized:setDots,
onChanged:setDots
});
});
}(jQuery));
This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.

I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...
(function ($) {
function setDots(){
$("#testimonial-slides .owl-dots").removeClass('disabled');
}
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
//items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
//onInitialized:setDots,
//onChanged:setDots
});
});
}(jQuery));
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
EDITION As suggested #navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...

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
});
});

Twiiter Bootstrap Modal is not closing when click outside

Hi im using agency theme from boostrap but i customised the size of it but when click outside of it its not closing even the normal modal from bootstrap is not closing, (sometimes it close sometimes its note) ill show my bootstrap modal below:
<p class="buttonp "> <a href="#portfolioModal" class="portfolio-link" data-toggle="modal" data-dismiss="modal">
Click for more info </a></p>
</div>
<!-- Portfolio Modal 1 -->
<div id="portfolioModal" class="modal fade portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal" aria-hidden="true">
<div class="modal-content">
<!-- <div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="modal-body">
<!-- Project Details Go Here -->
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->

Issues with your code are:
You have put modal code inside some other element and not directly in body as per directons on Bootstrap Modals
You have resized your modal-body and modal-content so it is taking whole screen. Modals have a layer that occupies whole screen (modal-backdrop class) and above it they display the modal. This modal-backdrop class closes the modal when it receives the click but it can't do that now as it is covered by the modal dialog.
I think you may have wanted to have overlay over some element. Take a look at Example on CodePen
<div class="parent">
<div class="content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
<div class="overlay">Flower, Plants, Herbs, Trees.,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,</div>
</div>
.parent{
background:green;
position: fixed;
}
.content{
background: blue;
width: 100px;
}
.overlay{
position:absolute;
background: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
}