Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Class Name Consistency Would Be Helpful for Easier Toggle Animations

At a glance

The community member is working with a class/token system and has disabled it for testing purposes. They would like to use class-based toggle animations, but have noticed that the class names are not the same, leading to confusion when applying JavaScript to enable/disable classes. The community members discuss the use of tokens, CSS variables, and potential future features like "custom states" that could map to classes with the same name. However, there is no explicitly marked answer in the comments.

Useful resources
wwaltermelo2017
Hello guys, I was working around with the class/token system. and, I disabled it just for testing. I would like to do some class based toggle animations. but I noticed that the name. is not the same. which leads to a lot of confusion when applying just enough javascript to enable/disable a class.

wouldn't be better if you don't want to use the token based classes that it at least have the original "class" name?
w
J
B
7 comments
wwaltermelo2017
this was the example:
Attachment
C71116F8-F5B9-4A33-AC57-78C64538B3A3.png
JJohn Siciliano
Those are Tokens. To apply classes for usse in code head over to settings and set the class there
JJohn Siciliano
https://www.youtube.com/watch?v=_1QSWHOtk08
wwaltermelo2017
ok that's fine. but, that way I can not use the webstudio editor to make what I want inside a class. unless i type css by hand that defeats the purpose of using a no-code tool :/ I'm used to just enable/disable a class in webflow. customize the way I want with the editor itself.
BBogdan
You cannot manipulate tokens in runtime but you can set values to css variables. In there future we will add more control with custom states and conditions though tokens should stay static.
wwaltermelo2017
maybe something like "custom states" that maps to class with the same name?
Attachment
110D65E9-A744-413E-AA63-746BA91C2A1C.png
BBogdan
More like an attribute or even "style queries" based on css variables.
Add a reply
Sign up and join the conversation on Discord