Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

experimental: Proof of concept of the Animation component using ScrollTimeline #4797

Merged
merged 6 commits into from
Feb 1, 2025
Merged

experimental: Proof of concept of the Animation component using ScrollTimeline #4797

merged 6 commits into from
Feb 1, 2025

Conversation

istarkov
Copy link
Member

@istarkov istarkov commented Jan 27, 2025 •
edited
Loading

Description

ref #2645

Proof of Concept for the Animation Component Using ScrollTimeline

For FF and Safari scroll-timeline-polyfill is used.

SSR Support https://animate.development.webstudio.is/playground
Storybook Part 1.
https://6382151c8b47d4399fb9fc69-limlyrmprp.chromatic.com/?path=/story/sdk-components-animation-scroll-animations--in-out

Next steps:

  • Add stories with additional examples i.e. closest usage, images etc. https://scroll-driven-animations.style/
  • Add support to view animations
  • Add view animations examples
  • Add enter/leave actions and animations support
  • Builder UI
  • Add lottie, rive etc compatibility (should work through context.getAnimations()[0].effect.getComputedTiming().progress)

Steps for reproduction

  1. click button
  2. expect xyz

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@istarkov istarkov changed the title feature: Animate feat: Animation Jan 27, 2025
@istarkov istarkov changed the title feat: Animation feat: Animation playground Jan 27, 2025
@kof kof changed the title feat: Animation playground experimental: Animation playground Jan 27, 2025
@istarkov istarkov requested review from TrySound and kof January 29, 2025 14:36
@istarkov istarkov marked this pull request as ready for review January 29, 2025 14:37
@istarkov istarkov changed the title experimental: Animation playground experimental: Proof of concept of the Animation component using ScrollTimeline Jan 29, 2025
@istarkov istarkov mentioned this pull request Jan 29, 2025
Open
7 tasks
@istarkov
Add polyfill loader
369119b 
Add test

Initial styles

Ranges support

Comments

Done

Fix type errors

Add comments

Fix

Do not load polyfill in chrome

Support range units not defined in polyfill

patch polyfill

Add progress and closest examples

Fix

Add elephants

Add submodules

Add branch

Test

Test

dd

Test private checkout

Try SSH

Test animate branch in submodule

Test local action

Check

Use submodules sh

Fix name

Fix

Check it fails

Test env

Check again

Test workflow call from env

fix

Test

Fix

Test

Pass secret

hack

Pass env as input too

Add comments etc

Check submodules

Test

Check

Improve

Move from the main repo
kof
kof reviewed Jan 31, 2025
View reviewed changes
.storybook/main.ts Outdated Show resolved Hide resolved
@istarkov istarkov merged commit 68a28b4 into main Feb 1, 2025
17 checks passed
@istarkov istarkov deleted the animate branch February 1, 2025 11:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kof kof kof left review comments

@TrySound TrySound TrySound approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@istarkov @kof @TrySound