Jump to content
GreenSock

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

Gallery

Recommended Posts

Hi all,

 

This may not look like a gallery at the moment but i problem there is a method to my madness. :)

 

Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once.

 

Thanks,

 

Phil

See the Pen MaowJa by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

ooh! same `id` applied to a number of elements i.e. `cell` and `image`. IDs are supposed to be unique. May be you intended to use `class` instead?

Link to comment
Share on other sites

This may help: 

See the Pen RWgPZY by tah_med (@tah_med) on CodePen

.

 

HTML:

<section id="gallery">
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
</section>

CSS:

html { width: 100%; height: 100%; }body { margin: 0; padding: 0; height: 100%; width: 100%; }
#gallery { background-color: #000000; width: 100%; height: 100%; position: absolute; }
.cell { background-color: #F0F; width: 25%; height: 25%; cursor: pointer; float: left; overflow: hidden; }
.image { background-color: #FF0; width: 100%; height: 100%; position: relative; float: left; }

JavaScript:

var cells = document.getElementsByClassName('cell');
var numCells = cells.length;
var duration = 0.8;
var easeOut = Power2.easeOut;
var easeIn = Power2.easeIn;

for (var i = 0; i < numCells; i += 1) {
  cells[i].addEventListener('mouseover', inFunction, false);
  cells[i].addEventListener('mouseout', outFunction, false);
}

function inFunction(e) {
  TweenMax.to(e.target.parentNode, duration, { autoAlpha: .5, ease: easeOut });
  TweenMax.to(e.target, duration, { scale: 1.2, ease: easeOut });
}

function outFunction(e) {
  TweenMax.to(e.target.parentNode, duration, { autoAlpha: 1, ease: easeIn });
  TweenMax.to(e.target, duration, { scale: 1, ease: easeIn });
}
  • Like 2
Link to comment
Share on other sites

Thank you Tahir! This is perfect. :)

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.
×