Select Page

useGSAP REACT Hook

Here is an example of using the GSAP library in REACT using the useGSAP Hook for seamless animation. DEMO See the Pen useGSAP by Puneet Sharma (@webdevpuneet) on CodePen. import React from “https://esm.sh/react”; import ReactDOM from...

React Hooks: useEffect

Here is a simple counter increase decrease example for React Hook – useEffect. useEffect runs at lease once and everytime dependency array changes when the component is loaded or mounted. See the Pen Codepen React Starter Template with Babel Transpiler by Puneet...
Apache ECharts – Examples

Apache ECharts – Examples

Stacked Bar Chart with Gap – Apache ECharts I created an example to create a gap between stacked bars using Apache ECharts. See the Pen Bar Charts with Two datasets – using Apache ECharts by Puneet Sharma (@webdevpuneet) on CodePen. Donut Chart with Apache...
Slides Layout

Slides Layout

Here is a simple responsive example with a demo and code for slide layout. You can use this as a starter template to achieve any demanding animation-heavy slides. DEMO See the Pen Slides Layout by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

Responsive Media Queries – CSS

@media (max-width:1800px) { } @media (max-width:1400px) { } @media (max-width:1300px) { } @media (max-width: 1199.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { } @media (max-width: 575.98px) {...
JavaScript to equalize element heights

JavaScript to equalize element heights

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...