meixuan Posted February 12, 2020 Share Posted February 12, 2020 How to scale path to fit screen? ( Thanks again to Blake) Link to comment Share on other sites More sharing options...
OSUblake Posted February 12, 2020 Share Posted February 12, 2020 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; 4 1 Link to comment Share on other sites More sharing options...
meixuan Posted February 12, 2020 Author Share Posted February 12, 2020 Thank you very much. Link to comment Share on other sites More sharing options...
meixuan Posted February 12, 2020 Author Share Posted February 12, 2020 Thanks again. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 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 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 12, 2020 Share Posted February 12, 2020 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 ? ¯\_(ツ)_/¯ 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 12, 2020 Share Posted February 12, 2020 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 4 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 12, 2020 Share Posted February 12, 2020 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. 4 1 Link to comment Share on other sites More sharing options...
meixuan Posted February 13, 2020 Author Share Posted February 13, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now