hoc2021: Optional SVG animation for overview page #42963
Conversation
The overview page at https://code.org/hourofcode/overview features an image with the coloured arrows, but if the `hoc_cse_enable_svg` DCDO flag is set to `true` it's replaced by an SVG which is animated by JavaScript. It's disabled by default, at least for now. The SVG shows the Hour of Code logo immediately, so if the JavaScript doesn't start for some reason, there will still be an image there.
breville
requested review from
molly-moen,
Erin007,
KylieModen,
maddiedierker,
markabarrett and
a team
- Safari didn't like `stroke-dashoffset` going negative, so the calculations were adjusted, but still deliver the same animation direction as before to appear as forward motion along each segment. - Firefox didn't like a comma between the M and L commands, but a space works. - Tweaked the arrow head animation so that the two strokes animate to converge on the point.
| $(document).ready(function() { | ||
| var barDefinitions = []; | ||
|
|
||
| barDefinitions[0] = [ |
There was a problem hiding this comment.
i'm trying to understand the relationship between barDefinitions and numPanels -- if we were to increment numPanels, we'd need to create barDefinitions[1]. could we get rid of numPanels and instead replace it with barDefinitions.length? or is there a reason to keep numPanels?
There was a problem hiding this comment.
Oh, this was when I was looking at driving two separate SVGs simultaneously to make this work on the other pages. But you're right that we can just depend on the length of barDefinitions.length.
| { | ||
| type: "arc", | ||
| start: [17, 6], | ||
| end: [18, 5], | ||
| color: "rgba(144, 140, 203, 0.8)", | ||
| direction: "right-up" | ||
| }, |
There was a problem hiding this comment.
out of curiosity, where did the values in this object come from? did you have to manually map the SVG to this object?
There was a problem hiding this comment.
Yeah, I typed this all out by hand by eyeballing the original graphics. A cooler feature would have been to just state relative direction changes, and even cooler would be to auto-generate paths, but given the rapid approach to this, this is as far as I got.
| function updateBar(barDefinition, bar, barIndex, step) { | ||
| for (var segment = 0; segment < barDefinition.length; segment++) { | ||
| var offset; | ||
| var phase = 12 - ((step + barIndex + 0.1 * segment) % 12); |
There was a problem hiding this comment.
what does 12 mean here?
There was a problem hiding this comment.
Ah, just reversing the direction of the numbers. Once I couldn't rely on negative stroke-dashoffset I was looking for a simple way to reverse the flow of the animation without touching most of the logic, and inverting this from 0->~12 to ~12->0 was an easy fix. Obviously it's all a bit of a hack, but it does work in this limited, temporary scope. 😬
|
@madelynkasula Thanks very much for the detailed review. If this code were any longer-lived or more widely-used I'd give it a complete rewrite, but fingers crossed it works for this fun graphic for now. :) |
breville
changed the title
The overview page at https://code.org/hourofcode/overview features an image with the coloured arrows, added in #42902. But now if the
hoc_cse_enable_svgDCDO flag is set totrueit's replaced by an SVG which is animated by JavaScript.It's disabled by default, at least for now.
The SVG shows the Hour of Code logo immediately, so if the JavaScript doesn't start for some reason, there will still be an image there.
Tested and looks to work correctly in all the regular browsers: Chrome, Safari, Firefox, Edge, and IE11.
Also note that this is deliberately written in vanilla JavaScript rather than going through our build pipeline. This was done initially in case we used this on one of our homepages, where we want to minimise load time. The code feels fairly throwaway, since its use will end once we switch to another theme.
default
SVG animation
cse-css-arrows-9.mov