3
\$\begingroup\$

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'});

});

\$\endgroup\$
  • \$\begingroup\$ ? Any comments? \$\endgroup\$ – Anth Mar 30 '17 at 15:15
  • \$\begingroup\$ 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? \$\endgroup\$ – le_m Apr 18 '17 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.