Webdevpuneet - Freelance Web Developer

Fade-in animation using scrollTrigger – GSAP

Here is a function that you can initiate to fade in up elements with class “fade-in” on viewport. const initFadeInAnimation = () => { const fadeElements = document.querySelectorAll(“.fade-in”); fadeElements.forEach((element) => {...

GSAP – Play SplitText Animation on Viewport

GSAP

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