Pattern svg (canvas) animation on scoll

[Serban]

Hi everyone,

Can anyone help me figure out on how to do this type of animation on scroll. It is a canvas with svg patterns, and when the user scrolls it will start scaling the 1st row from a smaller size to the initial svg width and height. Not sure how to make this one work
Would really appreciate if someone can help me.

I have had an attempt, maybe it is a good start but I can't figure it out properly.

I have also break down the code into parts from the https://remote.com/global-hr/contractor-invoicing-and-payments
https://i.imgur.com/hXHepSI.mp4

HTML

<div class="sc-f1d6031c-0 hjWElG pattern-transition" from="white" to="red500">
  <canvas width="5080" height="868"></canvas>
  
  <svg width="78" height="40" viewBox="0 0 78 40" xmlns="http://www.w3.org/2000/svg" class="pattern duo-petal pattern-ref" style="fill: pink;">
    <path d="M39 39.9939C47.9212 39.939 60.9436 36.5061 67.7442 29.6951C74.3072 23.122 77.7258 14.2683 78 5.54268V0H76.507C66.495 0.195122 56.2148 2.82317 48.5672 10.4878C43.4911 15.5732 40.3162 21.8232 39 28.378C37.6838 21.8232 34.5089 15.5732 29.4328 10.4878C21.7852 2.82317 11.505 0.195122 1.49297 0H0V5.54878C0.280313 14.2744 3.69891 23.128 10.2558 29.7012C17.0564 36.5122 30.0727 39.9451 39 40"></path>
  </svg></div>
  

CSS

.hjWElG {
  position: relative;
  width: 100%;
  display: grid;
  margin-top: -0.5px;
  margin-bottom: -0.5px;
  background-color: #ffffff;
} /*!sc*/
.hjWElG canvas {
  width: 100%;
  height: auto;
} /*!sc*/
.hjWElG .pattern-ref {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
} 

 

document.addEventListener("DOMContentLoaded", function() {
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    const svgPath = document.querySelector('svg path').getAttribute('d');
    const patternColor = 'pink'; // Color of the SVG fill

    let pattern;
    let maxScale = 1; // Maximum scale at the bottom of the page

    // Function to draw the SVG path into a canvas pattern
    function drawPattern(scale) {
        const scaledWidth = 78 * scale;
        const scaledHeight = 40 * scale;
        const blob = new Blob([`<svg xmlns='http://www.w3.org/2000/svg' width='${scaledWidth}' height='${scaledHeight}'><path fill='${patternColor}' d='${svgPath}' transform='scale(${scale})'/></svg>`], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);

        const img = new Image();
        img.onload = function() {
            pattern = ctx.createPattern(img, 'repeat');
            updateCanvas(scale);
            URL.revokeObjectURL(url);
        };
        img.src = url;
    }

    // Function to update canvas drawing based on scroll
    function updateCanvas(scale) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = pattern;
        ctx.save();
        ctx.scale(scale, scale);
        ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale);
        ctx.restore();
    }

    // Update the canvas on scroll
    window.addEventListener('scroll', function() {
        const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
        const scale = Math.max(scrollPercent, 0.1) * maxScale; // Scale starts from 0.1 to 1
        drawPattern(scale);
    });

    // Resize canvas dynamically and redraw pattern
    window.addEventListener('resize', function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        const scale = window.scrollY / (document.body.scrollHeight - window.innerHeight) * maxScale;
        drawPattern(Math.max(scale, 0.1));
    });

    // Initial setup
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawPattern(0.5); // Start with the smallest scale
});

 

See the Pen xxeoKRB by serban (@serban) on CodePen

[mvaneijgen]

Hi @Serban welcome to the forum!

 

There is no GSAP code in your demo!? If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

When working with GSAP it is good to remember that everything starts with an animation, so if you want to make something to animate on scroll it is best to first focus on the animation at hand, then when that is done it will be trivial to hook it to ScrollTrigger or something else. 

 

Canvas always make my head spin, so I cant help you with that, but I can show you how I would build it using just the SVG elements directly. I would figure that the logic is the same if you can get the rows from the canvas element. Again this is just the animation, but there is some ScrollTrigger code commented out, so you could enable that to see how it would work in scroll. I’ve placed some comments in your JS to better explain things, please be sure to read through them! 

 

Hope it helps and happy tweening! 

 

See the Pen zYXVYdr?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Serban]

Hi @mvaneijgen,

Sorry for not being clear, I used these as a reference to build it in GSAP. But never got the chance to do it.
I have no clue how to add each line in gsap scroll in order to animate these on browser scroll just like in the https://remote.com/global-hr/contractor-invoicing-and-payments website.

I am trying to figure it out, how to do it and I prefer GSAP over canvas.

Thanks for your quick example, it is a good start, but I have to find a way to make each line move down and so to simulate the infinite grow animation while the user scrolls. Seems a little complicated, not sure yet what is the logic behind it. But probably while it grows (scales up), it also moves down slowly, so that the 1st row will continue to grow from 0 to 1.2 or 1.5. 

Thanks,

Serban

[mvaneijgen]

5 minutes ago, Serban said:

but I have to find a way to make each line move down and so to simulate the infinite grow animation while the user scrolls. Seems a little complicated, not sure yet what is the logic behind it. But probably while it grows (scales up), it also moves down slowly, so that the 1st row will continue to grow from 0 to 1.2 or 1.5. 

To me it seems there are around 11 rows on the site you share and some of the rows are already at some scale and other start from 0, so it looks like they keep growing, but there is just a finite number of rows. I also think they just scale to a final number of 1, but their initial size is just bigger then what is in my demo, but you can easily fix this by just changing the layout via CSS.

 

11 minutes ago, Serban said:

I prefer GSAP over canvas

These are not mutually exclusive, canvas is a way to draw things on the screen. GSAP doesn't draw anything it just animaties things that are a ready drawn on the screen. 

 

I've updated my pen a bit to include more rows and have more start animating from 0, to me this seems like on your reference (except they have them over lap more, which is just CSS) 

 

See the Pen zYXVYdr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen