Follow us on - Dribbble | Twitter | Facebook

Gooey animation in pagination using SVG

gooey-pagination
Today I would like to share a tutorial for pagination with gooey animation using SVG. Pagination is the process of dividing a document into discrete pages. For this animation, we used SVG for gooey effect. SVG allows you to play with shapes and an easy to connect to divs. Using SVG, create a filter and apply to the HTML element(DIV).

Let start how to create a gooey effect in pagination.

Concepts Used

  • CSS transition
  • css animation
  • SVG filters.
  • Jquery

HTML Markup

First Create the HTML structure.

CSS

Add style to the pagination list.

.fltr{
position: relative;
filter: url("#gooey");
-webkit-filter: url("#gooey");
-moz-filter: url("#gooey");
}

.page-list{
margin: 0;
border-radius: 30px;
display: inline-block;
padding: 0px 0px;
position: relative;
z-index: 2;
}
.page-list li{
background: #fff;
border-radius: 50%;

margin: 0px 15px;
counter-increment: list;
cursor: pointer;
position: relative;
z-index: 2;
width: 41px;
height: 41px;
line-height: 41px;
display: inline-block;
text-align: center;
color: #111;
font-family: sans-serif;
font-size: 20px;
}
.page-list li:after{
content: "";
content: counter(list);
}

.from-move{
content: "";
position: absolute;
left: 7px; top: -7px;
border-radius: 50%;
z-index: 1;
width: 55px;
height: 55px;
display: inline-block;
transition: all 0.5s ease;
background: #ffffff;
}

SVG Filters

Using SVG filters, we can make source graphic to produce a modified graphical results.
Filters are defined by an element. You can apply this filter to a graphical element or container element.

Each filter consists of a set of filter primitives. Each filter primitives perform some graphical operations such as blur, shadow, lightning and more. Here we used Gaussian blur, composite, color matrix.

feGaussianBlur

To Blur the object Gaussian Blur is used, with attribute stdDeviation.
stdDeviation – The standard deviation for the blur operation. The value of stdDeviation can be either one or two.
If one number is provided, then that value is used for both X and Y.
If two numbers are provided, the first number represents a standard deviation value along the x-axis of the current coordinate system and the second value represents a standard deviation in Y.

feColorMatrix

To increase the contrast of the alpha channel which, combined with the blur, creates that blob effect with attributes type.
type – It indicates type of matrix operation. Here matrix indicates 5*4 matrix will be provided.
values – a list of 20 matrix values, separated by white space or a comma.
Example values=”1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0”

feComposite

To make the content visible.
In this example, In each pagination specified number, to make number visible without blur effect using fecomposite.

How to apply SVG to filter to HTML element?

To apply the filter to the container of the elements we want to use CSS property filter.
Using filter ID, Applying filter to the container.
“#gooey” is the id for the filter.

.container {
-webkit-filter: url("#gooey");
filter: url("../menu.html#gooey");
}

Thank you for reading this tutorial, and if you have any query please comment below. If you like this article share it…

You may also like

  • Saravana

    Wow… keep on Posting more components. Like loaders, search…