JavaScript to equalize element heights

JavaScript

JavaScript to equalize element heights To achieve equal heights for child elements with the class equalize within a parent element with the class equalize-columns, you can use CSS and possibly a bit of JavaScript. One common approach is using Flexbox or Grid layout...

Custom Range Sliders

UI Components

Here is a custom range slider I created to use gradients in the slided part and the thumb itself. DEMO See the Pen Custom Range Sliders by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”slider”> <span...

Customized Pie Chart – Using Apache Echart

UI Components

Here is a simple example of creating a customized pie chart using the Apache Echart library. DEMO See the Pen Pie Chart Using Echart by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div id=”piechart1″ style=”width:...

Customized Line Area Chart with customized Tooltip – Apache ECharts

UI Components

Here is an example with a demo to create a customized line area chart with gradient and customized x-axis labels with customized tooltips. DEMO See the Pen Line Area Chart – using Apache Charts by Puneet Sharma (@webdevpuneet) on CodePen. CODE HTML <div...

Animating Blocks

CSS Animations, JavaScript

Here is a cool example of animating blocks with no adjacent blocks active. See the Pen Animating Blocks by Puneet Sharma (@webdevpuneet) on CodePen.

Impressive rocket animation created with GSAP

GSAP

Here is a very nice rocket animation that burst-ignites than gains momentum and finally slows down and stops ignition. See the Pen Rocket Animation with GSAP by Puneet Sharma (@webdevpuneet) on CodePen.

Text Animation using GSAP

GSAP

Here are some awesome examples of text animations achieved with the help of GSAP’s split text plugin. See the Pen GSAP Text Animation by Puneet Sharma (@webdevpuneet) on CodePen. See the Pen GSAP Text Animation Demos by Puneet Sharma (@webdevpuneet) on CodePen....