Jump to content
GreenSock

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

Rotating and translating svg along arc

Recommended Posts

I've been using 

MorphSVGPlugin.pathDataToBezier

to get the arc's path and all have been good, but I just can't make the first "handle" (and the other handles that aren't just simple circles) rotate and move correctly. any ideas?  

Also need a nice way to move the svg dots randomly inside the half circle. 

 

Thanks in advance :)

See the Pen vjbKvW by Tomerbrosh7 (@Tomerbrosh7) on CodePen

Link to post
Share on other sites

Welcome to the forums, @TomerBrosh

 

Sorry, but I'm pretty lost in terms of exactly what you're asking here. Can you be a little more specific? I don't know what "rotate and move correctly" means in this case. Are you saying you want that thick part of the line to look like it's following the thinner line that it's sitting on? If so, that's probably easiest with DrawSVGPlugin (though you could do it as a rotation instead, but that'd require figuring out the svgOrigin or transformOrigin accordingly). 

 

As for moving things inside of the half-circle, you'd probably need to write a function that'll return randomized points inside that area and feed that into a recursive tween (one with an onComplete that calls the same function that does the same thing again). Not exactly simple, but doable. 

 

I hope that helps. Happy tweening!

  • Like 2
Link to post
Share on other sites

I'll follow the master's advice and suggest you'll be a lot better off by just setting your SVG up in a way that you only rotate your elements around the root SVG center using svgOrigin (read about svgOrigin here in this blog post: https://greensock.com/svg-tips).

  • Like 2
Link to post
Share on other sites

Couldn't figure out how to center the svgOrigin before, thought maybe something with the autoRotate:true would work. 

And for the DrawSVG, I placed it inside the gsap folder when I installed with npm, placed the bonus-files-for-npm files inside the gsap folder in the node_modules, yet I can't seem to connect TweenMax to it, it's like it doesn't even recognize drawSVG: 0... Any Ideas? 

I've been using the create-react-app package from npm also

Link to post
Share on other sites

Which route do you think you want to go with?

 

Just rotating the SVGs around a common center or usnig the DrawSVG plugin?

 

Either will probably yield some result, the difference will be how much prep work you will have to do in order to get it working.

  • Like 1
Link to post
Share on other sites

Since I also need to use DrawSVGPlugin, i'd love to get some help getting it working on my project, and since rotating each "thick part" around an svgOrigin point will be pretty difficult, I think copying the arcs and getting the layer on top to move with TweenMax.fromTo('#layer-on-top',5,{drawSVG:'0% 10%'}, {drawSVG:'90% 100%'}) would be the best way, but the TweenMax isn't recognizing the bonus-npm-files... 

Any got a setup working? since im using the create-react-app I can't really change the webpack configs to manually add the routes, and I'm sure someone figured it out... 

Link to post
Share on other sites

I've dabbed with React in the past and have had a play with create-react-app as well. It is possible to get it working. I don't remember from the top of my head (it's been over a year) but, half the headaches I had was to do with the linting of the code, not GSAP or React. It wouldn't build because of the linter.

 

There are several threads discussing React and GSAP here, I'm sure enough of them will be with create-react-app, maybe you can dig something out from there.

 

As for using drawSVG, if no one else throws an example you can follow here, I'll try and put something together for you once I have a moment.

  • Like 2
Link to post
Share on other sites
7 hours ago, TomerBrosh said:

And for the DrawSVG, I placed it inside the gsap folder when I installed with npm, placed the bonus-files-for-npm files inside the gsap folder in the node_modules, yet I can't seem to connect TweenMax to it, it's like it doesn't even recognize drawSVG: 0... Any Ideas?

 

Sounds very odd. Can you post a reduced test case so that I can see what's going on in your project? I can't imagine why you wouldn't be able to use the bonus plugins like that. Should work perfectly. 

 

Are you seeing an error? I wonder if Webpack's tree shaking is dumping the plugins inadvertently - if so, you could just reference them somewhere in your code, like:

 

var plugins = [DrawSVGPlugin, MorphSVGPlugin]; //or whatever. This is just so Webpack says "oh, it's being referenced so I shouldn't dump it"

 

  • Like 1
Link to post
Share on other sites

No errors, just nothing happening.

I've set up a git repo with a simplified version of my code, you guys care to send me your git usernames so i'll invite you?

https://github.com/TomerBrosh/gsap-premium-react (but it's private)

I've put in it only the DrawSVGPlugin and MorphSVGPlugin

 

@Dipscom if you can take a look i've invited you, just check inside src/UIContainer/index.js

https://github.com/TomerBrosh/gsap-premium-react/invitations
Link to post
Share on other sites

Hello Tomer,

 

I got your invite - I shall try to have a look on my way home today (which will be soon). Hopefully it will be something simple.

 

Stay tuned.

  • Thanks 1
Link to post
Share on other sites

Cloned your repo, installed and already ran into problems.

 

There's a couple of props you marked as required but you are not passing them into the component.

 

There's something triggering the debugger in chrome, so it freezes the running of JavaScript. It's on line 132 of 'abstract-xhr.js' - No idea what's that or what is meant to do.

 

Finally, I forgot to charge the laptop during the day. Only have 11% of the battery left, I doubt I'll be able to look any further into this tonight. By the time I get home, there will be time only to have dinner and a wash before bed.

 

:(

 

  • Like 1
Link to post
Share on other sites

Don't worry about the props and that, the problem is that with TweenMax the drawSVG didn't do nothing.

Also you probably should place the DrawSVG and MorphSVG plugins in the node_modules/gsap, I've got them in a folder inside the root folder

Link to post
Share on other sites

We just released 1.20.5, so please try updating to that and let us know if that resolves things. If you get it via NPM, it's ES modules by default. 

  • Thanks 1
Link to post
Share on other sites

Had a stab at it again this morning during the train journey.

 

The props are an issue because they stop the bundling if they are not present. I commented out to stop the error. Still having issues with the debugger in Chrome as it always freezes the page on that same line of the script mentioned earlier.

 

If I push past the pause in the debugger I can see what you are referring to: GSAP exists and works, the plugins are there but for some reason they are not producing any effects.

 

Obviously, Jack has been working on improvements and now dropped an update that might just fix it all for us.

 

See if this new version solves your issues. If it doesn't, check if you're having the debugger freeze as well, that needs to be solved before we get to look into any GSAP issue.

Link to post
Share on other sites

I've updated my repo with the new update and placed the new files.

That debugger that's freezing you though, can't find it, not in my project at least, maybe an extension? I'm seeing no debuggers or bugs, and still drawSVG does nothing. 

Link to post
Share on other sites

I see the problem. You were trying to do a drawSVG animation on a path that had no stroke! It was a filled shape, not a stroked one. It's deceiving, though, because it kinda looks like it would be a stroke just because it's line-like. 

 

You also appear to be creating overwriting tweens. You've got a TweenMax.to() on "#line-02" and you're simultaneously doing a totally different drawSVG value in this.tl (a TimelineMax). 

 

To show you that things are working, try eliminating all the tweens in componentDidMount() with this: 

TweenMax.to('#line-02', 2, { morphSVG: 'M0,0 L50,0,50,50,0,50,0,0z', ease: Linear.easeNone });

 

You should see exactly what I mean. 

 

And for the record, I was using the 2.0.0 release of GSAP and the latest bonus plugins that were posted last night (ES modules). The older ones would probably work just fine too. 

 

Does that help at all?

  • Like 1
Link to post
Share on other sites

I can confirm what GreenSock has reported.

 

It's a closed path, not a stroke. I've quickly swapped out the fill colour for a stroke and drawSVG did its trick. Obviously it looks wrong as it's not a line but a super thin polygon.

 

If you amend your SVG to not be closed paths, all should work as desired.

 

As for the debugger, that's quite odd. Something during the installation of your repo might have gone wrong and I have a broken copy of it. Downloading git repositories while tethered to a mobile phone, riding a train with patchy signal might not be  advisable.

  • Like 2
Link to post
Share on other sites

Thanks a lot guys! I'll check it right away ❤️ 

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×