Jump to content

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

How to do gradual alpha image swap with JS & TweenMax?

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

I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work.


I'm trying to use the old 'make a UL inline for a horizontal menu' trick --


I ran through all of these options but couldn't get any to work


1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other.

2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline'


The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful.



Link to comment
Share on other sites



You should give your img tag an absolute position and a z-index of 0, and the content on your li (I'm going to presume that you're making a menu) a bigger z-index, like this:


position: abosolute;
li a{
li a:hover{


With that code you got one in top of the other and the code above them, after that you just have to create your events and handlers in order to achieve the effect.


Check this fiddle, is not the same thing but is pretty close http://jsfiddle.net/4ALZb/6/.


Hope this helps,



Link to comment
Share on other sites

Rodrigo has the trick sorted. For a specific implementation, try this: http://jsfiddle.net/g5YQe/


Just give background-images to the .img divs and you're good to go. Sorry about the jQuery if you're not a fan of that, but I'm sure you can sort out the alternative if needed.

  • Like 2
Link to comment
Share on other sites

___ CORRECTION: one of the links doesn't have the code I was looking for, I'll look at other -- missed the first


Thanks to all — the code looks cool but it doesn't seem to actually contain the <img> tags, either within the content or as background. Can someone point me to something that explicates that?


(I copies the code from the link and tried it in my own doc -- can't get it to work as is -- the <li> dots are still there (I know how to get rid of them but wonder why they don't appear in the sample window on jsfiddle) and the js isn't working (yet)). I'll keep fiddling.


But back to the first point -- it's the <imgs> themselves that are giving me headaches, I can tween the <li>'s ok, but want to swap <img>s gradually. Thanks!

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.