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

Allow SVG attributes to animate to CSS variables #1366

Merged
merged 2 commits into from Nov 23, 2021
Merged

Conversation

mattgperry
Copy link
Collaborator

Fixes #1334

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a68a72f:

Sandbox Source
Framer Motion: Simple animation Configuration
App Store UI using React and Framer Motion Configuration
Framer Motion: Reorder animation Configuration
Framer Motion: growing item positionTransition issue Configuration
Framer Motion: Image lightbox Configuration
epic-sunset-1h73w Issue #1334

@@ -15,7 +15,8 @@ function isCSSVariable(value: any): value is string {
*
* @param current
*/
export const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/
export const cssVariableRegex =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also cover some unit tests for the regex?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function that uses it, parseCSSVariable, is already covered by unit tests.

@mattgperry mattgperry added the automerge Land this PR label Nov 23, 2021
@mergetron mergetron bot merged commit 0542616 into main Nov 23, 2021
@mergetron mergetron bot deleted the fix/svg-css-vars branch November 23, 2021 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge Land this PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SVG properties do not animate when target value is a CSS Custom Property
2 participants