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

The script that will jump to pages and sections with the id on anchor click with #

GSAP

If you want to make the browser go to a particular section with the id within the page or some different page if the id is not found, then you can do it with the following script. I used it in one of my projects and it is working fine. I am also using it with the...

Replace an SVG image by SVG code – Script

Code Snippets

Here is a script that will help you replace an image tag with an SVG extension image file with SVG code. This can be helpful when you don’t want too much SVG code inside your HTML file. (function () {...

Outlined Text With CSS

CSS

Here is an example of creating an outlined/stroked text with the help of CSS. See the Pen Outlined Text by Puneet Sharma (@webdevpuneet) on CodePen.