is-selected Flickity Option

index.html

<div class="slide--parent">
	<div class="parent--el">
		<div class="two--col">
			<div class="is-item has--img">
				<figure class="the-img">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/602471/jake-ingle-168726%20copy.jpg" alt="">
				</figure>
			</div>
			<div class="is-item has--content">
				<div class="is-item--inner">
					<h1><span>EXPLORE</span></h1>
					<small>Escape The City</small>
					<hr>
					<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis laborum laborum illum voluptates est et voluptas?</p>
					<p>Sed quidem delectus laborum itaque laborum alias, officiis illum voluptates est et voluptas?</p>
					<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis illum voluptates est et voluptas?</p>
				</div>
			</div>
		</div>
	</div>

	<div class="parent--el">
		<div class="two--col">
			<div class="is-item has--img">
				<figure class="the-img">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/602471/lee-campbell-512447%20copy.jpg" alt="">
				</figure>
			</div>
			<div class="is-item has--content">
				<div class="is-item--inner">
					<h1><span>GRAB COFFEE</span></h1>
					<small>Coffee Makes Everything Better</small>
					<hr>
					<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis laborum laborum illum voluptates est et voluptas?</p>
					<p>Sed quidem delectus laborum itaque laborum alias, officiis illum voluptates est et voluptas?</p>
					<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis illum voluptates est et voluptas?</p>
				</div>
			</div>
		</div>
	</div>

</div>
</div>

is-selected-flickity-option.markdown

is-selected Flickity Option

How to use the Flickity added class "is-selected" to add some transitions to your Flickity slider.

A Pen by Uriel Wilson Jr. on CodePen.

License.

script.js

var slideEl = $(".slide--parent");

slideEl.flickity({
	imagesLoaded: true,
	wrapAround: true,
	autoPlay: true,
	pauseAutoPlayOnHover: false
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

style.scss

body {
	font-family: "Fira Sans", sans-serif;
	margin-top: 3em;
}

.slide--parent {
	max-width: 1100px;
	margin: auto;
	overflow: hidden;
}
p {
	line-height: 1.8;
}
h1 {
	letter-spacing: 10px;
	color: #343434;
	margin: 0;
}
small {
	font-style: italic;
	font-weight: 700;
	margin-bottom: 0.5em;
	display: inline-block;
	color: #999;
	position: relative;
	padding-left: 3em;

	&:after {
		content: "";
		position: absolute;
		left: -0em;
		top: 50%;
		height: 4px;
		width: 2.4em;
		background: red;
		transform: translateY(-50%);
	}
}

.parent--el {
	width: 100%;
	max-width: 1000px;
	margin: auto;

	.two--col {
		display: flex;
		align-items: center;
	}
}

figure {
	margin: 0;
}
.is-item {
	width: 60%;
	&.has--img {
		width: 40%;
	}
}
.the-img {
	width: 100%;
	position: relative;
	overflow: hidden;
	img {
		width: 100%;
	}
}

.is-item--inner {
	padding: 0em 3em;
}

hr {
	margin: 0.5em 0em;
	height: 4px;
	background: #eee;
	border: none;
}

// transitions
.the-img {
	overflow: hidden;
	img {
		position: relative;
		transform: translateX(100%);
		transition: all 600ms ease;
	}
}

.is-item--inner {
	p {
		transform: translateY(15px);
		position: relative;
		opacity: 0;
		transition: all 400ms ease;
	}
}

h1 {
	overflow: hidden;
	span {
		transform: translateY(100%);
		position: relative;
		transition: all 500ms ease;
		display: inline-block;
	}
}

hr {
	width: 0;
	max-width: 8em;
	transition: all 2500ms ease;
}

small {
	transform: translateY(10px);
	opacity: 0;
	transition: all 100ms ease;
	&:after {
		width: 0;
		max-width: 2.4em;
		transition: all 1500ms ease;
	}
}

.parent--el {
	&.is-selected {
		.the-img {
			overflow: hidden;
			img {
				position: relative;
				transform: translateX(0%);
				transition-delay: 500ms;
			}
		}

		.is-item--inner {
			p {
				transform: translateY(0px);
				transition-delay: 500ms;
				position: relative;
				opacity: 1;

				&:nth-of-type(2) {
					color: red;
					transition-delay: 700ms;
				}
				&:nth-of-type(3) {
					transition-delay: 900ms;
				}
			}
		}

		h1 {
			overflow: hidden;
			span {
				transform: translateY(0%);
				position: relative;
				transition-delay: 400ms;
				display: inline-block;
			}
		}

		hr {
			width: 100%;
			max-width: 8em;
			transition-delay: 500ms;
		}

		small {
			transform: translateY(0px);
			opacity: 1;
			transition-delay: 400ms;

			&:after {
				width: 100%;
				transition-delay: 600ms;
				max-width: 2.4em;
			}
		}
	}
}

styles

<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />