Sanskar Tiwari
IndianAppGuy Blog

IndianAppGuy Blog

Add Animated Scroll Arrow Bouncing

Add Animated Scroll Arrow Bouncing

Sanskar Tiwari's photo
Sanskar Tiwari
·Aug 29, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Today i added arrow down jump animation which will find in many webpages promoting to the visitor to scroll down the page.

You can customise it as you like. You can check demo at blurweb.app

Step1 : Add the code to the html

 <div style="display: flex; justify-content:center; margin-top: 42px;">
                        <div class="arrow-container">
                            <div class="arrow-down"></div>
                              <div style="margin-top: 6px;" class="arrow-down"></div>
                        </div>
                    </div>

the outermost div here is just to center the arrow and add margin from top you can get rid of it if you like.

Step2: Add styling

Now i am expecting you have a .css file already connected to your html file if not create a .css file and and import it in html like below

<link rel="stylesheet" href="mystyle.css">

then add the below styling to your css page

.arrow-container {
  width: 15px;
  /* cubic-bezier-easing = sine / mehr Beispiele: https://easings.net/ */
  animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  cursor: pointer;
  height: 20px;
}

.arrow-down {
  height: 2px;
  background: #373638;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  border-radius: 5px;
}

.arrow-down:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 100%;
  border-radius: 5px;
  background: #373638;
  transform: rotate(-90deg);
  transform-origin: 0% 100%;
}

@keyframes bounce {
  50% {
    transform: translateY(-10px);
  }
}

hope you fine this helpful, i share what i learn to checkout later when i forgot (yes that happens) if you like to learn with me do subscribe to newsletter

see you in the next one.

 
Share this