Image Reveal on Hover implemetation, image positioning issue

[OmarS]

Greetings fellow devs.

 

Thanks for the amazing tool,  i'm sure its a lot more capable than my use case. Looking forward to learning more about it. Im oldschool my first foray into tweening was back in the Flash action script days

So i just learned about GSAP a few days ago, found a codepen implementation for an image reveal on hover, which seemed to fit my needs for a simple site i'm developing drmadraz.com (dev site) - Im using GSAP to show an image on hover for the 'timeline' section of the website - might be overkill but a good chance to learn more about this script.

 

However i'm having some difficulty understanding the code and specifically the positioning of the image onhover, i would like the position to always be below my mouse coordinates and fires within a single timeline entry, if data-label and data-image are available for said div. 

 

I adapted the javascript from the codepen provided and starting editing accordingly to my needs and template. However I'm not sure if i got it 100% correct. The image seems to be displayed below the div on the first entry, but as I move down the timeline, the revealed images are showing in odd places. So my guess is sthg is off with that foreach loop or the mouseenter event. Below is my current code i'm using.

 

Strangely using numbers in the data-image & data-labels wasn't working. Snippets from the page below. The main div with all the images, A single row for the timeline for reference, there are many rows like these, some will have images & data-label, some wont. And the CSS 

.timeline-images {
  position: relative;
}

.timeline-images img {
  position: absolute;
  max-height: 300px;
  opacity: 0;
  z-index: -1;
  transform: scale(0.8);
}

<div class="timeline-images">
  <img src="image/photos/A Draz.jpg" alt="Professor's Father, Sheikh Abdallah Draz's Portrait" data-image="adraz">
  <img src="image/photos/IMG_4301.jpg" alt="Photo of a young Mohamed Abdullah Draz" data-image="young">
  <img src="image/photos/IMG_4298.jpg" alt="MA Draz and the other delegates sent to France, England and Germany in 1936" data-image="sorbonne">
  <img src="image/photos/Draz return to Egypt March 1948.jpg" alt="MA Draz return from France" data-image="return">
  <img src="image/photos/Lahore/05.jpg" alt="MA Draz making opening speech at the Islamic Colloquium in Lahore Pakistan in 1957" data-image="lahore">
 </div>

      <div class="row content-process-area-l5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="700" data-aos-duration="420" data-label="adraz">
        <div class="col-xxl-3 col-lg-3">
          <div class="process-number">
            <span>1905</span>
          </div>
        </div>
        <div class="col-xxl-3 col-lg-4">
          <div class="process-heading">
            <h2>Academic Foundation</h2>
          </div>
        </div>
        <div class="offset-xxl-1 col-xxl-4 col-lg-4">
          <div class="process-content">
            <p>He moved to Alexandria in the beginning of 1905 and joined al-Azhar Institute, which was established by his father Abdallah Draz, whom Imam Mohamed Abdo appointed for the job.</p>
          </div>
        </div>
        
      </div>

const categoriesWrapper = document.querySelector('#timeline')

categoriesWrapper.addEventListener('mousemove', e => {
    gsap.to('.timeline-images img', {
        // move images to mouse position
        x: e.x, 
        y: e.y, 
        // transform origin of images to center
        xPercent: -50, 
        yPercent: -50,
        // stagger subsequent images by 50ms
        stagger: .05
    })
})

gsap.utils.toArray('.content-process-area-l5')

.forEach(category => {
    let {label} = category.dataset
    
    category.addEventListener('mouseenter', () => {
        gsap.to(`img[data-image=${label}]`, {opacity: 1, scale: .80})
        gsap.set(`img[data-image=${label}]`, {zIndex: 1})
        gsap.set(`div[data-label=${label}]`, {zIndex: 2})
    })
    
    category.addEventListener('mouseleave', () => {
        gsap.to(`img[data-image=${label}]`, {opacity: 0, zIndex: -1, scale: .50})
        gsap.set(`div[data-label=${label}]`, {zIndex: 0})
    })
})

 

See the Pen bGprvRG by ebinabo (@ebinabo) on CodePen

[mvaneijgen]

Hi @OmarS welcome to the forum!

 

Always share a pen you've created, that way we have the latest version you're working with also make sure you update to the latest version of GSAP after forking someone else their work. This seems like a perfect use case for gsap.quickSetter() https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/

 

8 hours ago, OmarS said:

I adapted the javascript from the codepen provided and starting editing accordingly to my needs and template. However I'm not sure if i got it 100% correct. The image seems to be displayed below the div on the first entry, but as I move down the timeline, the revealed images are showing in odd places. So my guess is sthg is off with that foreach loop or the mouseenter event. Below is my current code i'm using.

Can you share this version in a minimal demo preferably  in a Codepen?

[Rodrigo]

Hi,

 

In this thread @akapowl and @nico fonseca go into a lot of detail on how to create that type of effect and provide some good resources as well:

 

Hopefully this helps.

Happy Tweening!

[OmarS]

Thanks a mil for the suggestion guys - ill do more digging and create my minimal demo on codepen and get back to you if need be.