JavaScript runs once, CSS handles a 24 hour animation #4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for melodious-otter-07ba46 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Somewhere between an interesting experiment and something I wanted to do. No hard feelings if you do not deem it mergable, I will just continue on my fork. There is probably more clean-up that can be done.
This change gets rid of the 4 second JavaScript interval. Instead it generates 24 hour CSS animations once and lets the browser handle it. In the browser profiler this gets rid of rendering and painting steps.
Currently all the elements are added by JavaScript and the animations generated on the fly. Though for even better performance it could have been added straight to the HTML. The only thing JavaScript will always be needed for is to set the animation start time.
This also simplifies the blue hover styling. No more weird blinking in and out of existence for the final coloured rectangle.
Would love to get your opinion on some of these techniques!