Jump to content
GreenSock

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

Some advice on an effect

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I couldn't get the reference site to load. It took forever to get 16mb down and it was still going.

 

Your initial description of the effect reminds me of Chrysto's "before / after" slider:

http://codepen.io/bassta/pen/Fypuw

 

Might help nudge you in the right direction.

  • Like 1

Share this post


Link to post
Share on other sites

I think there might be some repeated, circular loading happening during that loading bar - with dev tools open and browser cache disabled in Chrome, the site hadn't completed loading after 15 minutes, and the MB downloaded never stopped climbing...

  • Like 2

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×