Jump to content

Search the Community

Showing results for tags 'image reveal'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 1 result

  1. 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