Create a Distortion Effect Using GSAP

Animating DOM components on the internet has been one of many many matters with quite a few options. We now have seen the rise of HTML and CSS traditional design programs, and the best way to construction keyframe animations accordingly. Then, we transitioned into utilizing javascript libraries like jQuery, solely to now be trumped by extra environment friendly and performant libraries, one among which is GSAP.



Introduction

GSAP (GreenSock Animation Platform), as indicated by the Getting Began information, “is a set of instruments for scripted animations”. What that mainly means, is that it’s one large ecosystem of ready-made features and strategies you should use to animate actually something on the DOM. What makes GSAP so nice, is that it’s absolutely optimized for efficiency and scaling, even when constructing complicated animation. That is what makes it trump over jQuery, in addition to its minimal code type in distinction to jQuery’s strong syntax.



What’s going to we be constructing?

On this article, you’ll learn to construct a cool-looking webpage with a distortion impact that will get triggered on hover, utilizing GSAP and hover-effect library. This instance will assist us shorten the training curve with GSAP.

Credit go to:
UI Designer: Maxim Nilov | Dribbble
Github: codicts/Fashion-Landing-Page (github.com)



Stipulations

GSAP is a set that makes rendering on the DOM so much simpler, and that is made attainable by utilizing a couple of key ideas which can be associated to DOM manipulation, very similar to each different framework for the net. To this finish, you have to to know:

  • HTML, CSS and Javascript
  • Fundamental React



How does GSAP work?

GSAP has built-in elements to assist create these animations, they usually include strategies that assist us set the properties we wish to animate. For this instance, we’ll solely want one among these elements, which is the TweenMax. (Please take a look at their docs:).



TweenMax

The Tween and TweenMax elements are one of many extra extensively used ones, in that they make it straightforward to do the easy transitions with out writing complicated keyframes. The tween key phrase is derived from ‘between’, which mainly means “change this property between a given length from one worth to a different”.
Let’s check out a number of the strategies that exists inside GSAP:

  • gsap.to()
  • gsap.from()
  • gsap.staggerFrom()



gsap.to()

Right here, we inform gsap to alter the property of a given worth to a different as nicely, however on this case, we point out the beginning worth of the animation.
Right here’s an instance:

gsap.from("#brand", {length: 1, x: 100});
Enter fullscreen mode

Exit fullscreen mode



Gsap.staggerFrom()

Now staggerFrom works a bit in a different way from gsap.to() and gsap.from(). With to and from, we take care of a single HTML component that we wish to animate, however what if we wish to animate a gaggle of components, notably kids of a dad or mum component? With staggerFrom(), we are able to set an animation to take impact for a gaggle of kid components, and even set an interval or “stagger” between the weather, to present it this sequential really feel as they get animated.
Right here’s an instance of utilizing this:

    TweenMax.staggerFrom(".media ul li", 1.5, { //TweenMax used rather than gsap
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);
Enter fullscreen mode

Exit fullscreen mode

First, we name the gsap library (TweenMax), then we are able to use the “staggerFrom()” technique to focus on the HTML <li/> components below the media class. The worth 1.5 is used to point the stagger to be affected between the beginning time of every baby’s animation. This stagger is what helps the animations to have a sequential really feel between them.
Then we put within the properties we would like for every component. Observe the ease property, which you’ll be taught extra about of their documentation.



Getting Began with GSAP

Now let’s get began with constructing our distortion impact web page.
Create your folder and in that new folder, create your HTML and CSS information.
Then in your HTML file, you arrange your fundamental HTML markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Appropriate" content material="IE=edge">
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<physique>

</physique>
</html>
Subsequent, our imports:
  <!-- google fonts -->
  <hyperlink href="https://fonts.googleapis.com/css?household=Poppins:500,600,700,900&show=swap" rel="stylesheet">
  <!-- css -->
  <hyperlink rel="stylesheet" href="type.css">
Then our scripts as nicely, for GSAP and hover-effect (these go on the underside of the html web page)
 <!-- icons -->
  <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
  <!-- gsap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
    integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="nameless"></script>
  <!-- three js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"
    integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="nameless"></script>
Enter fullscreen mode

Exit fullscreen mode

Now we’re set to get began with our net web page.
You may arrange the views to your comfort, however for this tutorial, we’ll first arrange the principle webpage.

  <!-- NAVBAR
    =============================== -->
    <nav class="navbar">
      <div class="menu">
        <ion-icon identify="ios-menu"></ion-icon>
      </div>
      <div class="lang">eng</div>
      <div class="search">
        <ion-icon identify="ios-search"></ion-icon>
      </div>
    </nav>


    <!-- SOCIAL MEDIA
    =============================== -->
    <div class="media">
      <ul>
        <li>fb</li>
        <li>instagram</li>
        <li>twitter</li>
      </ul>
    </div>


    <!-- TEXT
    =============================== -->
    <div class="textual content">
      <h1>
        <span class="hidetext">toni&man</span>
      </h1>
      <h2>duality</h2>
      <h3>
        <span class="hidetext">assortment 2017 <br> duality</span>
      </h3>
      <p>
        <span class="hidetext">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quis, delectus facere
          neque sunt commodi quae
          culpa dolores doloribus magnam?
        </span>
      </p>
    </div>


    <!-- SPONSOR
    =============================== -->
    <div class="sponsor">
      <img src="https://style-tricks.com/workshub/./photos/sponsor-logo.png" alt="">
      <p>official sponsor</p>
    </div>
Enter fullscreen mode

Exit fullscreen mode

Then the CSS for the essential webpage:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

physique {
  font-family: 'Poppins';
  background: #D8DBE2;
  width: 100%;
  top: 100vh;
  overflow: hidden;
}

ul {
  list-style: none;
}

/* NAVBAR
=========================== */
.navbar {
  show: flex;
  justify-content: space-between;
  top: 80px;
  align-items: heart;
}

.navbar > div {
  padding: 0 30px;
  font-size: 20px;
}

.navbar .menu {
  margin-right: auto;
}

.navbar .lang {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}


/* SOCIAL MEDIA
=========================== */
.media ul {
  place: absolute;
  backside: 250px;
  left: -140px;
  remodel: rotate(-90deg);
}

.media ul li {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  show: inline-block;
  padding: 0 30px;
}


/* TEXT
=========================== */
.textual content {
  place: absolute;
  prime: 200px;
  left: 100px;
  remodel: rotate(-90deg);
}

.textual content h1 {
  font-size: 120px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -10px;
  margin-bottom: 20px;

  place: relative;
  overflow: hidden;
  top: 150px;
  width: 600px;
}
.textual content h1 .hidetext {
  place: absolute;
}

.textual content h2 {
  place: absolute;
  prime: 40px;
  left: -80px;
  shade: #EFDE74;
  z-index: -1;
  font-size: 150px;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.textual content h3 {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;

  place: relative;
  overflow: hidden;
  top: 80px;
}
.textual content h3 .hidetext {
  place: absolute;
}

.textual content p {
  width: 200px;
  font-size: 12px;
  margin-top: 30px;
  font-weight: 500;

  place: relative;
  overflow: hidden;
  top: 110px;
}
.textual content p .hidetext {
  place: absolute;
}


/* SPONSOR
=========================== */
.sponsor {
  place: absolute;
  proper: 100px;
  backside: 100px;
  text-align: heart;
}
.sponsor img {
  width: 200px;
  remodel: rotate(-90deg);
}
.sponsor p {
  margin-top: 20px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  remodel: rotate(180deg);
}
Enter fullscreen mode

Exit fullscreen mode

Let’s study our webpage:

Right here are some things we are able to see:
3 squares animate from backside to prime, to disclose the webpage. Right here, we already know they are going to be 3 divs to have a place absolute, after which we use the “to” technique to animate between them.
Navbar above, animate from prime to backside, with modified opacity.
Textual content on the facet adjustments from 0 to 1 and will increase in top.

For the three squares, we create 3 divs to characterize them.

    <div class="overlay first"></div>
    <div class="overlay second"></div>
    <div class="overlay third"></div>
Enter fullscreen mode

Exit fullscreen mode

Then we type accordingly within the kinds.css

/*===========================  OVERLAY =========================== */
.overlay {
  place: absolute;
  width: 100%;
  top: 100%;
  prime: 0%;
  z-index: 99;
}
.first {
  background: #efde74;
}
.second {
  background: #efde74;
  left: 33.3%;
}
.third {
  background: #efde74;
  left: 66.6%;
}
Enter fullscreen mode

Exit fullscreen mode

Now we are able to arrange our animation with GSAP:

 TweenMax.to(".first", 1.5, {
      delay: .5,
      prime: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".second", 1.5, {
      delay: .7,
      prime: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".third", 1.5, {
      delay: .9,
      prime: "-100%",
      ease: Expo.easeInOut
    });
Enter fullscreen mode

Exit fullscreen mode

Discover that the delay has been diverse by .2 to have that impact. You would additionally use the staggerFrom() technique to range between the youngsters and see how the impact varies.

Subsequent, we animate our navbar and numerous texts.
Right here’s a couple of issues we are able to see:
3 squares animate from backside to prime, to disclose the webpage. Right here, we already know they are going to be 3 divs to have a place absolute, after which we use the “to” technique to animate between them.
Navbar above, animate from prime to backside, with modified opacity.
Textual content on the facet adjustments from 0 to 1 and will increase in top.

For the three squares, we create 3 divs to characterize them.

Then we type accordingly within the kinds.css
/*=========================== OVERLAY =========================== */
.overlay {
place: absolute;
width: 100%;
top: 100%;
prime: 0%;
z-index: 99;
}
.first {
background: #efde74;
}
.second {
background: #efde74;
left: 33.3%;
}
.third {
background: #efde74;
left: 66.6%;
}

Now we are able to arrange our animation with GSAP:
TweenMax.to(“.first”, 1.5, {
delay: .5,
prime: “-100%”,
ease: Expo.easeInOut
});

TweenMax.to(".second", 1.5, {
  delay: .7,
  prime: "-100%",
  ease: Expo.easeInOut
});

TweenMax.to(".third", 1.5, {
  delay: .9,
  prime: "-100%",
  ease: Expo.easeInOut
});
Enter fullscreen mode

Exit fullscreen mode

Discover that the delay has been diverse by .2 to have that impact. You would additionally use the staggerFrom() technique to range between the youngsters and see how the impact varies.

Subsequent, we animate our navbar and numerous texts.
// NAVBAR
TweenMax.staggerFrom(“.navbar div”, 1.5, {

  delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
}, 0.08);

// MEDIA
TweenMax.staggerFrom(".media ul li", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-60",
  ease: Expo.easeInOut
}, 0.08);

// TEXT
TweenMax.from(".textual content h1 .hidetext", 1.5, {
  delay: 1,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".textual content h3 .hidetext", 1.5, {
  delay: 1.2,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".textual content p .hidetext", 1.5, {
  delay: 1.3,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".textual content h2", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-10000",
  ease: Expo.easeInOut
});

// SPONSOR
TweenMax.from(".sponsor img", 1.5, {
  delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});

TweenMax.from(".sponsor p", 1.5, {
  delay: 1.6,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});
Enter fullscreen mode

Exit fullscreen mode

Lastly, for the distortion impact, we’ll make use of the hover-effect library.
You will get the hover-effect library right here, then copy the code, create a brand new file known as hover-effect.umd.js and paste the code.
Then we import our newly created script:
<!– hover-effect js –>

Now, how our distortion impact works, is that the library will create a blur of the present picture, then transition right into a displacement picture we might want to present, then lastly transition to a blurred model of the second picture to be transitioned into, after which set the picture from a blurred state to a daily state.
So first, we create a div which can characterize our distortion picture container.
<!– DISTORTION =============================== –>

So we have to present a displacement picture, (which ought to appear like a blur impact for comfort), after which the 2 photos to transition between:
new hoverEffect({
dad or mum: doc.querySelector(‘.distortion’),
depth: 0.2,
image1: ‘./photos/01.png’,
image2: ‘./photos/02.png’,
displacementImage: ‘./photos/diss.png’,
imagesRatio: 340 / 300

})

And that places collectively the distortion impact with some animation.
Thanks for studying.

   // NAVBAR
    TweenMax.staggerFrom(".navbar div", 1.5, {

      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    }, 0.08);

    // MEDIA
    TweenMax.staggerFrom(".media ul li", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);

    // TEXT
    TweenMax.from(".textual content h1 .hidetext", 1.5, {
      delay: 1,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".textual content h3 .hidetext", 1.5, {
      delay: 1.2,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".textual content p .hidetext", 1.5, {
      delay: 1.3,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".textual content h2", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-10000",
      ease: Expo.easeInOut
    });

    // SPONSOR
    TweenMax.from(".sponsor img", 1.5, {
      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });

    TweenMax.from(".sponsor p", 1.5, {
      delay: 1.6,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });
Enter fullscreen mode

Exit fullscreen mode

Lastly, for the distortion impact, we’ll make use of the hover-effect library.
You will get the hover-effect library right here, then copy the code, create a brand new file known as hover-effect.umd.js and paste the code.
Then we import our newly created script:

  <!-- hover-effect js -->
  <script src="https://style-tricks.com/workshub/./hover-effect.umd.js"></script>
Enter fullscreen mode

Exit fullscreen mode

Now, how our distortion impact works, is that the library will create a blur of the present picture, then transition right into a displacement picture we might want to present, then lastly transition to a blurred model of the second picture to be transitioned into, after which set the picture from a blurred state to a daily state.
So first, we create a div that can characterize our distortion picture container.

  <!-- DISTORTION =============================== -->
    <div class="distortion"></div>
Enter fullscreen mode

Exit fullscreen mode

So we have to present a displacement picture, (which ought to appear like a blur impact for comfort), after which the 2 photos to transition between:

    new hoverEffect({
      dad or mum: doc.querySelector('.distortion'),
      depth: 0.2,
      image1: './photos/01.png',
      image2: './photos/02.png',
      displacementImage: './photos/diss.png',
      imagesRatio: 340 / 300   
    })
Enter fullscreen mode

Exit fullscreen mode

And that places collectively the distortion impact with some animation.

Thanks for studying.

Initially written by King Somto for JavaScript Works

Add a Comment

Your email address will not be published. Required fields are marked *