Ivan Bogachev

Yet another WebGL example is here! Three planes + some noise = beautiful waves for background effects.

The Pen by Ivan Bogachev (@sfi0zy).

Ok. It's time to refresh my CodePen profile a bit. In the last years I published mostly educational examples for my students, but it feels like they can't really work as an example of my own skills. A lot of people can do the same tricks nowadays. They looked cool five years ago, but not anymore. I needed something that would look impressive enough, so I created a new demo, "Night Drive". It'll show what I can do with Three.js in one day.

The Pen by Ivan Bogachev (@sfi0zy).

For a long time, I was thinking about a tool that would provide a set of CSS custom properties with the mouse position, scroll position, random values etc. And since I didn't find anything that I would like, I decided to write the tool myself. I called it "Medium" because it connects CSS and JS worlds. The library itself is quite simple, but I used it for a few demos on CodePen and it really speeds things up. Now it's available on GitHub and as an NPM package.

I continue my experiments with Medium, and I got a few animated backgrounds. Check them out!

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

Just published a new animated gallery on CodePen. As always, the ingredients are quite simple: two canvases, an old trusty line-drawing algorithm and some junior-level image data calculations. But the result looks interesting:

The Pen by Ivan Bogachev (@sfi0zy).

It's not for mobile devices, obviously. This amount of draw calls is kind of too much for them. It works fine on my smartphone, but I think it'll be a bad practice to run such a thing for mobile devices in production.

And here is another demo:

The Pen by Ivan Bogachev (@sfi0zy).

It was the first step in the development of that gallery. It's simpler, with only one canvas, but it may work as a base for future experiments.

Fibonacci sphere + rotation matrix + some CSS magic = tags cloud. You don't need tons of scripts to create things like that.

The Pen by Ivan Bogachev (@sfi0zy).

Just another WebGL example for my students. I noticed that I don't have a good example of the onBeforeCompile method of the materials in Three.js, but I use it in my work fairly often. So I created it. Nothing really important here, but it looks nice.

The Pen by Ivan Bogachev (@sfi0zy).

Just another WebGL example.

The Pen by Ivan Bogachev (@sfi0zy).

For a long time I wanted to make an experiment. I have an idea to combine Delaunay triangulation, clip-path, and my CSS demos with multiple backgrounds. Finally, I found a time to make it. The performance of this combination is not good, but it was expected. Clip-path property seems to be very heavy in terms of performance optimization. But the animation I got can be used for small pictures. It works well enough. Feel free to add it to your projects.

The Pen by Ivan Bogachev (@sfi0zy).

Some time ago I posted an example of the background image for multiple elements. This time I used the same ideas to create a nice concept of animation for two images. Similar effects usually use WebGL, and I wanted to check if it's possible to recreate them with CSS. I used 25 elements, animating at the same time, but it still has a good performance. I didn't expect this, really. It's a good point to start a new series of CSS experiments.

The Pen by Ivan Bogachev (@sfi0zy).

UPD: This demo has been featured in the "Best of CodePen #2/2021" by FreeFrontend:

I received an interesting question recently. Another developer asked about horizontal scroll and different effects attached to it. He shows me a video concept of some gallery and I thought that it's worth it to create an example of something similar. So I did it. It looks like Locomotive Scroll works strange in the CodePen's iframes. Sometimes it gets stuck. But it's expected. Iframes and custom scroll have always been a bad combination. But the whole demo is pretty nice in my opinion. Feel free to open it on CodePen and use it for your experiments too.

The Pen by Ivan Bogachev (@sfi0zy).

In the latest article I explained how to use matrices to make 3D scenes. A couple of days later I thought it would be a good idea to create an additional interactive demo for my students. And there it is. I don't know if this thing has its own name in programming or mathematics, but I call it "techno bird". This variation of it is written in VanillaJS and GLSL and works in all modern browsers. At least it should, I haven't tested it really. But its main purpose is to illustrate the principles from my article, so if it works in Chrome - it's enough.

The Pen by Ivan Bogachev (@sfi0zy).

I published the first lecture in the series of lectures on mathematics for UI developers. This subject is not the most important thing for our job, and a lot of programmers didn't learn it even in school, but if you create custom projects with WebGL or animations, you need it. I don't know when I'll publish the rest of the articles in this series. It requires a lot of time to convert them into the text format, but I hope I'll complete the set this year.

Most young frontend developers don't know how to use CSS animations. I know, they say that they read docs on MDN or had been practicing with "fadeIn", "fadeOut" animations and so on. But if you give them a really complicated animation, they can't transform it into the code. They don't even understand how to start. Sometimes they say that it's impossible to create one or another animation. I assume it's because they have mental blocks which are saying what they can do with CSS and what they can't. So, I wrote an article to break these mental blocks. I got a number of examples from CodePen (some of them are mine, some are just popular examples from other authors) and explained the things inside them. I showed how to use CSS animations in various "impossible" cases and what methods of their creation should be inspected when you're mastering your skills.

Full screen sliders with various background animations based on standard geometries are very popular nowadays. Recently I found a question about them on Habr Q&A and I thought "why not create it?". And I created an example of such animations with anime.js. It's easy, but the effect looks pretty nice and contemporary.

The Pen by Ivan Bogachev (@sfi0zy).

How to obtain the mouse within a shader using Three.js? How to load multiple textures with promises? How to calculate ratios of everything to create full-screen backgrounds with non-distorted parts? How to create amazing transitions between images in WebGL? Check out my new demos on CodePen to find the answers!

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

This time I shared a pen with an example of usage of a noise generator. This pen includes a sea of particles with random waves on it. The usage of such generators is a very important technique for the creative frontend developers, so, despite the fact that it's only one pen here, I think this part of shaders collection is as important as the other parts.

The Pen by Ivan Bogachev (@sfi0zy).

The show goes on! Three more examples are on CodePen now. These pens are the examples of usage of the shader material with the point cloud. Also, you can find a nice trick in them - I used third dimension to create 2D animations. It's much easier than puzzle out all the math to calculate such animations in two-dimensional space.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I continue posting beautiful shader examples to CodePen. I started with colorful ones and now the time has come for the monochrome ones. They look very futuristic, and I associate them with sci-fi movies.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I played with vertex shaders recently and in addition to my main task I got a number of beautiful effects for the default geometries in Three.js. I don't know where I can use them in production and I made a decision to share them on CodePen.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I didn't participate in any challenges for programmers for a long time, but yesterday I decided to take part in the current weekly #codepenchallenge. It's called "B and W and A". What is the best thing to do with the letter "A"? Of course, construct snowflakes. So, I did it. This pen reminded me of those times when I created things just for fun. Anyway, this animation is nice. Check it out on CodePen!

The Pen by Ivan Bogachev (@sfi0zy).

Texture projection is one of the most powerful tricks in WebGL. It can be used in different situations. I don't know why I still haven't published any pens with it. But today I corrected this mistake. Here are two demos - the first one is for the ordinary texture projection and the second one for the "sticky" projection.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

Just another scroll animation. It's based on this one, but it works in the opposite direction.

The Pen by Ivan Bogachev (@sfi0zy).

Yesterday I found a question on Habr Q&A about the menu from the old version of the URSA Major Supercluster website. Their original menu uses canvas and I wanted to create something similar, but without it. This demo is for the desktops only, but I think it’s easy to create some fallbacks for the small screens and touch screens.

The Pen by Ivan Bogachev (@sfi0zy).

A few days ago I played with different LESS mixins. It was boring a little, and I've added some keyframes to my demo and got this nice animation. I made a couple of stupid mistakes in the code. I know. Its performance can be improved. Ana Tudor fixed them and created an alternative version of the animation. It doesn't work in IE/Edge, but it's very interesting.

The Pen by Ivan Bogachev (@sfi0zy).

Performance is important, but I see a lot of websites with slow and laggy animations. It's awful. I wrote an article about this problem. I hope my advices and practical examples will help you make your animations better.

I'd like to present my new article about the shader materials and effect composer. In some ways it's like an additional part to the article about the 3D presentations in Three.js.

The Pen by Ivan Bogachev (@sfi0zy).

We continue to examine fragment shaders. The Voronoi diagram, pixelation and masks are on the agenda today.

The Pen by Ivan Bogachev (@sfi0zy).

My new article is a WebGL tutorial for front-end developers. It consists of 12 examples of simple, but pretty shaders and a lot of tips for beginners.

Here is a couple of examples:

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I'm still experimenting with shaders and I've created a couple of nice loaders. Do you think that WebGL shaders were created for something else? Maybe you're right. But it's easy to create interesting effects with them. So...

The Pen by Ivan Bogachev (@sfi0zy).

Ok. This is an experiment and I think we shouldn't do it in production. The performance is quite bad. It's better to use SVG here.

The Pen by Ivan Bogachev (@sfi0zy).

After a break, I've returned to the CodePen with a new effect based on Three.js. I don't know where I can use it in this form, but it looks interesting.

The Pen by Ivan Bogachev (@sfi0zy).

Yet another animation.

The Pen by Ivan Bogachev (@sfi0zy).

I published a new article about the dotted lines. This is the fourth article about the animations and wow-effects. Enjoy it!

Just another SVG animation.

The Pen by Ivan Bogachev (@sfi0zy).

Today I finished an article about the paths in SVG. It's the next article in my series of articles about wow effects in front-end development.

The Pen by Ivan Bogachev (@sfi0zy).

Finally, after all these pens on CodePen, I wrote an article about SVG masks. This is the continuation of the previous article about the effects based on particles. Today I explained the basic principles of usage of masks and showed some cool examples.

Just another loader. Nothing unusual. Some heavy filters. Not the best performance. Looks nice.

The Pen by Ivan Bogachev (@sfi0zy).

Image carousel is one of the most popular components nowadays. It's being used by millions of websites. But usually we see pretty simple effects in them. SVG gives us the ability to greatly improve our carousels in visual terms. And again, I've used SVG masks for that.

The Pen by Ivan Bogachev (@sfi0zy).

Today is St. Valentine's Day. So I've painted a heart. One mask, two paths and a couple of lines of JavaScript to start the action.

The Pen by Ivan Bogachev (@sfi0zy).

SVG masks. That's a very interesting technology. It allows us to create a lot of cool effects, even in IE. Here is an example:

The Pen by Ivan Bogachev (@sfi0zy).

A lot of people (and I mean not regular people, but professional front-end developers) think that the animations based on particles are difficult to implement. It's not true. Every developer with basic skills in JS can create this kinds of effects very easily. I wrote an article about these animations to help them to start.

Yet another animation.

The Pen by Ivan Bogachev (@sfi0zy).

A lot of interesting infinite patterns in CSS animations can be obtained from one idea. Today's pen is an example of it. This animation consists of two steps with simple CSS transforms. There are no rare properties or magic behavior here.

The Pen by Ivan Bogachev (@sfi0zy).

The idea is very simple: take a number of small elements, put them into one big element and rotate it. After that we can move the small elements in any direction and it will look like we have the infinite number of the elements. But it's not the truth. The number of the elements is finite.

SVG paths have an option called stroke-dashoffset and we can animate it. When Chris Coyier posted an article about it, someone said "as always, using properties for the effects they were never intended for". He is absolutely right, but...

The Pen by Ivan Bogachev (@sfi0zy).

Nick Babich writes very interesting articles on UX Planet and usually they include amazing animations. But it seems like they are created using Adobe After Effects. I got the idea of this funny face from one of his articles and tried to recreate it using CSS and JS. Let's see what I got:

The Pen by Ivan Bogachev (@sfi0zy).

Here are three of my CSS loaders, which I didn't share on my website previously. The first one uses the standard gooey SVG filter on the seven moving dots, the second is the simple cube with animated backgrounds and the last animation consists of the circles changing their sizes like waves. Nothing serious, but they can look very attractive.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I've created a nice animation of an arrow. And again, I got the design idea from the question on Habr Q&A and made it work in the CSS world.

The Pen by Ivan Bogachev (@sfi0zy).

This is a nice 404 page with some CSS animations. And again, I created it for one of my answers on Habr Q&A. I was inspired by some GIF animations from Dribbble, but unfortunately I don't remember the name of the designer.

The Pen by Ivan Bogachev (@sfi0zy).

This is an amazing liquid spinner. Unfortunately, it doesn't work in IE and Edge browsers because they don't support SVG filters yet. This is a very interesting experiment that shows the real power of SVG. Let's hope we'll be able to use this kinds of things in production one day.

The Pen by Ivan Bogachev (@sfi0zy).

Here is another amazing spinner. It works correctly in Google Chrome only because SVG filters have different behaviors in modern browsers, but this is still a nice example.

The Pen by Ivan Bogachev (@sfi0zy).

This is a simple spinner with some interesting effects. It can be used as a full-page loading indicator.

The Pen by Ivan Bogachev (@sfi0zy).

I'm still experimenting with SVG filters and I got the "share button" with nice animations and a gooey effect.

The Pen by Ivan Bogachev (@sfi0zy).

Previously I thought that creation of gooey elements was a kind of magic... After creating a gooey menu myself I can say that it's much easier to do than it may look like.

The Pen by Ivan Bogachev (@sfi0zy).

I was inspired by a little demo created by Sergey Valiukh for the Tubik Studio and I've created this pen. This is a sunny menu for a restaurant with some nice animations in pure CSS.

The Pen by Ivan Bogachev (@sfi0zy).

This is an example of usage of the jQuery-Snowfall plugin. I wrote this pen for one of my answers on Habr Q&A, but it looks so pretty, I can't not to share it here.

The Pen by Ivan Bogachev (@sfi0zy).

Yet another CSS example is here! Originally, I wrote this fire for the quest on CSSQuests, but now it's available on CodePen too. This is a pure CSS animation, without any JavaScript or SVG.

The Pen by Ivan Bogachev (@sfi0zy).

Here is my self portrait with some animations in pure CSS. Without any images, without any SVG elements.

The Pen by Ivan Bogachev (@sfi0zy).

This is my CSS/JS concept of the old book with the "turn the page" animation that can be integrated into the website.

The Pen by Ivan Bogachev (@sfi0zy).