Mesh Gradient Animation Using Gsap

Based on A recent Tutorial By Mizko where he show how we can easily create mesh gradient animation inside figma, now the question is how we can easily create almost same animation in inside actual web page.

For duplicating the exact animation we can take help of an awesome JavaScript animation library gsap.

Note: This tutorial require beginner level understanding of gsap, pls refer to awsm gsap intro by Gary Simon here

P.S: This is very first Tutorial I am writing here so apologize if it has so many formatting mistakes or something not clear to understand

Step 1

for Initial step, refer to this Mizko tutorial and create SVG shape for your desired mesh gradient, note: don’t add layer blur in figma yet (we are going to do that inside our webpage using

Step 2

Export the created shape in your project folder.

Step 3

Copy your exported svg code inside your html web page, which should look something like below
<svg width=”1920" height=”1080" viewBox=”0 0 1920 1080" fill=”none” xmlns=”http://www.w3.org/2000/svg">
<path d=”M275.5 962C1442 1278 2198.05 148.648 1891.96 -26.5919L1483.45 -2.86102e-05H1174L1460.15 164.046C1221.68 316.383 383.475 877.391 275.5 962Z” fill=”url(#paint0_linear_181_30)”/>
<path d=”M734 714.5C1514.48 569.403 1898.31 250.403 1920 111.937V1080H1104.98L546.489 778.915C332.239 815.969 -46.4763 859.597 734 714.5Z” fill=”url(#paint1_linear_181_30)”/>
<path d=”M0 491V0H1250.07L1259.71 12.7377C1832.04 11.1937 1064.08 559.494 634 788C499.031 726.628 298.24 467.833 224 472.5C136.5 478 108.764 475.657 93.5 496.5L0 491Z” fill=”url(#paint2_linear_181_30)”/>
<path d=”M437.406 566.543C75.0872 391.655 274.114 501.613 0 480.255V1080H1323.98C1257.33 1063.91 641.17 690.497 437.406 566.543Z” fill=”url(#paint3_linear_181_30)”/>
<defs>
<linearGradient id=”paint0_linear_181_30" x1=”1267.53" y1=”7.05231e-05" x2=”1267.53" y2=”772.752" gradientUnits=”userSpaceOnUse”>
<stop stop-color=”#F8AC7D”/>
<stop offset=”1" stop-color=”#BE58D7"/>
</linearGradient>
<linearGradient id=”paint1_linear_181_30" x1=”1129.47" y1=”717.169" x2=”1129.47" y2=”1080" gradientUnits=”userSpaceOnUse”>
<stop stop-color=”#BD57D6"/>
<stop offset=”1" stop-color=”#563EE1"/>
</linearGradient>
<linearGradient id=”paint2_linear_181_30" x1=”736.201" y1=”-1.61396e-05" x2=”780.07" y2=”885.255" gradientUnits=”userSpaceOnUse”>
<stop stop-color=”#FBE9B6"/>
<stop offset=”1" stop-color=”#FFC3B4"/>
</linearGradient>
<linearGradient id=”paint3_linear_181_30" x1=”661.989" y1=”480.255" x2=”641.588" y2=”1250.65" gradientUnits=”userSpaceOnUse”>
<stop stop-color=”#FBFCFA”/>
<stop offset=”0.958333" stop-color=”#B7CDF8"/>
<stop offset=”1" stop-color=”#C4C4C4" stop-opacity=”0"/>
</linearGradient>
</defs>
</svg>

Step 4

Below is a small set of styles we can use to have our svg stretched to whole viewport of our window (do note its not mobile friendly for now)

html, body {
width: 100%;
height: 100%;
}
body{
margin:0;
overflow: hidden;
}
html{
height: 100%;
}
svg {
position: absolute;
width: 100%;
height: 100%;
top:0;
right: 0;
left:0;
transform: scale(1.2);
}

Step 5

Add Gsap through cdn or via standalone download for reference see documentation we are going to add gsap via cdn for this simple task purpose.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

Step 6

Now starts the animation part, for this very simple task we are going to target every ‘path’ element of our svg code (from step 3) and add basic tween (animation) to it, write your js code below the cdn link we added in Step 4

gsap.to(‘path’, 0.5, {
y: -10,
x:-150,
scale:1.2,
ease: Power1.easeInOut,
filter:’blur(20px)’,
onComplete: () => repeating.play()
});

What’s happening above is we are initially setting every path element located in our html file (coming from the svg code) and moving each path to negative 10 (upside) and negative (150) to the left side with ease, and we are blurring it upto 20px (remember we don’t made it blurry inside figma? we did it here) and onComplete is a function which should execute after initial animation

onComplete function below :

const repeating = gsap.fromTo(‘path’, 5, {
y: -10,
x:-150,
filter:’blur(20px)’,
scale:1.2,
}, {
ease: Power1.easeInOut,
y: 0,
x:0,
scale:1,
stagger:1,
immediateRender: false,
repeat: -1,
filter:’blur(40px)’,
yoyo: true,
paused: true
});

in the above function , we are initially setting the first animation we did in Step 5 and after that we are setting next movement for our path elements, here we are using some special attributes from Gsap like stagger:1 which actually means every path element will be animating after 1s so they are not moving at same moment but at different times so we have different path moving at different times so we can have more unique animation.

Step 6 (Optional)

I’ve added initial Opacity for body tag to 0 so our web page don’t get a jerky effect, we then making body visible when page is loaded via below code

// Make body visible as first animation
gsap.to(‘body’,{opacity:1,delay:0.5,ease:Power1.easeInOut})

Also here’s a complete html file, please readjust any properties , you can also try to play with targeting each path element separately.

One thing I noticed is when the above code run inside browser the GPU spikes up so this is not something very optimized so just try it for basic learning purposes, happy tweening!