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.

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

Make path animatable #1

Open
AndreaBarghigiani opened this issue Jun 21, 2021 · 1 comment
Open

Make path animatable #1

AndreaBarghigiani opened this issue Jun 21, 2021 · 1 comment

Comments

@AndreaBarghigiani
Copy link
Contributor

We want to animate the path after the page is load.

Base idea

Set all the values of the array (including the arcRad) and transition them from 0 to the original value. The only issue I can think of for now is that arcRad needs to grow exponentially based on the space left, that's because if we have a radius bigger than the space browser does the best it can think of to still drawing the arc.

@AndreaBarghigiani
Copy link
Contributor Author

Tested an approach with anime.js and its morph functions and while it gets animated it surely isn't the result we're aiming for. You can check it out in feat/testing-animation branch to have a look.

As per commit comment, I believe the issue relies on the use of H, h and v because their are lines and morphing works best with simple points.

One solution could be to convert all the lines to use the L command but I believe we can reach something similar with just CSS transform.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant