Image Reveal Effect on Scroll (Motion.page)

June 16, 2023

In this Motion.page tutorial I will show you how to do this cool image reveal effect when scrolling down the page.

I recently came across this website (https://kokokombucha.pl/) and thought I would try to recreate the bottle image reveal effect using Motion.page.

Purchase Motion.Page:
https://motion.page/go/wickydesign/

Motion.Page Overview Video:
https://www.youtube.com/watch?v=RW9Vwg5sZRo

Timestamps:

  • 0:00 Introduction
  • 0:34 Gather Image Assets
  • 1:14 Add HTML and CSS
  • 4:51 Motion.page Tutorial

Credit: Stock Image Used

HTML & CSS Code:

				
					<style>
.drink-outline {
  max-width: 450px;
}

.drink-color {
  position: absolute;
  overflow: hidden;
  max-width:450px;
  height: 102%;
}


.drink-line {
  position: absolute;
  bottom: 0;
  width: 450px;
  left: 50%;
  transform: translateX(-50%);
}
</style>


<div class="drink-color">
    <img decoding="async" src="line-overlay.jpg" alt="Drink line" class="drink-line" />
    <img decoding="async" src="drink-color.jpg" alt="Drink color" />
</div>
    
<div class="drink-outline">
    <img decoding="async" src="drink-outline.jpg" alt="Drink outline" />
</div>
           
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources