Почему gsap не меняет изображение?

Question

[Jussss92]

Привет.
Я использую vue3-carousel и мне надо сделать изображения по эффекту fade. Чтобы просто оно менялось без анимации.
Так как в данной библиотеке этого свойства нет я использую библиотеку gsap.
У меня есть блок

<div id="communication-img" >
        <img loading="lazy" src="/img/chat.png"/>
      </div>

Для смены изображения я делаю так.

const img = document.querySelector("#communication-img");     
 gsap
    .timeline({
       scrollTrigger: {
         trigger: img,
         pin: img,
       }
     })
     .to(img, {
       attr:{src:"/assets/img/communication/chat1.png"}
     })

Потом я планировал передать это в scrolltriger, чтобы анимация началась когда доходишь до блока. Так вот не пойму, что я делаю не так.

Answer 1

[Lapita12]

const img = document.querySelector("#communication-img");

gsap
  .timeline({
    scrollTrigger: {
      trigger: img,
      pin: img,
    },
  })
  .to(img, {
    set: {
      src: "/assets/img/communication/chat1.png",
    },
  });

Comments

[Jussss92]

К сожалению также не работает. Ошибок нет, но и картинку не подменяет

[Lapita12]

Jussss92,Попробуй так

npm install gsap@latest
npm install gsap@latest --save-dev
npm install gsap-blur

import { gsap } from "gsap";
import { blur } from "gsap-blur";

const img = document.querySelector("#communication-img img");     
const newImgSrc = "/assets/img/communication/chat1.png";

gsap.timeline()
 .to(img, {
    attr:{src:newImgSrc},
    duration: 1, 
    ease: "none", 
    modifiers: {
      blur: blur
    },
    blur: 50
 })