Webdevpuneet - Freelance Web Developer

GSAP – Play SplitText Animation on Viewport

Here is a code to play split text animation on a text with the class “.split-text” whenever it is visible in the viewport. // Play SplitText Animation on Viewport function playAnimation() { var tl = gsap.timeline(), mySplitText = new...

Code for GSAP SplitText plugin

Code Snippets, GSAP

This is just a code snippet. I will add a demo when I get time. gsap.registerPlugin(ScrollTrigger, SplitText); // Register plugin first // Timeline for split text var tl = gsap.timeline(), mySplitText = new SplitText(“.splitText”, { type:...

Toggle class on Viewport using GSAP scrollTrigger plugin

GSAP

This is just a code. Will add a demo soon… // Add active class to all element on viewport const toggleActiveOnViewport = () => { let elements = $(“.toggleActiveOnViewport”); elements.each(function() { let element = this; ScrollTrigger.create({...

Format the tick labels on the axis to add ‘k’ to the numbers that are above 1000

JavaScript

In Chart.js, if you want to format the tick labels on the axis to add ‘k’ to the numbers that are above 1000, you can achieve this using the callback function in the ticks options of the chart’s configuration. Here’s an example of how you can...

Replace all images with .svg extension with SVG code and retain image’s classes

Code Snippets

Here is a jQuery code snippet that will replace all your images with the SVG codes and retain all classes that images have, getting added to the SVG class attribute. // Replace image tag with svg const replaceWithSVG = () => { let imgSelector =...