frontend tips | Glivera Team Frontend Development Agency

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 […]

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 […]

Automation layout start

Automation layout start Frontend tips
in Front-end | June 12, 2019

Hello, reader! If you create websites on a stream, the start of a project turns into a routine. Earlier, in order to create a site layout from scratch, I had to manually do the following operations: Creation of the main project folder in a certain place on the principle of site_number_of the site (site_name), for example site_49 […]

Site buttons organization with Sass

Site buttons organization with Sass
in Front-end | March 26, 2019

Designers often create different sizes and decorations of the site buttons. Some of them can be repeating, some are not. It would be awesome to create system for quickly adding and editing buttons, sass @extend’s is the right choice. It’s illustration of buttons on typical project: HTML for buttons would be constant throughout the entire […]

Shopify: Displaying the menu

Shopify Displaying the menu
in Front-end, Shopify | December 8, 2018

In this article we will speak about how to display the navigation in Shopify. Let’s display such menu: Creation of the menu in the admin panel So, the first we need to do is to create the menu in our admin panel. For this we go to ‘Navigation’ tab and click ‘Add menu’ as shown on the screenshot: […]

Memo about .editorconfig

Memo about editorconfig
in Front-end | November 17, 2018

Hi, developer! There are cases when, in addition to the main IDE, a simple editor is used to quickly view/edit of the code. Syntax settings (for example, tabs or spaces as indents) may differ. When several people work on a project, and each uses different settings, this can also lead to problems. To standardize syntax […]

Shopify: password recovery and reset

Shopify: password recovery and reset
in Front-end, Shopify | March 10, 2018

In this article we will learn how to create the page and the template for password recovery and reset, and we will edit the file reset_password.liquid;. We are going to work with such form: 1.Creating the template As we don’t have the template for password recovery in Shopify, we will need to make it. It […]

Shopify: add the site search

Shopify add the site search - frontend tips
in Front-end, Shopify | January 19, 2018

In this article we will edit the template search.liquid where the user can find the store goods, pages, and blog articles. At the result you should get the following: Now let’s go to to see the search page. 1.Adding the search form The first we need to do is to add the search form. Open […]

Shopify. Connecting Slick slider

Shopify Connecting Slick slider
in Front-end, Shopify | June 15, 2017

Let’s look at the possibility of creating a slide show using SLIK plugin. An important feature will be the ability of the administrator to add, delete slides, and making settings of the slider. For this we will use “sections” and “sections blocks”. 1.Connection For development of the theme we will use the template engine slate, that’s why the […]