Add support for CSS custom property
See original GitHub issueCurrently, there is no way I can animate CSS custom property with anime.js.
div {
--progress: 100%;
transform: scale(var(--progress));
}
You can use this to set CSS custom property:
el.style.setProperty('--progress', '40%')
Issue Analytics
- State:
- Created 5 years ago
- Reactions:9
- Comments:6 (1 by maintainers)
Top Results From Across the Web
CSS Variables (Custom Properties) | Can I use... Support ...
CSS Variables (Custom Properties). - CR. Permits the declaration and usage of cascading variables in stylesheets. Usage % of. all users, all tracked ......
Read more >Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >A Strategy Guide To CSS Custom Properties
Custom properties have the same rules about where they can be used as normal CSS properties. It's far better to think of them...
Read more >A Complete Guide to Custom Properties | CSS-Tricks
A custom property is most commonly thought of as a variable in CSS. ... Any property that supports multiple comma-separated values might be ......
Read more >Browser Compatibility of CSS Variables (Custom Properties)
CSS Variables (Custom Properties) on Chrome is fully supported on 49-106, partially supported on None of the versions, and not supported on 4-48 ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi,
I was just searching for this very thing and I came across this post, I this this would be an awesome feature.
I am using Anime in my app and it works really well.
Vars can be defined in any element, I am using mine in SVG to set the fill colour, I have frame and I want to animate from one colour to the next. eg:
Interesting idea, will look a the feasibility later.