<div class='mask'>
            <img id="test" src="https://dummyimage.com/300x600/b300b3/fff">
 </div>
.mask {
  position: absolute; 
  width: 300px; 
  height: 600px; 
  left: 0px; 
  top: 0px; 
  overflow: hidden;}
    
.mask img {
  position: absolute; 
  width: 300px;
  height: 600px; 
  left: 0px; 
  top: 0px;
  overflow: hidden;}
var tl1 = new TimelineMax;

tl1.from('.mask', 2.5, {y:600, ease: Power2.easeOut}, 0.5)
.from('#test', 2.5, {y:-600, ease: Power2.easeOut}, 0.5);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js