I would love to see a custom properties. Much like your open event system. This would allow to use your keyframer to add on the edge CSS attributes (yet not supported directly) but this way they would be accessible to early adopters using hype. Your dropdown is limited to the properties you support and choose and I think this is good (as far as official support goes) but limits the capabilities for us adventures and for professional users.
Hope to see this addition in a minor Hype Version bump soon!
Thanks for the request! I agree this would be a great feature to fill in the gaps between releases or if there’s ever properties we decide not to have for various compatibility reasons. Unfortunately, making them animatable is very difficult. First, we’d need to know the type (color, pixel, percent, degree, etc.), though this could be a setting on the property. The harder item is that a lot of CSS values are now “multivalue” properties, so it isn’t like we can just set a specific value to a specific property - we’d need to know exactly where and how to animate or join values. Take the CSS Filter Effects for example. If you wanted to animate the blur, you’d need to fill this in:
-webkit-filter: blur(XXpx);
So you can see it isn’t just setting a value on a given property name; the blur() function encloses the value. Things get even messier when you consider that you’d want to set the non -webkit prefixed version, and sometimes the standard versions have different syntaxes. And it gets even messier if you want to animate blur and another effect like brightness(), which also belongs to the same property!
They really didn’t have programmatic control in mind when they made CSS!
If you do just need to add some CSS that isn’t animated, you can do this via adding a <style> tag in the Head HTML and setting that to a class/id defined on the element via the Identity Inspector.
thank you for the response. We are talking Pro-Feature here, so the jump to a patch based system wouldn’t be to demanding on the pro-user. If somebody goes as far as to “fill a gap” give them a mini-template to play around with.
This way one could do a lot! A bit like your Ressource-Folder solution used in your head HTML. As that works already this might not be that big of a stretch.
Best regards
Max
PS: If you want to go all the way then you could make the VAR-names and ranges independent of the patches (they could live in library) and a custom var would have a dropdown asking for the patch it should be applied to. That way one could have multi-value patches.
@JohnnyMoon I think this is off-topic as it would add another layer of abstraction that is beside the point of custom properties. I see the ease of SASS but a patch based system is a “write once use many times” solution in it’s self. A multilayer abstraction like SASS is good to takle a ever more complex and diverse world but maybe it’s overkill for this “simple” feature request?!
Yes for starters the much needed scale to reuse symbols. Further more I would use a multivalue patch system to control dynamic SVG. They beauty is that this would allow to control things we just might not think of right now.
Actually I would revise my suggestion. Please forget patches in the way described above … they would create another quirky layer of app uniqueness.
** rather allow timeline values to be mapped to a function ** this way one could scale the 0-1 values via math to any range and set CSS or other unique things that need to be “rigged” for animation and control.
Have you guys head of UI motion it is an opens purse sass library designed to animate CSS it look like it would be a perfect solution for everyone’s CSS concerns.
Tick events triggering functions at each frame of an animation and returning an array of animated properties would be a great addition to the API. The animated property values could then be put to use in myriad ways using javascript.
Yes, small animations triggered on scroll / click / load page.
You can also add more than one animation at a time, very easy.
I work on some templates with smart animations and I wrote a small library in CSS, an extension of the Awesome code ( fa )