It takes time to write code for various prototypes
This is so obvious that everyone would agree. For example, if you start coding without creating a wireframe in Figma, things get difficult. You’ll wonder what padding and margin values would create adequate space in the overall design and achieve a good balance. You’d have to find all the margin and padding spots, enter numbers, and make them viewable in a browser. That alone is a struggle, but Figma has constraints (Frame constraint feature) and auto layout, making it easy to adjust spacing without changing predetermined arrangements. The same thing happens with animations.
Should animation implementation be completely delegated to engineers?
Can engineers implement animations exactly as designers envision just by sketching animations and asking them to code it? That’s impossible. Animation technology can’t do everything, so engineers will implement the designer’s instructions using the most convenient implementation method and then show a sample saying they can’t create anything more complex. In reality, animation coding is complex, and without specific detailed images, engineers have no way to figure out how to code it. There are countless sample codes on the internet, but without concrete images, engineers cannot steal and implement techniques from multiple sample codes.
Even experienced engineers can’t come up with all implementation ideas on their own
I know that even first-class web designers research sites similar to their clients’ wishes and regularly collect their favorite designs. This is evident even to inexperienced designers like me from the existence of many websites that collect excellent web designs on the internet. Engineers do something similar — they look for suitable code on GitHub, usable samples on CodePen for GSAP, or code they’ve previously written to learn library implementation methods. They steal these implementation methods and consider what ideas to add to adapt them to the design that designers want. Then they enter the stage of actually coding and trying out ideas they’ve come up with. That’s why version control systems, originally tools for sharing and dividing code work in groups, are now publicly available on the internet, with features to create copies of code, improve them, and publish them — to the point where publishing code there is even seen as proof of an engineer’s technical skills.
Why use After Effects when there are various simple tools available?
It’s because After Effects has become the industry standard tool for motion design, with functionality that leaves others in the dust. After Effects has a higher learning curve compared to simpler tools that can read Figma files, like Jitter or Principle, due to its many features. However, Jitter and Principle are among many such tools that have existed for years. None of them have gained enough market share to be considered industry standard like Figma. This means that regardless of which tool you choose, no one knows whether that tool will continue to gain market share, add functions, and whether your familiar environment will persist. After Effects is different — it has an established position as a unique tool in the video production industry, and web designers who use it can continue to create animation mockups that can adapt to changing web animation implementation technologies, even if it takes about 20 hours to learn the basics. That’s because it’s not a tool specifically targeted at web-specific technologies, but rather one that isn’t affected by changes in web technology.
Web animation is not a temporary trend
Currently, many sites using web animations are being created as a matter of course. There’s no need to lament this as a revival of the Flash era. This is merely a technology transition. Since the days when Flash was used on the web, there has been a definite demand for web animation, but mobile networks and mobile device CPUs were too weak to run them. Apple decided not to include Flash on smartphones, and Flash reached the end of its life. However, technologies like Flash, which required creating two separate sites for mobile and desktop applications, were time-consuming for creators. Unlike the technical limitations of that time, current web animations are based on W3C standard technologies like HTML, CSS, JS, Canvas, SVG, and WebGL, which are designed to work reliably on all devices. These standard technologies continue to evolve in an open manner, independent of specific vendors. While advanced animation expressions using Canvas and WebGL have high learning and implementation costs, CSS animations and libraries like GSAP are currently mainstream. However, WebGL is an important technology for 3D expression and interactive experience design, and there’s no doubt it will become the standard for 3D expression on the Web as metaverse and virtual space developments progress. I feel this is a technology worth learning for myself as well. Furthermore, unlike in the Flash era, when it comes to stopping video delivery on mobile or stopping animations that can’t be shown without loading multiple images, adjusting for mobile sites — creating responsive sites — requires far less effort than preparing separate HTML and Flash versions from the start.
I always fail because I study too much
In the design industry, where you’re evaluated by your outputs, it’s risky for someone like me, who can’t even get disability employment, to learn time-consuming technologies like After Effects or Three.js. In fact, I previously studied programming for 4 years but couldn’t become an ActionScript developer, and after learning backend technology for 2 years, I could only create one site to put in my portfolio, so I gave up on becoming an engineer. Then I was just learning frontend engineering with no relation to getting a job. That’s when I encountered technologies like Next.js and Shadcn/ui, as well as AI for image generation and web application mockup generation, which changed my thinking. Knowing the struggles of engineers, I — who studied design in high school (although I dropped out) — thought that by utilizing libraries created by excellent engineers to reduce coding effort and relying on AI to convert images that I can convey in words (though I struggle with visualization), I might have possibilities as a designer who can work regardless of age. There were limits to what I could learn on my own as an engineer. But I thought that with design, I might be able to become a freelancer from scratch through self-study.
Isn’t it wasteful for beginners who can get jobs just by creating landing pages?
Yes, for people who are good at design, animation implementation and mockups can be put off. However, I’m someone who dropped out of art school because I wasn’t good at coming up with visual ideas. To aim for a career as a designer now, I need some kind of weapon. I’m thinking of making the attractive power of animation my weapon. That’s why I’m taking such a roundabout path and failing to produce results. I’m thinking of giving up if I can’t succeed after trying for a year, but I still can’t fully give up, so my doctor scolds me to work steadily. Working steadily means cutting off my last hope for the future. What remains is disability employment that anyone can do, but even disability employment is competitive, and with my background, clerical jobs would be difficult. I should just be patient with jobs that others dislike, living each day without hope, cherishing only delicious meals and sleep time. Being disabled, that’s unavoidable — but there’s a part of me that can’t easily abandon what I like, the efforts I’ve accumulated in the past, and my only strength: working with computers. Data entry is impossible for me; my disability characteristics make me slow and prone to mistakes, and I can’t challenge myself because I’m anxious about being fired quickly.
Additional note:
While I have over 6 years of programming learning experience, I have never worked as a programmer, so I should add that I confirmed with ChatGPT 4O whether other engineers also do what I’m doing before writing this. 4O often makes mistakes, so checking with the frontend engineer at your company would be most reliable. The engineer would probably answer like this: “If there’s an After Effects mockup showing detailed movements, I can research and implement methods that match it.” This is because in the engineering world, there’s a saying: “Reinventing the wheel is a waste of time.” In other words, there’s no point in creating something that someone else has already made.
