[HN Gopher] Anime.js - A lightweight JavaScript animation library
___________________________________________________________________
Anime.js - A lightweight JavaScript animation library
Author : doodlesdev
Score : 526 points
Date : 2023-06-23 02:56 UTC (20 hours ago)
(HTM) web link (animejs.com)
(TXT) w3m dump (animejs.com)
| Torn wrote:
| Looks like a project with 45k stars, where the latest update was
| Oct 2020. Why the HN post without a submission comment? Slick
| site I guess?
| jdiff wrote:
| Slick front page with one of the best documentation pages I've
| come across. A sprawling v4 rewrite is in the works and Julian
| seems to have been picking up steam on it lately.
| pietroppeter wrote:
| indeed https://twitter.com/JulianGarnier/status/1668295672750
| 125058...
| tambourine_man wrote:
| To raise awareness about a cool project? I didn't know and was
| glad to learn about it.
| Lacerda69 wrote:
| Thanks for making this! I used it before and it is very good. Can
| recommend it for everyone who needs slick js animations.
| dylan604 wrote:
| Anime is such a specific use, and this is disappointing for
| anyone with that use in mind. Naming things is hard I guess????
| rubatuga wrote:
| Not sure what the problem is when it enables discussions on the
| origin of the word anime (animation).
| scq wrote:
| It's worth noting that the author is French, and in French
| anime means "animated".
| labster wrote:
| Anime (anime) is literally short for animation (animeshiyon,
| animeishon).
| cthalupa wrote:
| I'm guessing it's because of the author being French, as
| another commenter pointed out, but, it's plenty common for
| loan words to end up having a more specific or outright
| different meaning in a different language
|
| We're talking French and Japanese here so let's look at one
| going the opposite way - the french avec to abetsuku/ abekku.
| In French it just means 'with' - eggs with ham, let's go to
| the beach with friends, whatever. In Japanese it is used to
| mean that you're romantically with someone, and is used as a
| noun to stand in for the word couple.
|
| Or for a more specific usage example, high ball in English
| refers to any mixed drink where the base spirit is a lower
| volume of the drink than the mixer, e.g. gin and tonic,
| screwdriver, etc. In Japan a haiboru / hai barru refers
| almost universally to whiskey and soda water. Of course other
| highball drinks are served there, but will tend to get a more
| specific name, such as a shochu highball being a chiyuhai /
| chuhai.
|
| It's more rare for this to happen with a chain of original
| word -> loan word -> loan word, but still something that
| happens - it's called 'reborrowing' a word. Another example
| of this would be the Chinese having reborrowed matcha to mean
| Japanese-style green tea.
|
| It's not silly or wrong to utilize the word anime in the west
| to refer specifically to Japanese-style animation.
| aerio wrote:
| Japanese animation and comics are also particularly popular
| in France. 55% of all comics in France were manga in 2021,
| and it's the second biggest anime market outside of Japan.
| Biggest in Europe.
| Hamuko wrote:
| No, anime is literally short for animeshiyon. "Anime" is a
| loanword derived from anime with a different meaning than
| anime because it doesn't make sense to borrow a word for
| "animation" since there already exists one.
| dylan604 wrote:
| literal meaning and widely accepted use meaning do not always
| align.
|
| if I said Anime, would you think Tiny Toons, Family Guy, Toy
| Story, or Lion King? Or would you think DBZ, Akira, One
| Piece, etc?
| fenomas wrote:
| To be fair the library name may be based on Japanese usage,
| where the term just means anything animated (including all
| the works you mentioned).
| 411111111111111 wrote:
| It's like the discussions about manga/manhua/manwha we
| keep return to, when they're all literally the same word
| with the same pronunciation and same meaning.
|
| It's really interesting how much lore we've created in
| our forums that doesn't actually exist in the country of
| origin.
| MiguelX413 wrote:
| Loanwords from all languages experience semantic shift
| very often.
| bmacho wrote:
| I believe 'literal meaning' and 'widely accepted use
| meaning' do always align, by definition of 'meaning'.
|
| 'Anime' in English means cartoon that is at least partially
| originates from Japan. Or, a less common usage is cartoon
| that has the style of the former cartoons (e.g. Avatar).
| 'Anime' in Japanese or in French can mean different things.
| JulianGarnier wrote:
| It's also a reference to the verb "animated" in french:
| "anime".
| JulianGarnier wrote:
| Also, I love that every time I make it to the front page of
| HN, this comes up.
| parentheses wrote:
| That demo animation is so mesmerizing. Great work!
| asaddhamani wrote:
| I know right, the landing page is amazingly well done!
| emilsedgh wrote:
| Anime.js is pretty fantastic. Lovely API. Well done Julian.
| JulianGarnier wrote:
| Thanks, you're going to love V4.
| toldyouso2022 wrote:
| I loved these libraries when I used to freelance, clients were so
| happy to see things move and they are so easy to implement
| marban wrote:
| Related: https://www.theatrejs.com https://rive.app
| https://greensock.com https://motion.dev
| hutzlibu wrote:
| Has anyone done any benchmarks comparing the different
| solutions?
|
| I hit a performance bug with greensock once and just quickly
| wrote my own simple animation framework, which I am using ever
| since, but I suppose it can be done better. I would think the
| native browser animation capability is superior?
| Timon3 wrote:
| Does one of these tools support an animation timeline with
| arbitrary seeking? Essentially I want to be able to have a
| progress slider representing the current time, and if the user
| clicks on any time on the slider, all animations should spring
| to that state, like a YouTube video. I played around with GSAP,
| anime and some others, but none properly supported playing the
| animations "backwards" (while jumping back).
|
| I wrote my own implementation of a declarative animation engine
| (i.e. the same timeline position always looks the same), but
| I'm pretty sure there are still a couple of bugs allowing you
| to go out of sync.
| Epskampie wrote:
| I'd think GSAP timeline is exactly made for that, but you say
| you've already tried that?
|
| https://greensock.com/docs/v3/GSAP/Timeline
|
| https://greensock.com/docs/v3/GSAP/Timeline/seek()
|
| https://greensock.com/docs/v3/GSAP/Timeline/reverse()
| Timon3 wrote:
| I thought I did. Maybe I need to have another look, because
| the examples do seem to be exactly what I wanted. Thank you
| for the suggestion!
| nickcoury wrote:
| The native Web Animations API supports this with setting
| currentTime relative to the total duration.
| FireInsight wrote:
| I used motion.dev on a couple of test projects when I heard of
| it. And it's nice, the docs can be a bit lacking, though, and
| the userbase is tiny enough to have little to no discussion
| online.
| swyx wrote:
| any good comparison table between them?
| cloked wrote:
| Rive is great and simple, its kinda a better version of
| Lottie. here is some resources to learn more:
|
| https://rive.app/use-cases https://rive.app/blog/rive-as-a-
| lottie-alternative
| scns wrote:
| State Machine Driven Design, immediately intruiged.
| scns wrote:
| State Machine Driven Design, very intruiging.
| rtcode_io wrote:
| GreenSuck is not free.
| troupo wrote:
| Imagine that: people wanting money for a complex project
| providing value.
| mock-possum wrote:
| Why the sour puss? Greensock animations used to be
| everybody's goto back in the days of AS3 and jQuery.
| gkoberger wrote:
| A good portion of it is, and the rest is absolutely worth the
| money.
| danmaz74 wrote:
| I was looking for an animation library some time ago, and
| theatrejs looks incredible. Anybody has any experience with it?
| In the end I used blender for what I needed, but I got very
| curious about it.
| rapiz wrote:
| For simple use cases, I found animate.css[1] very handy.
|
| [1] https://animate.style/
| gabrielizaias wrote:
| A blast from the past! I've used animate.css around 2014-15,
| nice to see it still kicking.
| leeoniya wrote:
| probably better:
|
| https://github.com/nextapps-de/fat
|
| https://github.com/jeremyckahn/shifty
| naveensky wrote:
| amazing landing page, the animations are really slick !!
| satvikpendem wrote:
| Anime is nice, however you should likely use Framer Motion these
| days if using React or Motion One if not (both are by the same
| creator but for different use cases).
| graftak wrote:
| Framer motion is quite bad with drag events in responsive
| layouts that have drag boundaries. It requires workarounds that
| are quite finicky. In my experience it has some performance
| issues too in edge cases where Gsap just chugs along.
|
| motion.one can only be used to animate node elements, not
| arbitrary data, so you'll likely hit a wall eventually and then
| you'll need to include another animation library on top.
|
| They're both great libraries but they're certainly not the one
| stop shop that Gsap (with expensive plugins) has proven to be
| (coming from someone that hates their docs and api's).
| satvikpendem wrote:
| Well, GSAP is quite a large library, along with its plugins.
| It is likely that most users who need basic animations do not
| need the heft that GSAP provides.
| FireInsight wrote:
| Motion One can actually output arbitrary values
| https://motion.dev/dom/animate
| ChrisArchitect wrote:
| (2017)
|
| anything new here lately?
| noduerme wrote:
| The round: parameter demo appears broken.
| alin23 wrote:
| One less known use case for this is creating animated UI demos,
| which as a dev I find harder to do using video editing software.
|
| I used it to create the simple demo on the rcmd frontpage:
| https://lowtechguys.com/rcmd
|
| This is the code, where I'm just animating elements of an SVG I
| previously created with Sketch:
| https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
|
| I'm also doing the same thing for the Lunar frontpage:
| https://lunar.fyi/
|
| But because Lunar's demo is a lot more resource intensive, I pre-
| rendered it into a video, and heavily optimized it for each
| screen size, in H.265, WEBM and H.264.
|
| One of the biggest hurdles in Lunar's case was how to make the
| video have transparent regions. With Anime.js you are able to
| animate individual elements, placed around static text and
| buttons, which you can't do with videos.
|
| Alpha support in videos is not so good, so I had to create a
| full-page video (in both portrait and landscape) with the right
| background color, and placed it as a background layer with a low
| z-index.
|
| Finding the right video compression parameters to avoid
| background grain was not easy.
| aloer wrote:
| Does rcmd expose an api to e.g. call it via shell action in
| BTT? I would like to keep using BTT for higher level config.
|
| In BTT I have currently set right cmd as a second hyper key
| (first one being caps). I could see rcmd being useful if I can
| define on a per key basis if it should run or not.
|
| PS: Great blog you have
| alin23 wrote:
| Hey thanks!
|
| No, rcmd does not expose any API, but you can disable/enable
| only specific letters from the Settings:
| https://shots.panaitiu.com/zz8Y2kxL
|
| You can also change the trigger key from _[?] Right Command_
| to any combination of direction-aware modifiers.
|
| Also, if you don't make use of rcmd's dynamically assigned
| apps and you prefer to assign a letter to a specific app, you
| can use BTT only for this, no need for going through rcmd.
|
| BTT has a focus-or-open action and it's what I used before
| building rcmd. It can't hide or cycle apps with the same
| letter like rcmd does but it's good enough for some people.
| SebastianKra wrote:
| After a bit of reluctance to give up my right CMD-key, I
| decided to try rcmd and it has since disappeared into my
| workflow like no other app since window snapping.
|
| Unlike similar solutions, unused keys are assigned dynamically
| based on the first letter of the app. So I can have my main
| apps on 1,2,3... and the rest will change based on which apps
| are open.
| RyanHamilton wrote:
| rcmd looks cool. Good work. I use Windows + Number to go to the
| same apps, your idea of letters is a definitive improvement.
| alin23 wrote:
| Thanks! That's where I got rcmd's inspiration from, I was
| previously a Windows power user and sorely missed the
| WinKey+number hotkey.
| criley2 wrote:
| As a windows power user using OSX for work, does your tool
| allow you to cycle through open windows by repeating the
| button?
|
| While I do love cmd+` for window switching in OSX, I still
| prefer Win+#### (repeated taps of the same number like
| Win+1,1,1) to cycle through my chrome windows in a known
| order. (So Win+1,1 always opens my second chrome window).
|
| Also for anyone else in this situation, is there a way to
| click on an app in the OSX dock and have it not surface
| every single window all at once? 2 years of OSX and I still
| struggle when all 6 chrome windows are surfaced and drown
| out my perfectly arranged other work.
| alin23 wrote:
| By default it doesn't do that, because window focusing
| needs special privileges that App Store apps don't have.
|
| There is an addon thing that you can install by clicking
| on the Switcher button and scrolling all the way to the
| bottom to find the _Install experimental window
| switching_ button.
|
| After that is installed, a new "Cycle Windows" button
| will appear: https://shots.panaitiu.com/klbRwgTG
|
| The addon will also assign the _Right Option_ key for
| focusing specific windows of the focused app, by letter:
| https://shots.panaitiu.com/j9cgRP9C
| jtha wrote:
| I've been using a simple home-made Autohotkey script for
| years (decade?) to do it more like rmcd is doing.
|
| Here's an example for opening Chrome or switching to it if
| it's open. If there is more than one Chrome window open it
| cycles between them by minimizing the current one, then
| opening the next one etc.
|
| SetTitleMatchMode, 2
|
| #c::
|
| IfWinExist, Google Chrome IfWinActive
| WinMinimize else Winactivate
| else run,"C:\Program Files
| (x86)\Google\Chrome\Application\chrome.exe"
|
| return
| [deleted]
| JulianGarnier wrote:
| Hi, I'm the creator of Anime.js. Firstly, thank you for the
| submission. I honestly didn't anticipate being featured on the
| homepage of HN without any major update to the library! To those
| wondering why the project hasn't been updated recently, it's
| simply because I've been working on a new version (V4) for the
| last two years. The core library has been completely rewritten,
| I'm currently in the testing and documentation phase and should
| be ready for release by this summer.
|
| Some of the new features of V4 include:
|
| * Improved performance: The library has been entirely rewritten
| with performance optimization and low memory usage in mind.
|
| * New ESM Module first API: Import only what you need and benefit
| from improved tree shaking.
|
| * Better timelines: New options for animation positioning,
| allowing looping animations in timelines and improved parameters
| inheritance.
|
| * Additive animations: A new tween composition mode that lets you
| smoothly blend concurrently running animations.
|
| * Variable framerate: Specify different framerates for each
| animation or set it globally.
|
| * New callbacks: onTick, onLoop, onRender, etc.
|
| * Value modifiers: A function to modify or alter the behavior of
| the numerical values of the animated property value before
| rendering.
|
| * Animate from: Animation from a given value to the current
| target value.
|
| * Improved documentation: A new design with enhanced animations
| demos and more in-depth explanations.
|
| * Unit tests
|
| And much more! I can't wait to share it with you!
| mkoryak wrote:
| Why do your docs use `var` for variable declarations?
| JulianGarnier wrote:
| Because the docs have been written 4 years ago, and back then
| const and let weren't widely used.
|
| The upcoming documentation for V4 has been completely
| rewritten with up to date JavaScript.
| jeanlucas wrote:
| Nice, Julian!
|
| Is there any way to alpha/beta test for v4?
| JulianGarnier wrote:
| I've been considering offering early access exclusively to
| GitHub sponsors once the documentation and migration guide
| are completed.
|
| Would this be something that interests you?
| jeanlucas wrote:
| Yes!
| JulianGarnier wrote:
| <3
| nextaccountic wrote:
| So another comment says that CSS Tweening makes your lib
| obsolete, which I don't think is true, but,
|
| Can Anime.js make use of CSS Tweening on browsers that support
| it? Maybe as an optimization, rather than using
| requestAnimationFrame, on some kinds of animations
| JulianGarnier wrote:
| Not planned for now, but I haven't really looked into it.
| I'll consider after the V4 is released.
| mmanfrin wrote:
| What a great landing page.
| JulianGarnier wrote:
| Thank you!
| impoppy wrote:
| >anime.js >look inside >no anime
|
| https://i.kym-cdn.com/photos/images/original/002/515/832/ee7...
| geenat wrote:
| Mostly obsolete with CSS tweening.
|
| You can do non-blocking animation timelines without any library
| if you use async javascript. <html> <body>
| <div>Click me to change color every second, then remove.
| <script> // Locality of Behavior me =
| document.currentScript.parentElement;
| me.addEventListener("click", async event => { me =
| event.target me.style.transition = "background 1s"
| await sleep(1000) me.style.background = "red"
| await sleep(1000) me.style.background = "green"
| await sleep(1000) me.style.background = "blue"
| await sleep(1000) me.style.background = "none"
| await sleep(1000) me.remove() })
| const sleep = ms => new Promise(r => setTimeout(r, ms));
| </script> </div> </body> </html>
|
| If you like this, you may also want to check out:
| https://github.com/gnat/surreal
| mouzogu wrote:
| > Mostly obsolete
|
| i'm so f#####g done with web dev.
| geenat wrote:
| haha I mean, it's just built into browsers now. Nothing
| stopping someone from still using anime.js
| have_faith wrote:
| Browsers are missing a long list of features available in
| modern JS animation libraries like Anime.js and especially
| GreenSock. For simple and short transitions/animations CSS
| will take you a long way though.
| JulianGarnier wrote:
| Creating something like the homepage of animejs.com without
| an animation library today is still quite challenging.
| FreshStart wrote:
| No, no the browsers deprecated it yesterday.. You are
| supposed to add a webasm shard, containing the operation
| system for the animations.
| nextaccountic wrote:
| I'm not entirely sure whether you're joking
| vdfs wrote:
| He is joking because webassembly had been deprecated
| today in favor of Punch cards
| henriquez wrote:
| Sorry, but browsers (and thus webassembly) have been
| deprecated in favor of Bing Chat. There's a W3C draft
| standard being written up by Sam Altman.
| geenat wrote:
| Wanted to note, htmx's companion project at
| https://hyperscript.org/ does this naturally out of the box as
| well due to its async transparency.
| pjc50 wrote:
| This looks interesting, and I _love_ how it takes influence
| from Hypercard. Even though I'm slightly too young to have
| really used that system.
| troupo wrote:
| The example is next to useless since it's so primitive.
| Anything more complex, and you end up developing your own
| library. Which you did, and linked.
|
| So how is anime.js obsolete?
| geenat wrote:
| The fundamental building block of the vanilla js snippet and
| anime.js is the ability to create non-blocking timelines +
| tweens- which we get for free now.
|
| the optional "lib" is just aliases to make vanilla js less
| verbose.
| SirHound wrote:
| If thread blocking is a problem then your example would
| stutter at every await. VS using
| https://motion.dev/api/timeline or Framer Motion both of
| which can sequence complex WAAPI animations.
| geenat wrote:
| It won't stutter because the actual animation is done by
| the browser CSS engine.
|
| await is only used to build the non-blocking timeline:
| Think keyframes, not frames.
| SirHound wrote:
| It will stutter because if your browser is under heavy
| load then your async function will run when the browser
| is free to do so - not at the 1s mark as specified by
| your transition.
|
| If you instead build the keyframes up front and give them
| to WAAPI/CSS then you won't encounter stutters.
|
| This is easily provable by adding some blocking JS into
| your code. Block the main thread for ten seconds after
| your first transition and see when that next await
| triggers. Your animation will run smoothly for 1 second
| and then the next chunk of your timeline won't run for
| another 9.
| troupo wrote:
| Regardless of the "fundamental building block" when you
| need _actual complex animations_ , you will end up building
| your own lib anyway.
|
| Because `await setStyle` ain't it.
| o1y32 wrote:
| Bad practice, requestAnimationFrame is preferred for such
| purposes:
|
| https://developer.mozilla.org/en-US/docs/Web/API/window/requ...
|
| https://stackoverflow.com/questions/38709923/why-is-requesta...
|
| ...and based on that I'm afraid you shouldn't be giving out
| advice on doing animations
| IggleSniggle wrote:
| There's a difference between creating your own draw-loop with
| setTimeout and requesting a CSS animation.
|
| Whether you use requestAnimationFrame which calls your code
| at every draw step or whether you set a CSS animation
| directive, you are delegating the animation work to the
| browser. In either case, the resultant behavior is dependent
| on browser-code, not your own js. This is very different than
| setting up your own manual draw loop with setTimeout.
| pyentropy wrote:
| He's not using the timer to do per-frame calculations - the
| GPU does the interpolation using the `transition` property.
| He's just using the timer for setting the target state.
| imbnwa wrote:
| Isn't the WebAnimations API available in modern browsers?
| DigitalSea wrote:
| Yes. But, that doesn't mean implementing these things is any
| easier. Maybe if you're sliding an element in and out, the
| WebAnimations API would suffice. If you're wanting to do
| advanced animation, you will end up creating your own
| library. With anime.js, you have better control over your
| animations. You can pause, play, reverse, and seek
| animations, as well as control their speed. It provides a
| powerful timeline feature which allows you to chain
| animations and control their sequence, something that is not
| available in the Web Animations API. You can also do things
| like line drawing and morphing, as well as animate CSS
| properties, SVG, DOM attributes and JavaScript Objects.
|
| You can do most things natively, if you have the time and
| luxury of reinventing the wheel.
| SirHound wrote:
| Fwiw Motion One and Framer Motion both have complex
| sequencing of WAAPI animations so you have the control but
| also the off-thread performance
| geenat wrote:
| Sure but in many situations a vanilla async function gives
| you the same result without the extra layer.
| the8472 wrote:
| The animation API is likely more efficient/smoother if it
| lets the browser offload the animation to separate threads
| without blocking the event loop or having to rerun layout.
| Any script-triggered CSS change is "unexpected" from a
| layout engine perspective. Registering your animation in
| advance makes it an expected change.
| o1y32 wrote:
| There is no "extra layer" -- it is a browser API supported
| by every browser by bow, which means that it should be
| treated the same say as settimeout
| hombre_fatal wrote:
| Libs like Anime.js are declarative and programmatic. They might
| be implemented with something that looks like your snippet, but
| that doesn't mean your snippet supersedes a declarative,
| programmatic API. Just like el.innerHTML = '<h1>hi</h1>'
| doesn't supersede React.js.
| Bellend wrote:
| Are you really comparing this to Anime.js? I don't know if it's
| satire.
| valenterry wrote:
| I deduct points for 1.) not showing a noscript message when JS is
| disabled and 2.) using the name "anime" which is commonly used
| for, well, Japanese anime.
| jabradoodle wrote:
| Awesome looking website, though the documentation hijacking my
| back button was awful.
| FireInsight wrote:
| It's actually just a different hash selector for each item in
| the documentation, which your browser then navigates between by
| default.
| robofanatic wrote:
| Awesome
| sktrdie wrote:
| Now that css is getting a linear() function we can get all kinds
| of spring/bounce/elastic animations that we couldn't before
| (hence why we resorted to JS).
| https://twitter.com/JoshWComeau/status/1660684634340962305
|
| Once this lands stable in all browser we can say goodbye to JS
| library animations (rightly so since they block the main thread).
| FireInsight wrote:
| Web Animations API isn't blocking IIRC. https://motion.dev/
| uses it.
| sktrdie wrote:
| Right but for spring animations you still have to run the
| calculations on the main thread. [1]
|
| 1. https://webcache.googleusercontent.com/search?q=cache:Pa8-
| Oa...
| SirHound wrote:
| Yeah but these can be precalculated in the perceptual
| window as per Framer Motion and Motion One, and then handed
| off to WAAPI.
|
| Which is still needed for actual spring physicals vs the
| facsimile of linear() (which might often be enough!)
| brigadier132 wrote:
| Very cool, are there any comparisons with other animation
| libraries like gsap (which is proprietary)?
| KRAKRISMOTT wrote:
| Framer Motion is a good modern alternative
|
| https://github.com/framer/motion
| brigadier132 wrote:
| Im not really interested in react only solutions
| dan1234 wrote:
| Motion One is the non-react version of Framer Motion.
|
| https://motion.dev/
| sieabahlpark wrote:
| [dead]
| _HMCB_ wrote:
| Amen.
| shaneofalltrad wrote:
| Anyone recommend a good animation library to create 3D builds for
| watches as an example as I need it to be very detailed? I am
| about to start investigating and this is looking really
| interesting for the purpose.
| h4ch1 wrote:
| https://dev-sandbox.pixotronics.com/webgi/0.7.43/demos/core~...
| something like this?
|
| Disclaimer: I work on this :)
| mejutoco wrote:
| babylonjs - https://www.babylonjs.com/
| beezlewax wrote:
| Threejs
| ToJans wrote:
| Check out threekit's Rolex configurator:
| https://www.threekit.com/3d-product-library/rolex-watch
| TheRealSenex wrote:
| arrived expecting quick hentai generation. departed disappointed.
| bboygravity wrote:
| Cool. We're finally back at the creativity level of Macromedia
| Flash websites a few decades ago.
| wongarsu wrote:
| Now we just need someone to write an a visual IDE that makes
| this as approachable to non-programmers as Macromedia Flash
| was.
| mattgperry wrote:
| I mean the library is like a decade old so "finally back" is a
| stretch
| suction wrote:
| [dead]
___________________________________________________________________
(page generated 2023-06-23 23:01 UTC)