Bookmark-Interaction-Animation-Using-Gsap

Bookmark Interaction Animation | Html, Css And Gsap

How to make bookmark animation with html css and gsap. There are various animation types you can create on your website like a hover effect, which occurs when a user hovers over the bookmark, and animation when they click the bookmark. A hover effect begins when the user moves their cursor over an item, triggering a change in the environment of its surroundings. After hovering for a few seconds or using a mouse button to trigger it, the user's location will start to move toward the item. That way, it looks like a person is touching it with their hand.

This article will show you how to make a bookmark interaction animation using html, css and gsap. A bookmark animation is a type of animation that will animate any item that is being added to or removed from the bookmark toolbar. This can be used when a user is adding a new bookmark or removing one. In this tutorial, we will learn how to create the animation using html, css and gsap.

Html, Css, and Gsap are the most popular front-end development technologies. They are used to develop interactive web pages with animation web design capabilities.

For more button animations you can follow the button playlist.

You can read interesting articles on web development.

01. HTML
02. CSS
03. Script
04. Output
05. Youtube Video
06. Source Code

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Bookmark Interaction Animation Using Gsap | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<button class="btn" onclick="bookmark()">
  <div class="icon-container first-icon">
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 180" version="1.1">
      <path class="bookmark" d="m 13.78365,52.827266 c -6.5149597,0 -11.7594881,5.245044 -11.7594881,11.760007 v 60.391147 c 0,3.50128 0.00434,3.46826 -0.039791,8.78447 l 26.4981241,-24.61688 26.004467,24.59415 c 0.08253,-5.26828 0.07559,-5.27302 0.07559,-8.76174 V 64.587273 c 0,-6.514963 -5.245047,-11.760007 -11.760007,-11.760007 z" />
    </svg>
  </div>
  <div class="icon-container second-icon">
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 180" version="1.1">
      <path class="bookmark" d="m 13.78365,52.827266 c -6.5149597,0 -11.7594881,5.245044 -11.7594881,11.760007 v 60.391147 c 0,3.50128 0.00434,3.46826 -0.039791,8.78447 l 26.4981241,-24.61688 26.004467,24.59415 c 0.08253,-5.26828 0.07559,-5.27302 0.07559,-8.76174 V 64.587273 c 0,-6.514963 -5.245047,-11.760007 -11.760007,-11.760007 z" />
    </svg>
  </div>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS:

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

body{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  position: relative;
  width: 150px;
  height: 150px;
  border: none;
  outline: none;
  background: #008B81;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  perspective: 1000px;
  overflow: hidden;
  transition: box-shadow 250ms ease;
  transform-style: preserve-3d;
}

svg{
  width: 100%;
  height: 100%;
}

.bookmark{
  opacity: 1;
  fill: #FFF;
  fill-opacity: 1;
  stroke: #FFF;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
  paint-order: normal;
}

.btn .icon-container{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.btn .icon-container.second-icon{
  transform-origin: top;
  transform: rotateX(90deg);
}

.btn .icon-container.second-icon svg .bookmark{
  fill: #000;
  stroke: #000;
  stroke-width: 5px;
}

.btn:active{
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

SCRIPT:

var btn = document.querySelector("button");
var t = new TimelineMax({paused: true});

t.to(".icon-container.second-icon", 0.8, {
  transform: "rotateX(0deg)",
  ease: Bounce.easeOut
});

function bookmark(){
  t.reversed(!t.reversed());
  if (t.reversed()) {
    t.revers();
  }
  else{
    t.play();
  }
}

Output:

Bookmark-Interaction-Animation-Using-Html-Css-Gsap

Youtube Video:

We also made a youtube video for "Sort Alphabetically Html Unordered Elements Using JavaScript", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Archive