GSAP - Как связать анимацию с определенным атрибутом данных? - PullRequest
Новая
       11

GSAP - Как связать анимацию с определенным атрибутом данных?

0 голосов
/ 29 мая 2019

Я использую gsap для воспроизведения небольшой анимации.Это одна и та же анимация для разных зависаний.Я пытаюсь связать анимацию так, чтобы она работала только на определенном наведении.Поэтому при наведении указателя мыши на data-filter = "one" анимация запускается только на li id-one "

Большое спасибо всем за помощь - очень признателен 

<ul>
<li>
<a class="filter-hover filter-hover--left" data-filter="one" 
 href="#">
</a>
</li>
<li>
<a class="filter-hover filter-hover--left" data-filter="two" 
href="#">
</a>
</li>
<li>
<a class="filter-hover filter-hover--left" data-filter="three" 
 href="#">
</a>
</li>
<ul>

<ul>
<li id="one" class=" filter__types-container"></li>
<li id="two" class=" filter__types-container"></li>
<li id="three" class=" filter__types-container"></li>
</ul>

function escHover() {

tl = new TimelineLite({
  paused: true
}),

fadeIn = $('.filter-fade-img');
dormant = $('.js-filter-esc-dormant');

TweenLite.set(fadeIn, {
  opacity: 0,
  y: '50px',
  ease: Back.easeOut
})

tl.to(dormant, 0.3, {
  y: '50px',
  opacity: 0
}, 0.1, "+=0.1");

tl.staggerTo(fadeIn, 0.5, {
  y: '0',
  opacity: 1
}, 0.1, "+=0.1");

//// not using this yet
var filterHover = $('.filter-hover')
var dataMap = $(this).attr('data-filter');
$('#' + dataMap).fadeIn();

filterHover.mouseenter(function () {
    tl.play();
});

filterHover.mouseleave(function () {
    tl.reverse();
});
}

1 Ответ

0 голосов
/ 01 июля 2019

Один из способов - использовать такой подход: 

document.querySelectorAll("[data-filter]").forEach(filter => {
  filter.addEventListener("mouseover", function() {
    TweenMax.to("#" + filter.dataset.filter, 1, { autoAlpha: 1 });
  });
  filter.addEventListener("mouseleave", function() {
    TweenMax.to("#" + filter.dataset.filter, 1, { autoAlpha: 0 });
  });
});

https://codepen.io/ZachSaucier/pen/GbxNbq

...