Search the Community

Hi, I'm just getting started with GSAP and am attempting to create a specific animation that I was hoping I could get some direction on how to achieve. I have two images on top of one another and would like to reveal the image at the bottom as the user moves their cursor down over the top image - kind of a peel down effect. Two parts I don't yet understand are how to use the y coordinate and how to only hide the top image to that coordinate. Is that even the right way of thinking? I've managed so far to fade the top image in and out based on mouse hover with the following code: HTML <span class="phone"> <img src="~/img/iphone-black.png" alt="" class="black" /> <img src="~/img/iphone-white.png" alt="" class="white" /> </span> CSS .phone { position: relative; display: block; width: 400px; /* TODO: responsive? */ height: 800px; } .phone .black { position: absolute; z-index: 2; } .phone .white { position: absolute; z-index: 1; } JS $(function () { setUpMouseEvents(); }); function setUpMouseEvents() { var container = $('.phone'); var blackPhone = $('img.black', container); var whitePhone = $('img.white', container); $(container).mouseover(function (e) { TweenMax.to(blackPhone, 1, { autoAlpha: 0, ease: Linear.easeOut, onComplete: function () { blackPhone.css('display', 'none'); // hide element in DOM } }); }); $(container).mouseleave(function (e) { blackPhone.css('display', 'block'); TweenMax.to(blackPhone, 1, { autoAlpha: 1, ease: Linear.easeIn }); }); } Thanks. Michael