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 […]
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 […]
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 […]
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 […]
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: […]
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 […]
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 […]
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 http://yourshop-name.com/search to see the search page. 1.Adding the search form The first we need to do is to add the search form. Open […]
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 […]