Making SVGs of the animation responsive and accurately positioned using GSAP

[Mehnaz Ahmed Khan]

Hello everyone,

 

I am absolutely a newbie in GSAP and I got into a trouble of positioning my SVGs that will be responsive according to display width and height. To get an idea about my struggle please take a look at this video : https://drive.google.com/file/d/1uuVntyP19ZIgi2_hrA00eDwluOAahKKL/view?usp=sharing

I used ScrollTrigger and GSAP Timeline to position those SVGs according to the panel (Each Page).

 

I could not upload my code on CodePen because it does not allow me to upload assets on a free version. Instead, I uploaded my code on Code Sandbox. Here's the link: https://codesandbox.io/s/vigilant-goldberg-uncs25?file=/src/assets/script/script.js:28899-28916

 

However, this code doesn't seem to work on Code Sandbox either. To run the code, one needs to download the code and run it on their editor.

 

GitHub Link of my code: https://github.com/MK-Khan123/svg-animation

Also you'll have to use Live Sass Compiler extension to run the .scss file.

 

My question is how can I position the SVGs (according to the video) that will be responsive and it won't break if I change width or height of the display. Is there any better way of using any other tools of GSAP other than GSAP Timelines?

The display size where the SVGs position doesn't break; Width: 1903, Height: 937

 

I know I'm asking too much for a help and if the kind of help I'm asking for is irrelevant, then please let me know, I'll remove the post. And pardon my mistakes if I could not ask for help in a proper way.

[mvaneijgen]

Hi @Mehnaz Ahmed Khan welcome to the forum!

 

A minimal demo is not your whole layout as it is, but just some color divs with just a bare minimum of code. When creating a minimal demo it forces you to think of what the problem is and it helps us only focus on the parts that matter.

 

I encourage you to try and make a minimal demo on Codepen with just the problem, no text, just a few circles you are trying to animate (you can add the SVG code directly to HTML, so you don't need to add any assets) and a simple version of your animation.

 

What I think is that when you remove ScrolllTrigger/GSAP you'll face the same issue, because the circles are not aware or other circles. What I would do is have one SVG file with all the circles in it (or at least the the once that need to line up and animate them within that SVG, that way the viewBox is always the same (no matter the size), so you have a fixed space to work in and will it be easier to have them always line up.

 

 

[Mehnaz Ahmed Khan]

Hello @mvaneijgen,

 

Sorry for the late reply. I have added few codes that I think might be of help to understand the kind of struggle I'm going through. Can you please suggest me how I can position the SVGs on the view port so that the alignment won't break and it will be responsive.

 

CodePen link: 

See the Pen LYdXeOd by mehnaz_dev (@mehnaz_dev) on CodePen

 

Thank you.

[Mehnaz Ahmed Khan]

On 8/15/2022 at 4:18 PM, mvaneijgen said:

What I would do is have one SVG file with all the circles in it (or at least the the once that need to line up and animate them within that SVG, that way the viewBox is always the same (no matter the size), so you have a fixed space to work in and will it be easier to have them always line up.

In my case there is one blue circle that starts from the top of the page and it goes down till the end of the website. The other grey colored circles appear in each page (either from left or right). These grey colored circles are in a separate div inside a different section. It won't be possible for me to line them up and animate them within a single SVG. Is there any other way that I can achieve what you're suggesting?

[mvaneijgen]

14 hours ago, Mehnaz Ahmed Khan said:

It won't be possible for me to line them up and animate them within a single SVG

Why not? That is probably the only solution I could think of to fix your issue. Just add all the shapes you NEED to line up at all times to the same SVG, this way they share the same space and they will ALWAYS line up no matter the screen size

 

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