SVG width doesn't adjust on window resize

[Elicrespo]

Hey guys,

 

On window resize, the SVG and the animation width don't dynamically update, or I am missing something. How can I fix this? 

 

Here is the webflow live page connected to codepen: https://photo-spread-gsap-flip.webflow.io/stfall

 

Thank you 

See the Pen NWeWrJq by elicrespo (@elicrespo) on CodePen

[Cassie]

Yep! You're missing the best bit about SVG. 

It's already responsive. Hooray!

viewBox="0 0 550 800" - this is the unit space you're working in. You don't need to calculate viewport widths, elements inside an SVG exist in SVG space, not browser viewport land. Your SVG is 55O SVG UNITS wide - always. No matter how wide the browser window is.

If the SVG itself is 50px wide, it will be 550 SVG units wide.

If the SVG itself is 500000px wide it will still be 550 SVG units wide.

All you have to do is set the SVG itself to be 100vw (or whatever width you want it to be) and then animate elements inside it based on the viewBox.

That's all. You've fallen into an over-engineering trap. 🙃

 

viewBox="0 0 550 800" // width in SVG units is 550

tl.to("#pattern-1 rect", {
    x: 550, // so animate by 550 SVG units. Simples.
    ...
  })

 

---

 

Also, big warning about this part - You're creating a timeline, then adding some tweens to it. Ok. All good....

But then you're adding two more tweens on every resize event. Resize events don't just fire when you finish resizing the browser, they fire CONSTANTLY. You're adding hundreds of tweens on resize here. 

 

var tl = gsap.timeline({
  duration: 1,
  ease: "power1.inOut"
});

function staggerPix (){
  let innerWrapper_width = innerWrapper.offsetWidth;
  let distance = innerWrapper_width - patternW;
  
  tl.to("#pattern-1 rect", { 
    x: distance, 
    yoyo: true, 
    repeat: -1,
    stagger: {
      each: 0.1,
      from: "random"
    },
    onUpdate: console.log("onUpdate: " + distance)
  })
  .to("#pattern-2 rect", {
    x: distance, 
    yoyo: true, 
    repeat: -1,
    stagger: {
      each: 0.1,
      from: "random"
    }
  }).progress( 0.2 );
}

staggerPix ();

$(window).on( 'resize', function() {
  // aaaaaaaah. You're adding hundreds and hundreds of tweens to the timeline on resize
  staggerPix ();
});

If I log them out you can see! How many tweens you're adding. 🔥 

 

Here's a simplified responsive version

 

See the Pen jOXOerz?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps!

 

 

 

[Elicrespo]

Hey @Cassie,

 

Thank you, that is a very informative post.

 

I didn't know I was creating hundreds of tweens, that is not good for performance. 

 

I relied on the SVG being naturally responsive, but it wasn't responsive for me in webflow, even the pen you shared above isn't responsive,  Or it is responsive but You can't see the right end of the animation. Upon window resizing in your video above, the animation gets messed up. 

 

I kept adjusting the parameters until I realized the distance is whatever viewport x width is minus the pattern width. 

 

Which also confirmed I don't need to calculate the window/container width, now the animation is contained.   

I also got rid of the timeline, it wasn't working for me here. I split them to separate tweens. Here is a responsive version, and very close to what I want to accomplish:

 

And thank you again  

 

See the Pen MWZYKOv by elicrespo (@elicrespo) on CodePen

[Cassie]

Quote

I relied on the SVG being naturally responsive, but it wasn't responsive for me in webflow, even the pen you shared above isn't responsive,  Or it is responsive but You can't see the right end of the animation.

Bingo - the pen I shared was responsive, just animating too far along the x axis. 
 

Quote

Upon window resizing in your video above, the animation gets messed up. 

That video is of your demo adding lots of tweens, that's why it's messed up, conflicting animations.

 

Glad you got it to do what you were after!

[Elicrespo]

You are right @cassie.

 

I learned a lot from this one. Appreciate your help.