Animated Photo Gallery (Also Frustrating)

animated-photo-gallery-also-frustrating.markdown

Animated Photo Gallery (Also Frustrating)

Me: Hm look at this

Friend: Wow so frustrating

Me: I guess that's the title

A Pen by Olivia Ng on CodePen.

License.

index.pug

.gallery
	.gallery__strip__wrapper
		.gallery__strip.one
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-kyoto.jpeg")
				.photo__name Kyoto
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-austria.jpeg")
				.photo__name Halstatt
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-peru.jpeg")
				.photo__name Peru
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rio.jpeg")
				.photo__name Rio
			

	.gallery__strip__wrapper
		.gallery__strip.two
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-italy.jpeg")
				.photo__name Italy
	
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-osaka.jpeg")
				.photo__name Osaka
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali.jpeg")
				.photo__name Bali
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris2.jpg")
				.photo__name Paris
		
	.gallery__strip__wrapper
		.gallery__strip.three
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-cusco.jpeg")
				.photo__name Cusco
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rome.jpeg")
				.photo__name Rome
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris.jpeg")
				.photo__name Paris
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali2.jpeg")
				.photo__name Bali
				
				
	.gallery__strip__wrapper
		.gallery__strip.four
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-milan.jpeg")
				.photo__name Milan
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-budapest.jpg")
				.photo__name Budapest

			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-vienna.jpg")
				.photo__name Vienna
			.photo
				.photo__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-mexico.jpg")
				.photo__name Mexico

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

body {
 background: #222;
 font-family: "Fira Sans", sans-serif;
 padding-right: 2rem;
}

* {
 box-sizing: border-box;
}

.gallery {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 overflow: hidden;
 max-width: 1300px;
 margin: auto;
 &__strip {
  min-height: 100vh;
  &__wrapper {
   flex: 0 0 100%;
   justify-content: flex-end;
   background: #222;
   border-right: 2px solid #333;
   position: relative;
  }
 }
}

@media (min-width: 500px) {
 .gallery__strip__wrapper {
  flex: 0 0 50%;
 }
}

@media (min-width: 950px) {
 .gallery {
  height: 100vh;
  &__strip {
   &.one {
    animation: 60s move-it ease alternate infinite 5s;
    transform: translateY(2%);
   }
   &.three {
    animation: 70s move-it ease alternate infinite 6s;
    transform: translateY(2%);
   }
   &.two {
    animation: 58s move-it-2 ease alternate infinite 5s;
    transform: translateY(-50%);
   }
   &.four {
    animation: 65s move-it-2 ease alternate infinite 5.5s;
    transform: translateY(-50%);
   }
   &:hover {
    animation-play-state: paused;
   }
   &__wrapper {
    flex: 0 0 25%;
   }
  }
 }
}

.photo {
 position: relative;
 text-align: right;
 padding-bottom: 3rem;
 &__image img {
  width: 90%;
  transform: translateX(30%);
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
 }
 &__name {
  text-transform: uppercase;
  font-size: 40px;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  margin-top: -25px;
  transition: 0.4s ease-in-out 0.4s;
  position: relative;
  width: 100%;
 }
 &:hover {
  .photo__image img {
   transform: translateX(0%);
  }
  .photo__name {
   color: #fff;
  }
 }
}

@keyframes move-it {
 0%,
 90%,
 100% {
  transform: translateY(2%);
 }
 45% {
  transform: translateY(-50%);
 }
}

@keyframes move-it-2 {
 0%,
 90%,
 100% {
  transform: translateY(-50%);
 }
 45% {
  transform: translateY(5%);
 }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />