# Image placement & animation from grid

I have a grid of different sized images. I made a click event function that grabs the image inside any clicked grid-item. It then saves the coordinates and size of the image and animates from the grid into its final resting place in the article. I was able to get the effect working perfectly the problem is that I need to make the click event more modular so I can reuse it. But I'm having trouble wrapping my head around it. I was hoping that someone could review my code and give me a few pointers on how to make this click event more modular:

var $ourWork =$('.ourWork'),
$ourWorkChild =$('.ourWorkChild'),
$body =$('body'),
$workHdrMsg =$('.work .header-message'),
$imgGhost =$('.img--ghost'),
time = 0.25;

var $workGrid =$('.ourWork .grid').packery({
columnWidth: '.ourWork .grid-sizer',
itemSelector: '.ourWork .grid-item',
percentPosition: true
});

$workGrid.on( 'click', '.grid-item', function( event ) { // find img.grow element inside of the work-grid element var rg = event.currentTarget, // ripple r = rg.querySelector('.ripplelink'), // ripple_image rImg = r.querySelector('.img--grow'), // ripple image info riInfo = rImg.getBoundingClientRect(), ri_height = riInfo.height, ri_width = riInfo.width, ri_top = riInfo.top, ri_left = riInfo.left,$body = document.body,
dupImg = rImg.cloneNode(true);

// get size/position of the ghost image
var gi = document.body.querySelector('.img--ghost'),
giInfo = gi.getBoundingClientRect(),
gi_height = giInfo.height,
gi_width = giInfo.width,
gi_top = giInfo.top,
gi_left = giInfo.left,
offsetY = window.pageYOffset;

dupImg.style.width = ri_width + 'px';
dupImg.style.height = ri_height + 'px';
dupImg.style.left = ri_left + 'px';
dupImg.style.top = ri_top + 'px';
dupImg.style.position = 'absolute';

$body.appendChild(dupImg); var t1 = new TimelineMax(); t1 .to([$workGrid, $workHdrMsg], time * 1.15, {delay: time, transformOrigin: '50% 100%', scale: .98, autoAlpha: 0, display:'none', ease: Power1.easeOut}, 0) .to($body, time * 1.15, {backgroundColor: '#4ba8f4', ease: Power1.easeOut}, 0)
.set($ourWork, {display: 'none'}) .set($ourWorkChild, {transformOrigin: '50% 100%', autoAlpha: 0, y: '+=25px', scale: .96, display: 'block'}, 0)
.to(dupImg, time * 1.15, {width: gi_width, height: gi_height, x: gi_left - ri_left, y: gi_top - ri_top + offsetY, transformOrigin:'0% 0%', ease: Power1.easeOut}, '+=0.01')
.to($ourWorkChild, time * 1.15 , {autoAlpha: 1, y: 0, scale: 1, ease: Power1.easeOut}, '+=0.015') .set(dupImg, {display: 'none'}) .set($imgGhost, {opacity: '1'});

});

• ? Any comments? – Anth Mar 30 '17 at 15:15
• Reviewing would be easier if a working stack snippet were provided. What is TimelineMax? Can you provide some minimal HTML markup to make this work? – le_m Apr 18 '17 at 13:30