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