Mathematics behind animations on the website

animation = combination of states OR a collection of data points

I was searching animation libraries to learn some cool animation tricks. The basic idea I always follow to learn anything new is to develop small tiny projects using the same.

Similarly to learn cool animations in the front end, I decided to develop small animated projects or UI components that animate beautifully.

Imagination leads to curiosity and curiosity leads to action

Via the first principle of thinking I simply jump to the brute force solution of developing animations on my own from scratch.

Time to learn some animations in frontend and as we all know CSS is the one programming language to provide cool animations to the website.

So I jump to core CSS, understanding backgrounds, grids, shadows, rotation, skews, scale and whatnot else.

I even switched to three.js before learning these core CSS attributes but never mind 3D was something else than expected so I switched back to core CSS.

CSS is not that hard but the core thing I’ve found is that I’ve to remember things in CSS and again if we need to remember things in programming language it simply means we need more practice.

While working in javascript I usually don’t have to or need to remember method names or attributes, it’s in my subconscious mind after 4 years of experience or let’s say any solution in javascript flows effortlessly

I use this formula to measure my understanding and practice in any subject and more precisely helps me to rate myself.

Coming back to CSS, I ain’t good at remembering attributes and since I didn’t have worked with SCSS variables are far from my dictionary.

Curiosity arrises

The moment when I become certain to explore and read and learn CSS again.

• I googled
• Open chatGPT to get the roadmap
• Watch YouTube videos
• Build projects using CSS CSS wasn’t tough to learn it’s again become a game of practice, the more CSS I was writing the better I was becoming.

The same feeling arose when I started DSA after 4 years of my work experience.

DSA used to be like black-hole for me, as I said earlier things have to be remembered when the conversation begins on DSA and all the reason goes to practise, I didn’t practise DSA as I did with React.js and later on I started hating stuff in DSA.

2 weeks passed and I learned DSA via an online course.

I jumped to the practice session during the entire weeks of the process I understood that so many cool things were missed just because I was stubborn and had a preconceived notion about a particular subject.

We all did this for a programming language, a new kind of job, a new database or a new framework, change is inevitable but yet a difficult one to comprehend.

Being a programmer I see myself comfortable with almost everything in programming, yeah that can be my end goal 3/4 years down the line.

Even with the versatility and pace at which tech is changing, every developer needs to be a jack of all trades and this will be certain.

Companies won’t prefer hiring some frontend and backend guy, especially most startups won’t and for that, we need to become a kind of one-man army.

CSS Tricks were an adrenaline

Do you remember your first live code or website?

Do you know the feeling?

I remember when I hosted my first website designed and developed 3 years ago, it is live -> iHateReading

That feeling was different especially the feeling that everything was working fine was amazing.

So my point over here was the same, when I switched to writing core CSS, I learned about gradients, shadows, border types, colours, skews, rotation, and x, y scroller triggers and then developed the small animations using all of them and my first impression was like a baby child, WOW 😃

I was literally like WOW, I am sure I got the adrenaline rush otherwise I wouldn’t be able to do it post one more week.

I keep on writing CSS, working with gradients and skews.

My usual approach was to open code pen examples watch all the inspirations and try to emulate them from scratch using pure CSS.

That was my everyday motto, watch or find something cool online and try to build the customised version of it.

Basically, I was constantly exploiting my dose of adrenaline 😃 and eventually at the end of the 3rd week I stopped because I got bored and also I was not getting more ideas than usual.

This happened will all of us, some of them on the internet calling this burnout from a topic or overload and so on.

Mathematics under the hood

I have this question, can mathematics solve every problem in the world?

Does mathematics exist everywhere?

Even in writing CSS and providing animations I’ve found myself doing maths.

It's just a combination of states or more precisely CSS is a transition from one state to another.

For react.js(jsx) developers, you can relate it with toggling 2 states of a useState hook

For Python devs, you are just defining the 2 sets of values

Animations can be understood as toggling the values and each value is a state of the animation for an object we are animating.

The below code translates the bottom wave animating for the infinite duration of time in the negative x-direction.

This output at first glimpse looks like hard-coded math calculations written in CSS but it always seems harder until done.

• The first stage is when the x translation value of the wave component is zero
• The second or last state is when the x translation value is 100 in the negative direction to become -100.
• Now if somehow I can put this translation for an infinite duration of time, it will become an infinite wave just like on the beach. Using the translation duration attribute we can run the animation for an infinite duration of time.
• The last step is to solve the edge case if the wave component width should not be finished once the component translates in the x-direction and to solve it I simply use more than the expected width as per calculation. This was my go-to strategy to create something like the one below

I can divide the tasks into 4 sub-tasks using the first principle thinking strategy or one can simply use the brute force technique termed in computer science.

Similarly, I developed this small project to reveal the card when hovered using again 2 transition states.

• First state, when both the back and front components are aligned with an offset of angles
• Second state, when the front card hovers it rotates in the y-direction or even skews in the x-axis
• Lastly, we just need to attach the element to these transition states to come up with something like the one shown below.

The definition comes in this way we are making transitions from one state to another and attaching those transition events to recall when should the transition begin or occur whether it’s on hover, mouse over or on click etc.

Now CSS becomes a bit easier to understand and we don’t need to remember jargon thoroughly.

Next time thinking of the transition states of any animation the first thing we can probably imply is to break the animation into easier steps or multiple transition states.

I can view all the animations as the motion of an object into multiple transition states.

gsap.fromTo(linkButton.current, {opacity: 0}, {opacity:1})

The above code consists of 2 transition states where opacity toggled between 0 and 1.

Now when rendering the button component it will automatically animate the button opacity and it will look like a fade-in effect.

2 transition states to define a fade-in animation.

Most of all maybe all of the animation is the combination of the transition states.

Transition states * n = Animated Movie

Another thing to add here is that I’ve understood that each animation is a combination of transition states.

And what does an animated movie consist of animated objects, moving in all possible directions so having multiple transition states?

So to develop any animated movie using programming language we just need to combine too many transition states along with different objects not just one.

For example, let’s break the animated movie I’ve developed as shown below in the video.

First I’ve 3/4 objects in the movie

1. The emulator or phone screen in the centre
2. Background dots animating continuously till the end
3. Welcome text in the back

Now these objects have transition states described as follows

1. Emulator inner height from zero to 1
2. Emulator skew and rotation angle
3. Emulator inside text (which is an array of texts)
4. Background dots scale from 0 to 100
5. Background dots wrapper width from 0 to 100
6. Welcome text in the background opacity from 0 to 1

These all are the transition states and in fact, these are the exact timeline codes we have to define to create the animated movie.

• First, we render the emulator phone with all transition states
• then the background dots will appear just after 1s of the emulator and render with all transition states
• lastly same goes for the welcome text at the end
• another thing each transition state is like a linked list, meaning we will keep on updating the current animating object state to the next animating object.

For example, we have to tell the welcome text to only appear when emulator centre texts reach his end and so on.

This is the easiest explanation I can give so far, breaking down into transition objects along with their transition states and lastly connecting them to create the animated movie.

Now the more transition objects we have the bigger the movie length will be and the longer the movie will go the longer videos we have created you know what this is how we can generate YouTube shorts or reels via a program.

And if somehow we can reuse our codebase to create different types of animated movies with almost the same kind of fundamental transitions already defined we can develop more videos in one go.

I’ve found that YouTube videos and shorts are a combination of images, videos and texts so these will become our transition objects.

Now we just have to define their transition states and combine or join them using the transition linked explained above making our video programmatically.

A few months ago, I wrote a story on how to create a video programmatically using an npm module called Remotion.

Create videos programmatically

Now after learning CSS and using some first principle thinking, I understand how remotion would have been working under the hood or if I am wrong in that case, at least I can develop my videos using a code.

This is the power of maths and animations in the front end, it just opens a new domain of exploration.

More interesting will be covered in later writings.

See you in the next one.

Comments

[Eckehard]

CSS is very powerful, but it is based on a even more powerful graphics engine behind. So, CSS is only one option for animations, using the HTML5-canvas could be another one. Some of the CSS concepts are hard to learn and hard to use, so using animations libraries can be a good Idea anyway.

There are plenty good libraries out there, like animejs, theatrejs and the web is full of recommendations, so, have fun!

[shrey vijayvargiya]

Yeah, HTML canva and web.gl is another world for animation,

then we have three.js
and currently, I am working and using gsap

I've already worked with react-spring and anime.js