Вот Алексей и дождался работёнки)

У Алексея и так работёнки валом ) Надеюсь там большая часть от сапёра подойдёт )

Посмотрел доку — надежды твои не оправдаются :)

Но надо в любом случае подождать хотя бы пару месяцев, потому что там половина доки сырая, будет очень много изменений.

Перетёрли мы тут с Марком и вот такое получилось:


<script>
 import { gsap } from "gsap";

 let visible = false;

 function animate(node, isChanged) {
   const timeline = gsap.timeline();

   timeline.to(node, {
     duration: 4,
     opacity: 1
   });

   return {
     update(isChanged) {
       if (timeline.reversed()) {
         timeline.play();
       } else {
         timeline.reverse();
       }
     },
     destroy() {
       return new Promise((res, rej) => {
         // анимация сокрытия - резолвим и уничтожаем
         timeline.eventCallback("onComplete", reject);
         // анимация показа - реджектим и запрещаем уничтожать
         timeline.eventCallback("onReverseComplete", resolve);
       });
     }
   };
 }
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
 <div class="hidden" use:animate={visible}>content</div>
{/if}

<div>
 Random text
</div>

<style>
 .hidden {
   opacity: 0;
 }
</style>

повтыкал несколько часов в исходники.  насколько я понимаю, самый органично вписывающийся в уже существующий механизм свелтовской анимации способ - это добавить возможность прервать анимацию из функции tick

Круто было так юзать ?

а это надо заменить вызовом timeline.progress()  из tick

шо то тут не понимайт 🤔

Походу это потечёт промисами

Если тоглить visible то будет создаваться новый промис а старый останется висеть pending

https://svelte.dev/repl/b2176d6cfa874ad6a20c2197d8fb012c?version=3.35.0

Чтобы работала reverse анимация при окончании обычной

Хотя в целом тут больше дублирования :(

двусторонние анимации - встроганная фича свелта, с гринсоком они стыкуются неплохо

это ж та тема которая будет fps раз в секунду запускать progress ?

Могло быть и лучше :(

Особенно если бы можно было после each сразу вызывать анимирование всех нод без вероятности того, что анимация массива нод выполнится раньше, чем этот массив заполнится через bind:this

ну да.  прогресс для этого и предназначен как бы

а как обычный запуск to работает без прогресса ?

он создаёт транзишен или так же как свелт с транзишенами - n степов на animate ?