Jump to content
Search Community

Some advice on an effect

Michael Dunbar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi, welcome to the forums. Please consider building an example in codepen next time, as a bunch of CSS and Javascript like that doesn't mean much until we see it running.

 

I copied your code into codepen and made a few changes:

See the Pen lIdgm by jamiejefferson (@jamiejefferson) on CodePen

$(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,
      y: 200,
      display: 'none', // hide element in DOM
      ease: Power1.easeOut
    });
  });

  container.mouseleave(function (e) {
    TweenMax.to(blackPhone, 1,
    {
      autoAlpha: 1,
      y: 0,
      display: 'block', // show element in DOM
      ease: Power1.easeIn
    });
  });
}
  • I didn't have your images so I added background colors and set the image sizes
  • I've added a y change to the mouseover effect, but I'm not entirely sure if that's what you meant?
  • $(container) is not needed, since it is already a jQuery object
  • You can 'tween' to and from display: 'none' and GSAP will choose the appropriate times to switch them ('none' is set at the end of the tween, and all other values at the beginning)
  • Linear eases don't actually change when using easeIn/easeOut like that. All Linear eases are exactly that - linear.

If I missed your intention, or you have more questions, please fork the codepen with any changes you make so we can get straight to helping you nail down your animation.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Ah right, I get you now. The effect you're after isn't quite the same as alpha/opacity - it's called masking - and in CSS the syntax is called clip. It's defined like this in CSS:

clip: rect(top, right, bottom, left);
and you'll use the same syntax to tween it e.g.

TweenLite.to(foo, 1, { clip: "rect(5px, 5px, 5px, 5px)" });
The rect is a bit of an odd one to figure out, but this CSS-Tricks article has a pretty good example of it.

 

P.S. that site turned out top be quite pretty, but only after a 2 minute loading screen and 8.5mb later... I'd have thought they might optimise their 'tablet' site a little better than that! :P

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...