Frontend Blog

FrontEnd Blog

News and information about front-end web development tips, tools, modern trends and website engineering. Productivity advice for highly motivated digital professionals.

Stand Out of the Crowd with Fresh Animated Website

Stand Out of the Crowd with Fresh Animated Website
in Front-end | September 9, 2020

At a time when most businesses are selling their goods and services online, having an attractive website is a must for every company. Frontend development is a great option for building an online resource that will be both responsive and user-friendly. From a wide range of available solutions, many entrepreneurs are choosing an animated website […]

Website menu animation using GSAP

website menu animation frontend tricks
in Front-end | June 2, 2020

Let’s consider creating a simple menu animation using GSAP. That’s the result we’ll get at the end. Let’s start implementing website menu. 1.HTML Our structure will be as follows: 2.SCSS 3.JavaScript Let’s declare the variables. At onReady we assign values to them. Create a function with animation and time line. We show the menu. We set the […]

Solar System Animation (GSAP 3)

How to create Solar System Animation with HTML CSS GSAP3
in Front-end | May 22, 2020

Imagine that we are George Lucas and create a piece of space. Lol 🙂 To do this, we found a suitable image in the SVG format and edited it a little. So, let’s begin…. 1. HTML We use the HTML Pug (Jade) preprocessor because it is cool and useful, so there will be no pure html […]

Preloader and first screen animation (GSAP3)

How to create preloader with animation
in Front-end | May 4, 2020

Very often web developers face the task of creating a good preloader with animation. Today we will consider creating a small preloader animation and the first screen using GSAP3. 1.HTML structure Add our structure. Previously, we prepared SVG for the preloader. 2.SCSS Now add the styles. 3.JavaScript Well, add our animation. You can see the […]

Automatic layout testing with BackstopJS

Automatic layout testing with BackstopJS
in Front-end | April 15, 2020

Hi, developer! A frequent problem of a layout designer is that he corrects styles in one place, but he sees changes in several places. And the layout designer notices it too late. In this post, I will talk about regression testing. The essence of the method is that you take screenshots of the site (not […]

WordPress theme development – Connect your styles and scripts

Connect your styles and scripts on WP
in Front-end, Wordpress | March 12, 2020

1. Connect styles So, we already have the pre-integrated slicing, now we need to set up it on WordPress, copy the folders /js and /styles into the theme folder wp-content/themes/test_themes/ In wp-content/themes/test_themes/ we need to create functions.php. To connect your styles in functions.php to the theme write down: register_styles – free-handed function name. wp_register_style – registers CSS file in WordPress. After registration, you can add […]

Animating Elements Using the MotionPath Plugin

Animating Web Elements Using the MotionPath Plugin
in Front-end | January 21, 2020

MotionPath is one of the new animation features in GSAP 3. This plugin allows you to turn any path from SVG into the motion path of your animated element. Beginning of work: Connecting gsap Connecting MotionPathPlugin. It needs to be connected separately, since it is not part of the gsap kernel. Next we create the […]

Animation of elements when scrolling a page using GSAP

Animation of elements when scrolling a page using GSAP
in Front-end | January 14, 2020

Let’s consider creating an animation of elements when scrolling a page using a specific task as an example. What do we have The section where two blocks are placed (fig. 1). On the left there is a title and a block with icons (1), on the right there are blocks with text (2). Hereafter, the […]

Developing of WordPress theme – Main definitions

Developing of WordPress theme
in Front-end, Wordpress | January 3, 2020

Main definitions Theme WordPress theme – it’s a common design of the site that includes colour, graphics, and text. The theme – this is what is sometimes called ‘skin’ or ‘template’, but it’s neither one nor the other. ‘Skin’ and ‘template’ is a decoration of the site. WordPress theme is a place where the code meets […]