Блог

У меня здесь проблема

 const diplayes=document.querySelectorAll('.qq');
 for(const display of diplayes ){
 display.addEventListener('mouseover',()=>{

const tl = gsap.timeline({defaults:{ease:"power1.out"}});
tl.to('.div',{opacity:1, duration:1});
tl.to('span',{y:'0%', duration:1, stagger:0.25 },"-=1");
display.addEventListener('mouseleave',()=>{
    const tl = gsap.timeline({defaults:{ease:"power1.out"}});
    tl.fromTo('.div',{opacity:1},{opacity:0, duration:1});
    tl.to('span',{y:'10000%', duration:1, });
});

});
}
  

у меня есть 3 отдельных подразделения, поэтому я хочу, чтобы событие происходило индивидуально, но при перемещении по любому подразделению событие происходит со всеми подразделениями
, что я могу сделать?

Вы совершаете одну из наиболее распространенных ошибок GSAP: используете общую цель вместо конкретной. Как описано в связанной статье, вместо этого вам следует выполнить цикл по всем вашим экземплярам, создать анимацию для каждого и прикрепить прослушиватели событий для каждого, который ссылается на эту конкретную анимацию. Я расскажу больше об этом подходе в своей статье об эффективной анимации, которую я также настоятельно рекомендую.

К вашему сведению, вы, скорее всего, получите более быстрый ответ на форумах GSAP.