Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'image reveal'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

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
×