‏Timeline تو Motion: انیمیشن‌های پشت سر هم که وسط اجرا هم عوض می‌شن

مستندات Motion یه قابلیت به اسم timeline رو معرفی می‌کنه. کافیه به جای یه انیمیشن، یه آرایه از انیمیشن‌ها به animate() بدی تا پشت سر هم اجرا بشن:

animate([
  ["ul", { opacity: 1 }, { duration: 0.5 }],
  ["li", { x: [-100, 0] }, { ease: "easeInOut" }]
])

خروجی یه timeline هست که مثل بقیهٔ انیمیشن‌ها می‌شه pause کرد، scrub کرد (یعنی دستی برد روی یه لحظهٔ خاص) یا برعکس پخشش کرد. نکتهٔ جالبش اینه که بعد از شروع هم قابل تغییره: می‌شه حتی وسط پخش، انیمیشن، label، callback یا مکث اضافه کرد، جابه‌جا کرد یا برداشت:

const timeline = animate([["ul", { opacity: 1 }]])

timeline.add(["li", { x: 0 }], "+0.2")

هر عضو آرایه یه segment هست و همون آرگومان‌های animate() رو می‌گیره: هدف، keyframeها و تنظیمات transition. پیش‌فرض اینه که هر segment وقتی قبلی تموم شد شروع بشه، ولی با گزینهٔ at می‌شه زمان شروع رو یه زمان مشخص، یه label یا یه فاصلهٔ نسبی به segment قبلی گذاشت. مثلاً "