Jump to content
GreenSock

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

Move elements to a specific point within a SVG

Go to solution Solved by GreenSock,

Recommended Posts

 

I have these three group elements that need to move from there current position to somewhere in the middle and bounce of each other a few times. This is part of a larger timeline, but I’ve created a demo, with just that part. 

 

In the past I’ve done this by hand, just keep tweaking the values until it feels right, but I was wondering if there is a smarter way? I was maybe thinking of creating fake elements that will be position touching eachother and using the Flip plugin to move the corresponding element to that position.

Right now I use `.getBBox()` to move the elmeents to the middle of the SVG from the respecvive position, maybe there are some magic number that would also do what I want.

 

As a side question I was wondering if it would be possible to move any element within a SVG to a specific coordinate of that SVG no matter what the transforms are of the parent group element. Now when writing this I think I’m describing the Flip plugin, but I don't see how I could make that part of a larger timeline. This animation happens somewhere in the middle of a larger timeline.

 

See the Pen OJvmeZL by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

 

That seems like the perfect candidate. I had watched the video when it came out, but completely forgot about it. There is only one issue... I can’t seem to figure it out. I’ve watched the YouTube video a few times now, but it just seems to not work. I’m wondering if you need to do something different when working with SVGs?

 

Sorry that my demo changed, but to use this feature with my original question I need to modify the SVG, but before I do that I wanted to understand how this feature worked. So in the same animation I want to do something similar, eg move all the people on the island to the middle element (ampersand/&) and for this I didn't need to modify the SVG.

 

Here is a pen where I’m trying the different functions with either relative coordinates - + or not. I’ve also tried to move the the middle of the SVG instead of the ampersand <g> element. Everything has comments to easily toggle between different settings. I can seem to move people to the same spot, but not the middle & and the location differs between islands.

 

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

 

I’ve also tried moving the elements to a div in the middle of the screen, but that also failed.

 

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

 

Link to comment
Share on other sites

Sorry to hear it didn’t work out for you. 
im not around to dig into this further for a few days. 
perhaps @GreenSock can help fill in the blanks. 
 

it might help to have a demo with just one or 2 simple shapes. 

Link to comment
Share on other sites

I noticed several problems:

  • You used getRelativePosition() but then didn't use the results as RELATIVE:
    let p = MotionPathPlugin.getRelativePosition(...);
    
    // BAD
    gsap.to(... {
      x: p.x, 
      y: p.y
    });
    
    // GOOD
    gsap.to(... {
      x: "+=" + p.x, 
      y: "+=" + p.y
    });
                

     

  • And then you did the exact opposite with convertCoordinates() (you made those relative when they shouldn't be)
  • You built your animation up-front when the elements were in a completely different position. So your timeline set up the animation when they were in one position...then you made the timeline animate things to a totally different spot, but you still used the original coordinates for positioning. 

Does that clear things up? 

 

If you still need help, please post the simplest possible example (maybe just a couple of elements and one animation). That'll greatly increase the likelihood of getting a good answer :)

  • Like 1
Link to comment
Share on other sites

Ah, my bad. I thought I had really simplified my demo already, but of course what is simple for me doesn't mean it's simple for someone who is looking at it for the first time. 

 

Yeah I knew I had some issues, that is why in my first example I had listed all possible combinations, but I had commented them out, so I could easily switch between. I see now what I was doing wrong. I need to calculated the location after the animation has played! 

 

I've fixed all the issues I could find and simplified the demo even more, but still I can't get them to move to some other element within the SVG. I'm however am able to move them to the center of the SVG and I can't figure out why the other options aren't working. 

 

 

Move to the #center group <g> element

See the Pen bGvrrQg?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

  Move to the square (#toHere) of the #center element 

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

 

 I can however move them to the center of the SVG 

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

Link to comment
Share on other sites

I appreciate the effort to minimize the demos. You clearly put in a lot of work and time and followed what GreenSock suggested.

 

However, for first-time viewers it's still a bit much to decipher what we see in the code and what is present in the svg

 

for example selectors like "#shape", "people > *", "toHere" have no descriptive relationship to what we see in the svg with a few different colored circles and a square.  In other words I can't look those selectors without digging through the svg to find them and then I have to figure out their hex fill colors or positions to further know what is what. 

 

Things get further complicated with multiple animations: animating around a path, scaling the center, then triggering an onComplete

 

As I said earlier, I'm a bit rusty on getRelativePosition() but with all the work you put in I decided it was worth my time to see if I could help and get you closer to a solution.

 

Although your project requires those multiple animations and I understand you left them in there to illustrate the complexity you needed to address, it seems to me that the heart of the problem is getting 3 circles to go to the center of another circle.

 

If we can figure that out, then we can add the other stuff.

 

I simplified the demo as much as I could and tried to make things match your approach as best as I could with a few subtle name changes.

 

Here's my attempt to get 3 red circles to go to the center of the green circle

 

See the Pen QWmMqXz?editors=1011 by snorkltv (@snorkltv) on CodePen

 

It doesn't work, but perhaps this will allow @GreenSock or anyone else to more easily see what is wrong.

 

What it does show is that all the circles can move to a relative "0,0" position but for some reason it doesn't like working with the "#greenCenter" group.

 

lastly,  please don't take my comments on your demos as a strong criticism, I'm just trying to point out how to make improvements in the future. I really appreciate the effort you put in.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • Solution

A few problems:

  1. You can't pass in selector text as the element. It expect a legitimate DOM element.
  2. This is an edge case that exposed an issue in getRelativePosition() which should be resolved in the next release. Here's a fork that loads a pre-release version with the fix in place: 

    See the Pen BardvXQ?editors=0010 by GreenSock (@GreenSock) on CodePen

You can still use convertCoordinates() instead. I wrapped the functionality into a helper function here: 

See the Pen abYyXdx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

 

@Carl thanks a bunch for the simplified demo! 🙌

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

5 hours ago, GreenSock said:

You can't pass in selector text as the element. It expect a legitimate DOM element.

Yeah, @Carl 😉 I don't like to point fingers, but that was not in the original example.

 

And indeed the new version seems to fix the issue. 

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

 

Thanks @Carl and @GreenSock for all the help!

  • Haha 1
Link to comment
Share on other sites

lol. guess I over minimalized. I will start my 15 minute "time-out" over in the moderator jail. 

happy to see this all sorted out. very cool to see the more complex version working too!

  • Haha 3
Link to comment
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.
×