How to be like hello friends, many people commented and told me that you make a tutorial video on scroll animation, because the video before this was only CSS animation with skill bar but it was not animation with scroll That’s why some friends said that you make a video of animation with scroll, that’s why I made this video and now I am writing this article on it so that you people can get a better society.
Counter animation, friends, you must have seen counter animation on many websites and will also be found in many themes. When you scroll, there are two things inside that counter. The first thing is that the numeric value inside it goes from zero to its set value, you will get to see its animation. The second thing is that there is a circle inside it, it is animation from 0% to 100%, these two things happen.
We are going to do something similar in the skill bar as well, but in this, the circular key will be a horizontal bar, that will be from 0% to 100% or up to its set value. And the interesting thing is that the animation will happen with scroll, that is, when you scroll down to the skill bar section, then animation will start. You must have seen this in other websites. There was a lot of request for this, so I made a video on it.
You might like this video
Landing Page Design Using HTML,CSS & JS | Infinite Scrolling Animation | Image Zoom Effect on Click
Smooth & Beautiful Scroll Animation Using Vanilla Javascript Plugin Lax.js | Animation On Scroll
How to add animation on scroll using html, css and aos js tutorial
Scroll to section smooth scrolling like onepage website using HTML, CSS & jQuery Smooth Scroll
Scroll to target smooth scrolling using HTML, CSS & JQUERY | Smooth Scroll On Click
I have given the code of skill bar animation on scroll, you can copy it, there are two ways to copy this code in your lock file. One you can copy the code internally and second you can also do it by creating separate css and js files.
Below I have added the HTML structure, copy it in a file named index.html. After that you copy the code given below step by step.
index.html In this one file I have written the complete code and in that, I will explain to you how I have done “Skill bar animation on scroll“.
In the HTML structure, I have taken a div named wrap, inside it, there is 4 div’s named bar. Inside it is a div named h3 tag and thumb. In which the name of the skill is written inside the h3 tag and percentage is written inside the abbr tag.
Now we will write the style in the index.html file itself inside the style tag and you will write the style tag before the end of the head tag. I have used gradient color inside style, given gradient in box-shadow, set width according to percentage with the help of nth-child. I have shown its code below.
The entire Greensock/GSAP code is written inside a script tag and you need to add a script tag before the end of the body. And on top of that, you have to add a library of gsap and scrolltrigger. Inside script tag I have called gsap, in this, I have given a duration of 3 seconds, stagger is given as 0.1 seconds, ease power2.easeInOut and set target in scroll trigger. code i have given below.
Below I have attached the related plugin link, you will click on that link then you will be taken to that website/demo/documentation page and you can see from the same, I hope you will help this plugin a lot.
Progress bar js plugins
I hope that you have liked this article and this video of mine and have made a video according to your request and I hope that you will be satisfied with this video and article. Do share this video and article with your friends and subscribe to LearnDesign youtube channel. Have a good day.
