frontend tips

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