76 lines
No EOL
2.2 KiB
JavaScript
76 lines
No EOL
2.2 KiB
JavaScript
const toggle = {
|
|
element: document.querySelector('.nav-select-toggle'),
|
|
circle: document.querySelector('.nav-toggle'),
|
|
};
|
|
const view = {
|
|
grid: document.querySelector('.work-grid'),
|
|
index: document.querySelector('.work-index'),
|
|
indexItem: document.querySelectorAll('.work-index-item'),
|
|
indexMediaImage: document.querySelectorAll('.work-index-item-video'),
|
|
indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'),
|
|
};
|
|
|
|
const animateIndexItem = (item) =>{
|
|
const itemImages = item.querySelectorAll('.work-index-item-video');
|
|
const itemArrows = item.querySelectorAll('.work-index-item-media-arrow');
|
|
const itemTitle = item.querySelectorAll('.work-index-item-title');
|
|
|
|
const tlIndexrow = gsap.timeline({
|
|
paused: true,
|
|
defaults: {
|
|
duration: 0.6,
|
|
ease: 'expo.inOut'
|
|
},
|
|
})
|
|
.to(itemArrows, {autoAlpha: 1, xPercent: 0})
|
|
.to(itemImages, {autoAlpha: 1, yPercent: 0, stagger: 0.03}, 0)
|
|
.to(itemTitle, {autoAlpha: 0}, 0);
|
|
|
|
item.addEventListener('mouseenter', () => tlIndexrow.play())
|
|
item.addEventListener('mouseleave', () => tlIndexrow.reverse())
|
|
};
|
|
|
|
let isActive = false;
|
|
const addEventListener = () => {
|
|
const tlToggle = gsap.timeline({paused:true}).to(toggle.circle, {
|
|
xPercent: 140,
|
|
duration: 0.2,
|
|
ease: 'expo.inOut',
|
|
});
|
|
gsap.set(view.index, {
|
|
autoAlpha:0,
|
|
display: 'none'
|
|
});
|
|
|
|
const tlView = gsap.timeline({paused: true}).to(view.grid, {
|
|
duration: 0.6,
|
|
autoAlpha: 0,
|
|
display: 'none',
|
|
ease: 'expo.inOut',
|
|
onComplete: () => {
|
|
tlView.to(view.index, {
|
|
autoAlpha: 1,
|
|
display: 'block'
|
|
});
|
|
},
|
|
});
|
|
toggle.element.addEventListener('click', () => {
|
|
!isActive ? tlToggle.play() : tlToggle.reverse();
|
|
!isActive ? tlView.play() : tlView.reverse();
|
|
|
|
isActive = !isActive;
|
|
});
|
|
view.indexItem.forEach((item) => {
|
|
gsap.set(view.indexMediaImage, {
|
|
autoAlpha: 0,
|
|
yPercent: 100
|
|
});
|
|
gsap.set(view.indexMediaArrow, {
|
|
autoAlpha: 0,
|
|
xPercent: -100
|
|
});
|
|
animateIndexItem(item);
|
|
});
|
|
|
|
};
|
|
addEventListener(); |