Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
meixuan

Question about scaling path

Recommended Posts

How to scale path to fit screen? ( Thanks again to Blake)

Share this post


Link to post
Share on other sites
53 minutes ago, meixuan said:

How can I pre-define a fullscreen path data?

 

Just define path data. You can scale geometry. If you created path data for a 1000 x 1000 area, and now you need to it fit a 400 x 600, you would scale the path down using these values.

 

var scaleX = 400 / 1000;
var scaleY = 600 / 1000;

 

Depending on the medium, you might have to scale every coordinate in the path. 

 

point.x *= scaleX;
point.y *= scaleY;

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

There are other ways to scale animations based on the viewport size as well. For example you could scale based on the larger or smaller viewport dimension. I write about several different approaches in my "Scaling Responsive Animations" post

 

We're happy to help if you need help with something more specific :) 

  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, ZachSaucier said:

if you need help with something more specific

 

I think @meixuan might have edited the initial post, last night it originally had a more descriptive context and included a link.

 

Unless I was dreaming GSAP ? ¯\_(ツ)_/¯

  • Thanks 1

Share this post


Link to post
Share on other sites
2 minutes ago, Shrug ¯\_(ツ)_/¯ said:

I think @meixuan might have edited the initial post, last night it originally had a more descriptive context and included a link.

 

Ha. Yeah, both posts were edited.

 

The second post about using the MorphSVGPlugin's path filter, which you really don't need to use anymore as you can define a function for canvas rendering.

 

See the Pen WYWZab by GreenSock (@GreenSock) on CodePen

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Here's an example of scaling an svg to fill the screen. The path data is based on a 100 x 100 area. The key to getting it to scale asymmetrically is with the preserveAspectRatio="none" attribute on the <svg> element.

 

Click anywhere to run the animation.

 

See the Pen BYwgBg by osublake (@osublake) on CodePen

 

 

Taken from this thread.

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Yes, I figured that since the original question had been answered, it would be inappropriate to start another one from the same post, so I deleted the following-up question. The second question was about using MorphSVGPlugin's path filter.

Thanks again for the concrete examples provided by you guys. You guys are being really helpful.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×