Maybe I'm missing something, but I can't seem to find a way to change the background fill style for an element to NONE using keyframes. The effect I'm going for is to change a round dot to a ring. The only workaround I've found is to create 2 circular elements one on top of the other with one filled the other not filled. When I want to transition from a dot to a ring, I change the opacity. Someone please tell me there is a better way before I create 28 (x2) elements.
Thanks,
Art.
Unfortunately the fill style itself is not an animatable property; this is a longstanding issue in Hype. If you want to animate the value of the fill the style must remain the same.
So in this case it sounds like you're using a background color? The way to animate this would be to do so with a color that has the alpha set to 0%.
If you are using an image fill style, then the technique you are currently using is best.
Personally, If I was going to the 28+ of these I would use symbols and a bit of JS.
The toggle would still be run from a timeline. But we would init the symbols colours on symbol load.
Doing that in js allows us to just copy the symbol on scene.
We can use data attributes on the symbol to set the colours.
This allows us to have multiple coloured dots from a single symbol.
When we trigger the toggle, in the case of the example below , this is done by clicking the dot elements ( within the symbols) it will first run the js that ids which symbol's dot that was clicked.
The same click will then run the timeline. The timeline will then run any animation and call the code that does the colour change . toggleFill()
Both id setup and toggle colour are in the same function for convenience.
We give the symbol a class name in the onSymbolInit() function so we can distinguish it's calls to the toggleFill() from the timeline.
( In hype, when a function is called from a timeline the scene or symbol will be defined as the calling element )
clickTheSymbolDots.hypetemplate.zip (94.7 KB)
One of the things I notice if we do the transition with the above symbols is we lose the gradual opacity transition effect when doing it exactly as @jonathan suggests gives, by just setting the starting fill colour to 0 opacity and then use the keyframe properties to transition it to another colour.
Doing it Jonathans way is very simple.
I went the root of code, mainly because, well that is what I like to do but also I wanted to give some general options on a single symbol, which for me would be more useful.
This second version I guess is even more of a hack and if anything will show ways you can mess around with css, hype and javascript.
The new version allows for a start and/or end colour transition.
It adds css to the head file, that now gives a similar gradual opacity transition effect to the native hype way.
All colour data attributes are optional.
If no data attribute colour is given for a start, end or border the Default colours are used.
Default colours can be set in the onSymbolInit() function.
The start and border colours will not be overridden by the code if their override values are set to false.
var startColOverride = false
var borderColOverride = false
This allows for some ui control on defaults for the start and border colours.
i.e what you use in the Element Inspector.
If a data attribute is added then the startColOverride and borderColOverride false values have no effect. And the Element Inspector colorproperties will be overriden for these two.
The End colours will always be in effect. Either by the default or by the attributes.
If you do not want to start with a color , either set the attribute to transparent or set the default value for start to "".
The "" is equivalent to none. DO NOT USE transparent for the default use ""
The end default MUST be a colour, transparent is ok to use there.
(Do not to set the start and end the same colours, tansparent, "" or otherwise. This will make no sense and will not work)
again this is more a musing..
dotType_3.hype.zip (15.7 KB)
dotType3.hypesymbol.zip (43.0 KB)
Also as an illistration adapting this..
If I add a Text box to the symbol, and give the text box a class of textBlob
(note the ignore all pointer events)
And set any properties for the text on the timelines, like opacity timings.
I can then also add my then symbol function that will be called on Symbol load.
The function would contain
var blob_text = element.querySelector('.textBlob')
var dotTextblob = element.dataset.textblob
if (typeof dotTextblob != "undefined"){
blob_text.innerText = dotTextblob
}
I could then give each symbol another data attribute and value to set the text for each.
dotType_3_extra.hype.zip (15.9 KB)
The technique of using data attributes on the symbol element as parameters to change inner symbol instance content is really smart!
(I feel like I haven't seen it before, or is my memory going?)
Thanks,
You and me both..
But feel I have done similar before..may be not quite the same way with data attribs. ?
When I write stuff for the forum, I am normally being organic in my approach when writing the code. So I often don't always take in fully what I have done in the context of if its new to me or not.. ( if that makes sense )
Seemed the natural thing to do here, I am always trying to reuse symbols.
Shameless reminder ahead:
Hype Data Fill maps data keys to a selector and fills them recursively (with a live preview in Hype).
Hype Data Fill only fills innerHTML but when mapping could take a parameter for a style property to update or run an arbitrary handler function. Last updated in 2019 to version 1.1, so maybe this is a reason to bump the version to 1.2
And Hype Data Magic works also roughly along these lines but needs an external data source. In this instance data keys are used for the mapping and handlers, and it's a bit more involved.
Those do seem like they could be used in conjunction very effectively - I suppose I was more specifically thinking of using data-attributes on a symbol element to act as parameters for what's inside the symbol 
. Basically symbol overrides (which has been a Hype feature request)
Adding to the rather simple question of the OP. You can just change the background fill to transparent using the color picker? Or did I understand it wrong?
TransparentCircle.hype.zip (154,4 KB)
AARG - that is exactly what I was looking for. Never occurred to me to use the alpha channel in the RGB dialog box to create a transparent color. Thanks MaxZleb - now I can simplify a very nasty scene.
???
It was pointed out before, probably lost in my jumping in with the symbol mix.
