Michael Dunbar

Ha ha agreed and hence why we are using GSAP! Thanks for all the help. I feel like I am really up and running now. I've learned a fair bit through trial and error, as hoped.

I'll watch that tutorial now thanks. One further question relating to the original question. Is it possible to set the alpha of an object (an image) to a certain point instead of to the entire object? I know where my cursor is over the container thanks to the mousemove event and only want to apply the alpha 0 property to the top image to the x coordinate of the cursor. See this effect on the tablet to see the kind of thing I am trying to achieve: http://tablet.fubiz.net/ I'll set up a codepen project, if this isn't clear.

That's really helpful, thank you. I'll get back to you (via codepen) if I get stuck again. I'm just prototyping up a few ideas at the moment to get ahead of our creative team and to get my head around the basics of GSAP.

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