Selector CSS in hype

Good morning everyone.

I have thought many times for this software because I have tried many graphics software and video games before.

I realize that webflow is great but this software is very powerful for animation.

I explain now:
I need to create a tool that creates a feature from a css that already has an inspector parameter.

and save an assigned name. for later you can animation directly css no. in timeline... I think it's more creative and more freedom... What do you think?

you'd like to run a Hypetimeline via a css-class-toggle on an element¿

1 Like

If it is much faster than writing in css, much easier to modify and save directly and then assigned to any elements.

Imagine that if you want to change color in titles in several pages. just once change all.

atm this is not the way Hype works.

anyway its somehow possible. you'd need a mutationobserver to follow attribute-changes on elements of your choice and then script the changes you'd like to apply ...

@MaxZieb recently did some efffort on reactive content. you may use this premade solution. it's focussed on data-attributes rather than css-class, but for a Hypeworkflow this'd be almost the same.

Thanks for the shout out @h_classen. Hype reactive content is currently focused on visibility and content. Having bind and effect might come next.

Meanwhile, you can also use custom behavior for something somewhat similar and it is built in. Just assign a listener to a symbol or scene and when you trigger it it will fire… like an animation etc. it’s a little different than what you asked for.

To do the class idea you can use Hype Data Decorator to observe changes of the class attribute or go one level deeper and use MutationObserver (that is what it is all based on) yourself.

You may also want to look at css variables/custom properties.
Where you can assign a var name yo any element css properties and only have to modify in one place