sinobra Posted January 18, 2021 Share Posted January 18, 2021 I have seen lots of examples where entire objects (paths) are moved. But is it possible to modify some points along a path? For example if I have a line with a path, d:"M 92.0,40.0 171.0,40.0" would it by possible the change the endpoint to something like: d:"M 92.0,40.0 171.0,90.0" Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 18, 2021 Solution Share Posted January 18, 2021 @sinobra Welcome to the forums. Sure, using the AttrPlugin baked into GSAP's core, that is pretty much doable. Core plugins are similar to plugins for GSAP in their structure but are included in GSAP's core and don't have to be loaded using gsap.registerPlugin(). You can think of them as just a part of GSAP. ...just to say so you wouldn't even have to load anything else but e.g. the gsap.min.js for using it. See the Pen 85ce08b334c1c324bb15c092277f2e8a by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 18, 2021 Share Posted January 18, 2021 For more complicated path changes, especially for paths with a different number of or order of commands of points, use the MorphSVG plugin 2 Link to comment Share on other sites More sharing options...
sinobra Posted January 18, 2021 Author Share Posted January 18, 2021 Thanks for the tip. But the documentation says that the AttrPlugin is used for modifying numeric attributes, the 'd' attribute is a string. Link to comment Share on other sites More sharing options...
akapowl Posted January 18, 2021 Share Posted January 18, 2021 Aren't you live in like a minute? @ZachSaucier 😅 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 18, 2021 Share Posted January 18, 2021 1 minute ago, akapowl said: Aren't you live in like a minute? @ZachSaucier 😅 They're running late 1 Link to comment Share on other sites More sharing options...
sinobra Posted January 18, 2021 Author Share Posted January 18, 2021 Thanks guys! The codepen solution explains everything. 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