en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en it en en en en en en en en en en en en en en en en en es en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en pl en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en en en de en pl en en en hu en pt en fr en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Michael Dunbar    0 Likes (Newbie)
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:
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
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 on other sites
Michael Dunbar    0 Likes (Newbie)
Posted April 23, 2014
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 on other sites
jamiejefferson    1,197 Likes (Superhero)
Posted April 23, 2014
Great, I hope you enjoy working with GSAP!
If you haven't seen it yet, there is a great jump start tutorial at http://www.greensock.com/jump-start-js/
Share on other sites
Michael Dunbar    0 Likes (Newbie)
Posted April 23, 2014
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 on other sites
jamiejefferson    1,197 Likes (Superhero)
Posted April 23, 2014
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!
Share on other sites
Michael Dunbar    0 Likes (Newbie)
Posted April 23, 2014
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 on other sites
Carl    10,906 Likes (Superhero)
Posted April 23, 2014
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:
Might help nudge you in the right direction.
Share on other sites
jamiejefferson    1,197 Likes (Superhero)
Posted April 23, 2014
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...
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Some advice on an effect
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“...obviously GSAP is incredible.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.