Well optimized slider and 3D animations in JavaScript - Frontend News #3
Guy with notebook

February 17, 2021

Well optimized slider and 3D animations in JavaScript - Frontend News #3

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Frontend Developer
Share

Watch the Frontend News #3 - the podcast about tech and front end innovations. Every 2nd week we deliver a portion of fresh insights and news. Today we will discuss:

Transcription

Chris
Welcome to another Frontend News podcast, guys, it's great to see again, and it's great to serve you news all around the front end world.
Last week, we had a little contest about what's the most favorite conference, and I think we already corrected the answers, I voted for Amsterdam. However, let's find out which one is your favorite.
Tomasz
Yes, Amsterdam looks really interesting for me. I would choose the JavaScript conference, which is like the biggest from all of them. And there are over 100 talks from different disciplines like UI, UX, front end, back end. Everything worked in one place around the JavaScript ecosystem. Does it sound good because for me it's really, really interesting and hot. So I will be there and hopefully you will be there too. So message me and let’s me. Why not.
Chris
Sounds amazing. I'm wondering because today we are such influencers of a front end world and I’m wondering where our invitations are. But OK, let's wait. Maybe still in progress. So after this way too long an intro, we are ready to kick off the agenda. So Tomasz, what’s in?
Tomasz
OK guys for today there is a bunch of news from the front end. As always, as a first topic, I would like to preview the NPM 7 Cli release. The next one is going to be about Safari Technology. Preview 120. The third one is about the upcoming Firefox 86 release. Then we’re going to talk about Hot Projects Top List.

And at the end, I would like to introduce the minor updates for the Node and it will be version v.12.20.2.
Chris
So many points again. OK, so let's start with the NPM 7 Cli update.

NPM 7 Cli Release


Tomasz
It wouldn't be a really game changer. Another update for the Cli. But what we get is the workspace. NPM will receive a workspace. It will be similar like in Yarn package manager.
Chris
What is a workspace, Tomasz?
Tomasz
OK, so workspace. We can imagine it as tooling to be able to manage multiple packages within our project. Inside our project from the top level package, from another top level project. We can use it, for example, when we are dealing with the micro front ends or mono repo or any other setup that requires us to create a lot of different types, a lot of different environments and be able to manage it from one place. So this is what a workspace being used for. Yes, yes. I used it with the Yarn previously, maybe not in commercial projects, but I use it on my own just to experiment.

I love to learn new things and it's pretty easy to, to, to use it to define like, you know, the top level manager and split it down into minor projects. It's easy, not a lot of configuration to be able to handle, like for the basic usage, right. If we are doing something more advanced, obviously we need to dig deeper into it and check the documentation. But it's worth seeing on your own. The link should be somewhere there.

Yeah. Under the table.
Chris
OK, you mentioned mono repo? So guys, if you are against monorepo, you can find our material about micro frontends, which is in the second playlist, which we call Experts Zone. OK, the next one was Safari preview. So what's new?

Safari Technology Preview 120


Tomasz
Yep. Yeah. And nowadays most of the developers use Google Chrome, I believe.
But still there are a lot of useful things around the safari itself. Yes, but I will speak about it a little bit later. Let me now present the updates. So if you have the MacOS with the Big Sur or MacOS with the Catalina, you can use the new release of the Safari. And the updates will be around a lot of things like starting from the Web Inspector, fixing the scrolling issues, CSS, JavaScript, web audio, accessibility, payment requests..
Chris
Wow, sounds like a lot of updates this time? I hope they won't break anything.
Tomasz
We will see. OK, guys, so if you want to find out more about the upcoming Safari technology preview 120, the link is, as always in the description.
Chris
Hopefully. OK, do you use Safari?
Tomasz
Yes, I used Safari, for example, when I worked with React Native projects and when I ran IOS built in simulator, I used Safari and Web Inspector to debug the application.
Chris
So you mostly use it for debugging.
Tomasz
I use it only for debugging, to be honest.
Chris
And there are also updates for Firefox. So what's in the Firefox?

Incoming Firefox 86 release


Tomasz
New Year, New Fox, a lot of fire and it gives the Firefox! And the versioning is 86. So in the upcoming release, the Firefox team has focused mostly around the Web extensions API.
Chris
Sounds good, but could also explain what the web extensions and Web extensions API are?
Tomasz
This is the browser API that gives the developers the possibility to write their own extensions and include in the browser. You can cover whatever functionalities you want to and you need to in your daily work on just daily usage for the browser.

If we know what it is - the Web Extensions API, let's talk a little bit about what they improved. So mostly it's about the permissions. If the extension has host permissions for the particular top, it's no longer required to get some extra permissions for that extension to get, for example, page title or redirector or any kind of metadata. So it's easier to obtain all the information about the top inside the extension. And this is like the biggest update for the upcoming release.
Chris
That sounds good to us. Is there anything else provided or it was mostly about the web extensions?
Tomasz
Obviously there are some minor bug fixes, but if you're interested, I highly recommend checking what's inside in the release notes on their website.
Chris
Which are, as always, in the descriptions. I think we covered browser updates. So the next one was called Hot Project Top List. So let's talk about this.

Hot Projects Top Lists


Tomasz
OK, guys, I will use the best of JS Web page just to tell you what I want about the hot projects top list. So according to last week, the hottest projects on GitHub from the front end world are Vite, Svelte, VS Code, esbuild and React. As we know what React is and it's still on the top. Visual Studio Code is one of the most famous IDE for the developers. But what it's worth to mention is this Vite and this is the next generation front and tooling to handle the build process and to manage our application.
Chis
So we need another webpack kind of tool?
Tomasz
Yeah, a good question. I believe the webpack does not cover everything and there are obviously differences between the Vite and the webpack not only in the implementation but also in the build process and how it looks like how we use it. I do not use Vite in real life yet, I mean in commercial projects. But yes, I did check this and play a little bit and I want to play more, because it looks promising for me and it's really easy to initialize and use within our project.
Chris
I see. That's what it's like. Second on the list, do you think it's a good replacement for React or not yet?
Tomasz
You know, React is still more about building components and, you know, compose them.
Svelte is more like the whole framework, how to deal with web applications and helps with building it in, you know, in an efficient way to take care of the performance. I have not used it in commercials yet, but I did use my own. Looks good. But still, I prefer working with the tooling we use daily. So React, webpack - this is what I like.
Chris
Thanks so much for this short screen recording. I think we all love it. So the last one and as usual, there is Node.js update.
Tomasz
Yes, this is our main guest in almost each episode, but it's good. Node.js team upgrades data really, really often. And now we can expect the new release for the Node and its version is 12.20.2. Impressive. And what's inside? There are a couple of bug fixes. They also upgrade their NPM to the newest version they fix, also looping over prototyping agents or they check - right, it's not scheduled in scope - distracter. And that's it. This update is not a game changer, but it's worth knowing and tracking everything because maybe - maybe - this fix will help with your app. So be up to date and check the node.js daily. Links are in description.

That's it from the news. And I give the voice to Chris.
Chris
OK, guys. So the only thing I can do is like invite you to the curated project and tips and tricks sessions. So stay tuned, guys.

Curated project of the week


Chris
Welcome to the show. Last week I presented your website with, you know, cool low poly 3D model. But today I know it looks like an advertisement, but trust me, it's not. I'm thrilled to show you this experience. The website which helps developers to learn WebGL on top of the Three.js Library. The host and the author of this course, Bruno Simon, is a French creative developer specialized in WebGL. He has worked on many, many projects. Let's go to the landing page.
It's quite common. Famous pattern with logo on the left corner, short text, rounded buttons, price and, you know, buy CTA. But when we click on the right side to explore this tiny, tiny room with zero one number guys, we are inside a visualization of this course and levels. Bruno, you bastard, I love it! I totally love it. Every scroll to the upper floor shows us a short insight of what we are going to learn on this part and this particular chapter.

After exploring this amazing, amazing section, we can scroll down, read and even watch something from the author.

Then we have the next great readable and clearly explained section with all topics we could actually access. We can see here very nice animations with 3D models appearing. These are just PNG, but hey, they still do the trick.

I like the section below where we can read something from the author, a simple idea where he combines his photo with floating 3D elements. And finally, we have a short view of his latest projects.

My advice for you guys is to check everything in this section. Every of his projects can open your eyes wider to Three.js possibilities. And the rest of this website,yeah, it just looks similar to other pages where you can buy the course - nothing special. By looking at this website, I really want to make stuff like he does. I'm completely fascinated by this website. Just check it yourself. And show your opinions. Cheers, guys.

Live Coding - JS Tricks: Slider Component with Animation


Tomasz
Hi, guys. I'm really excited that I can show you another portion of Tips and Tricks. Today, we will use the Framer Motion Library to create the simple slider component with animation.

If you didn't use the Framer Motion, it's worth checking their website where you can see the examples, play with it and see some code snippets. Of course, it's worth to check the documentation too to learn more.

Let's focus on today's task. I have prepared the basic structure for the slider, but without animation.

So let's add some smooth touch over the slider. I have already created the motion image wrapper, which is a motion image component being part of the style component with some basic styling just to make it look right. And what we will do is focus on the slider component. What it's worth to mention is that I have already used the AnimatePresence component, which adds the animation when the component is being unmounted. By default, React does not support events like that.

So animated presents will add it for us. There are a few ways how to deal with animations. We will use the way with the variants. So we can use variants to define the animation on the particular state. And we can call this state however we want, let's call it “enter”, “center” and “exit”. So “center” it will be our default state, “enter” will be the animation which will occur on enter. And “exit” - yep, you're right - it will be the animation on the exit.

So it could be a simple object or a function that returns the object.

So our default state for the animation should be like... we want a center image.. separate image, opacity… and it should be on the top. On “enter” we want to use a function. Why? Because we need to have something that's called direction. You're right. We need to slide the photo to the left or to the right, depending on which button we will click.
So our direction will have the values. Minus one or one, depending on which direction we want to slide.

So if our direction on enter will be greater than zero, let's move our image to right by three hundred pixels, if not - three hundred to the left. And we are starting from the opacity - null. The same thing for exit animation. So if our direction is lower than zero, that's why three hundred pixels to the right or if not three hundred left and we want to hide the opacity. Cool. We have defined our variants, so let's add them into our motion image.

Will it change something? Not yet, let's work on it a little bit. Another attribute for the motion image component is the key attribute. It's important because thanks to the key attribute AnimatePresence could recognize the animated element and other necessary functionalities, the key should be different for each image.

So what we can do is actually use the image source - image path - because it will be unique. OK, so no worries. How to use variants? Well, the motion components have attributes where we can define the names of the variants that should occur on specific events. From the event standpoint, we have that initial animation.

Right, so this is our target to which we will be animating and on exit. And we are just passing the names of the variants.

So this is “exit”, “center” and “enter”. Cool! Looks pretty simple, but we didn't pass the direction into the variant. As we can see here is the function. And we didn't correlate those two guys to pass the custom data, we can use the field that is called custom and pass the direction. Great. It's almost there. What we want to do is also to define how the transition should look like when we will be modifying the transform, translate X attribute.

So our transition on the X, let's use spring animation.

Just add some customization on it, if you're interested in what all of these attributes mean, just check the documentation. I think that should be it, actually, let's check it out. Yes, it works! Nice. And it's better than, you know, the basic state without an animation. So as you can see, the seventy seven lines of code are enough to cover the slider functionality, at least the basic one.

So this is everything that I have prepared. The power of the Framer Motion library is much bigger and I highly recommend checking it on your own. Thank you for your attention and see you in the next chapters.
Chris
OK, this is for today's episode. There was quite a bunch of good news in this project and tips and and Show some love by clicking the like button or leaving a comment. I think you like it. We like it. Do you like it? We love it. So see you next week!

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Microphone
hexagon

Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts

Krzysztof
Diamond logo icon
LinkedIn logo
Diamond logo icon
Mail logo

Krzysztof Wyrzykowski

CTO

I specialize in creating advanced digital experiences, often taking part in interactive web campaigns and playing a leading role in combining modern technologies, usability and accessibility.

Tomasz
Diamond logo icon
Mail logo

Tomasz Krajewski

Frontend Developer

I'm Senior JS Developer with more than 8 years of practice and specialize in creating the software architecture and implementing advanced solutions in JS and RoR.

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.