База

Основа, без якої далі не підемо))

1. Easing Functions.

Задають криву швидкості змін параметру з часом. За замовчуванням, всі дії в анімаційних сценаріях Webflow мають лінійну функцію. Але в 80% випадків лінійна функція - погане рішення.

Ось подивіться як незвичайний easing прикрашає сценарій

https://webflow.com/made-in-webflow/website/clieck-to-expand

Для впевненості зайдіть на проект та скиньте всі значення easing до базових

Тому, перше, що б ми радили зробити при опануванні бази для створення смачних анімацій - приділяти увагу easing functions. Доступ до них є безпосередньо із інтерфейсу створення анімацій Webflow Designer. Додаткові ресурси:

https://easings.net/

https://easing.webflow.io/

2. 3D-трансформації.

Якщо у вас є потреба створення сценарію із досягненням ефекту 3d під час руху та обертання елементів - то спочатку обов'язково створіть умови для відображення перспективи. У Webflow Designer це властивість Children Perspective, яка знаходиться всередині 2D&3D transforms (якщо натиснути на "...").

Як приклад - проект нижче

https://webflow.com/made-in-webflow/website/WebDev-For-You-Daily-Interaction-93

Спробуйте скинути Children Perspective у елемента з класом "d-93-3d-wrapper" і подивіться різницю.

Детально про 3D transforms у Webflow

https://university.webflow.com/lesson/enable-3d-elements

3. Тривалість анімаційного сценарію загалом або кожного окремого кроку в сценарії.

Поширена проблема новачків полягає в тому, що їм дуже подобаються створені власноруч анімації. Вони захоплюються своєю роботою і бажають подовжити задоволення від перегляду сценарію. Та, на жаль, для користувача:

• це, скоріш за все, просто анімація, подібну якій він вже колись бачив.
• він не знає, де саме і як саме повинен працювати сценарій. Тому, якщо ви робите з анімації короткометражку - є 90% вірогідність, що користувач просто її пропустить. Або не додивиться, бо в нього закінчиться попкорн. Тому для новачків найкраща порада - "скорочуйте зайві дії і зайві мілісекунди в анімації. Поєднуйте паралельно кілька анімаційних дій".

Як приклад:

https://webflow.com/made-in-webflow/website/webdev-for-you-interaction-158

Зайдіть у Designer та зробіть більшу тривалість появи меню. А також - розставте, щоб всі дії виконувались послідовно одна за одною. І ви побачите, як анімація стає "лайном"