Designer News
Where the design community meets.
↵
Pure CSS animation(codepen.io)
almost 5 years ago from Maxime Viktorovich, Web developer
Mihai Vladan, almost 5 years ago
Yes, the good ol'argument against how large and locked down the flash player was.
Those 20mb would give you access to custom fonts, vector graphics, bitmap graphics, video, audio, camera, microphone, file system integration, native extensions, native desktop integration, and hardware integration with connected devices, that rendered exactly the same on any device running that 20mb.
Was flash player bloated? - YES. Was it poorly optimized? - YUP. Was Adobe shortsighted for not opening it up? - YES.
Was Flash a bad platform? Hell no!
Then, as a developer, you must maintain either thousands of dollars worth of software, or you must pay into a subscription model in order to even begin to think about developing animations.
...wait, isn't that the same business model Apple has? $99 developer subscription - check. $2000+ mac products to run their PROPRIETARY APPLE software? - Check. The same Apple that said Flash was the devil and then replaced it with its own locked-down proprietary alternative (app store/native sdk/xcode/etc)?
Honestly, what's missing here are better tools in order to animate with HTML and CSS
It's been 10 years since Apple boldly told the world that Flash sucks...and you still think "Html animation just needs 1 killer app! And the whole world will see it's greatness!". TEN years! How many alternatives to Photoshop we got in that time? Sketch, Figma, Affinity Photo, GIMP, Pixelmator Pro, Framer X to name a few. Maybe it's time to realize we've thrown out the baby with the bath water, and start from scratch.
Liam Wheaton, almost 5 years ago
There's little to no nuance in your reply. Flash was terrible for many other reasons you've chosen to ignore—at a high level it could all be boiled down to the fact that it directly contradicts a UNIX philosophy. This led to the bloat and security issues everyone rightly hates it for. Also comparing something to another equally terrible thing doesn't invalidate the fact that the first thing is still terrible. Thirdly I feel sorry for you if you think Photoshop, Sketch, Figma, Framer and even GIMP are all "alternatives" for one another lmao
Liam, if you have the time, do tell me those reasons I've chosen to ignore. I've already mentioned security, bloatware and Adobes poor management. What exactly was so important that I forgot to mention?
As a designer, I look at the Flash platform from that perspective :
flash had "liquid" layouts before "liquid" layouts were a thing by having the Stage component implemented in Flash 6 (2002). Ex: stage.height - Property (read-only); indicates the current height, in pixels, of the Stage. The vh and vw were introduced in 2016 with CSS Values and Units Module Level 3
custom embedded fonts when everyone was still using images (~flash 8 -2005). @Font-face made a comeback in 2008 and Google fonts were introduced in 2010
The biggest thing from my designer perspective was: UNIFORM rendering across all devices and browsers (as long as they had the plugin). You could design and write the code inside ONE application and it would look the same on all devices and browsers. No more font rendering inconsistencies, browser-specific values and instructions, it just looked good. This same principle was implemented by Unity in its game engine and since then it's become one of the largest game engines in the world.
As a designer yourself, if you can look at those things and say they are terrible (especially no3) ideas that had to die I'll respect that.
You're moving the goal posts. Your original statement was: "Is this really progress". Now you're changing your argument to: "But flash was good at the time". Nobody is disagreeing with the second statement.
In regards to the first—CSS is a non proprietary, simple, modular, clear and extensible product without security flaws... and as the OP's post is pointing out—its capable of delivering high quality, responsive animations.
So yes this is progress. And the progress will continue: The way JavaScript is currently being used for progressive web apps/native app and serverside development (and now even OS programming - see Node.OS)... I wouldn't be surprised if CSS was entirely cross platform in the next 3-10 years.
Brah...
Over ~8000lines of code for a 10s animation. If I want to make a 2 min promo video using pure CSS, that would be ~96.000lines of code! With an average code writing speed of 500lines per day, it would take me 192days to make a 2min pure CSS animation. Repeat that out loud...192DAYS, ~96.000lines of code ...for a 2min animation of pure CSS. There's your progress right there...
Just to clarify, here's my breakdown:
Visceral Design 10/10 - Work of art! Congratulation to the patience and mastery of the author.
Reflective Design Over 8000/10 - It makes an awesome story to discuss with friends!
Behavioral Design -20/10 - Unusable in real life situations.
All the points you made are great and valid points. However, from a behavioral design, this approach is completely unusable.
It's like this guy that makes amazing paintings in Excel. I can appreciate the effort he put into making them. I can appreciate the mastery an patience he has. But you don't see designers flock to Excel to make UI design anytime soon.
As others pointed out, this is art and not necessarily progress in the field of web animation.
Lol you're missing the point. This is a demonstration of the possibilities of pure CSS animation—it's in no way suggested that this is an efficient way to animate a 2 minute promo video.
I'll spell it out for you seeing as you seem to be having a little difficulty. Here are three ideas you can take away from this example (and perhaps use to help progress your own skill set):
1. This is a great animation made purely in CSS. If this example is possible—perhaps I can consider using CSS to achieve that really simple 4 second mp4/gif/'javascript library + after effects export' animation I've implemented in my project
2. Because this type of high quality, high performance, responsive animation is possible using CSS, perhaps we should consider simplifying the process to create something similar? Maybe this will be a library, maybe a framework, maybe a web/native app? Maybe a new animation friendly flavour of CSS.
3. "Wow this is really cool, I thought programming and markdown languages were all scary gross things like math—maybe as a designer I'll start looking into basic html5/css animations and see what cool stuff I can create" ... it's posts like this that get people interested in cross disciplinary skills and further blurs the line between designers and programmers.
What this post is not saying:
1. Look at this, it's super cool and easy. You should go and refactor all of your 2 minute animations and videos into CSS. It's way easier than flash.
Ian O'Brien, almost 5 years ago
You're clearly very passionate about Flash. I'm not arguing that Flash wasn't a good platform for the time but it certainly isn't up to snuff now... and I'm not just talking about it not being maintained. It simply doesn't follow globally accepted browser standards at it's core.
One of the problems with something like Flash is you get all the stuff loaded into the player that you talked about. You can't choose to not load everything. Do you need native desktop integration on a website? Unlikely. For the other things you mentioned, the browser actually has access to most of them.
You're also choosing to say that Apple has a locked down ecosystem, which certainly is true, but patently ignores that Apple only locks down what is published as software within it's own system. You are not required to have an Apple laptop to do web development; you could do the same thing with a Raspberry Pi running Linux. That's the beauty of an open web. You don't need to spend thousands of dollars to access or develop websites, and.... eh, to be honest, you seem smart enough to realize that. This argument is pretty moot.
Many of the things we're also ignoring about Flash are important and can't be supported by Flash, like accessibility. Flash screws over people with screen readers. How about SEO? What about sites that require translations and localizations? Database storage? Integration with APIs?
Apple didn't kill Flash. Flash killed Flash because it's not an open system with the flexibility to meet the needs of modern development or animation.
Ian, thank you very much for taking the time to give such a well thought out response, really appreciate it. Yes, you are correct, trying to defend Flash by today's standards is a lost battle.
One of the problems with something like Flash is you get all the stuff loaded into the player that you talked about. You can't choose to not load everything. Do you need native desktop integration on a website? Unlikely. For the other things you mentioned, the browser actually has access to most of them.
Yes-ish. At that time Flash had most of the "cool" stuff modern browsers have. If you look at the file size of Chrome 4 (from 2009) it was 11mb. Firefox 18 (from 2013) was 19mb. If you add 20mb for the flash plugin for all those instructions (ex: video/audio playback, or live streaming), you end up with something that resembles today's browsers like Chrome 68 which is 49mb. (i might be mistaken about this tho)
TL;DR - All the things you mentioned like SEO, accessibility, screen readers, are correct. Flash was terrible at them and many other things. What I'm trying to convey is that Flash has been around for more than 20years. It paved the way for numerous platforms we take for granted today. Labeling it all bad would be a terrible thing to all those features it paved the way for.
Ah, yes. Yes it is progress.
In order to run Flash, you must download the 20MB and proprietary Flash plugin from a third-party site.
Then, as a developer, you must maintain either thousands of dollars worth of software, or you must pay into a subscription model in order to even begin to think about developing animations.
Instead, what was done here was to create a fast, performant animation that works cross-browser, loads lightning fast on mobile, and doesn't absolutely destroy your battery.
Honestly, what's missing here are better tools in order to animate with HTML and CSS.
If you want to compare sizes (giggity), compare at least 20MB to run an animation, versus the combined whopping 320KB (yes, KB) it took to create this, and then tell me there isn't progress as the animation runs buttery-smooth no matter where it loads.