SVG animation along a path is never aligned to the path.

jo87casi · October 16, 2018

I'm trying to figure out, how to animate a scalable(!) vector graphic along a motionpath.
So far i tried the greensock libraries and css animation. But the animation never fits on the path of the svg i painted. It animates in the right shape but never in the right solution.

Imagine, there is a map and a balloon graphic shall move along a path over the map. The movement works in the correct shape but the "resolution" never fits. Hope you understand what i mean.

I got a svg and i painted a new path with sketch inside the svg. The Svg was placed in a html skeleton.

Click here to see a screenshot of the Path in Sketch:

 <path
         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         d="M 889.35083,666.57459 C 842.86602,618.33564 487.65193,252.59668 487.65193,252.59668 l -28.06629,187.69337 95.60082,149.10221 188.57045,17.54144 z"
         id="path4477"
         inkscape:connector-curvature="0" />

I'm stuck in this topic since a few weeks and i tried everything: Grouped the svg also differently, worked with different graphic programs, tried the css-smil animation, but i'm always facing the same problem: My animation is never aligned to the path.

I tried it in firefox, safari and chrome.

<html>
    <head>
    <title>balloon</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="TweenMax.js"></script>
    <script src="MorphSVGPlugin.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
      <div id="window">
        <object class="svg-content" id="map" data="Group.svg" type="image/svg+xml"></object>
        <object class="svg-content" id="balloon" data="hot-air-balloon.svg" type="image/svg+xml"></object>
      </div>
    </body>
    <script src="index.js"></script>
</html>

CSS:

#map {
      width: 100%;
      height:auto;
    }
    
#balloon{
  width: 10%;
  height: auto;
  position:absolute;
}

#window {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.svg-content {
  display: inline-block;
}

Javascript:

 var a = document.getElementById("map");
 a.addEventListener("load", function() {
      var svgDoc = a.contentDocument;
      var path = svgDoc.getElementById("path4477");
      var pfad = MorphSVGPlugin.pathDataToBezier(path, {align:"#balloon"});
      var tl = new TimelineMax();
      TweenLite.set("#balloon", {xPercent:100, yPercent:100});
      TweenMax.to("#balloon", 5, {bezier:{values:pfad, type:"cubic"}, ease:Linear.easeNone, repeat:-1});
    }, false);

Edit:

I started aligning the ballon to a circle that i painted on the map. I setted also xPercent and yPercent so that the startingpoint of the movement is on the starting position of the ballon-path. The problem now is, that the circle, the balloon is flying, is smaller than the circle i painted.

Can anybody tell me, why this is such a big problem and i'm stucked with it for days now? In the tutorials it looked so easy, eg:

See the Pen e028b7597cadf29b6d7eefcbc48d999c by sdras (@sdras) on CodePen

jo87casi · October 16, 2018

Alright, i found out that i can find the right path, by working with a matrix in the pathDataToBezier().

Now my javascript looks like:

var a = document.getElementById("map");
a.addEventListener("load", function() {
  var svgDoc = a.contentDocument;
  var path = svgDoc.getElementById("Path23");
  TweenMax.to("#balloon", 3, {
    bezier: {
      values: MorphSVGPlugin.pathDataToBezier(path,{
        matrix:[1.5,0,0,1.5,0,-50],
        align:"#balloon"}),
      type: "cubic"
    },
    ease: Linear.easeNone,
    repeat: -1,
    force3D: true
  });
});

But this way, the graphic is never scalable inside a browser. As soon i change the browsers resolution, the graphic won't fit anymore on the path.

GreenSock · October 16, 2018

Welcome to the forums, @jo87casi.

It'd would be super amazingly helpful if you provided a codepen that showed a reduced test case. I know you provided one from Sarah Drasner, but that wasn't exactly what you're doing, right? It's just really difficult to troubleshoot blind.

It'd be best/easiest if your animating element was in the same SVG as the motion path so that everything scales together. If not, you're gonna have to write CSS and/or JS to ensure that they scale in identical ways.

Remember that the path coordinates are fixed values, so you can't expect them all to dynamically shift around based on scaling, so it'd be best to just make sure that transforms are applied to the container in exactly the way you'd do with the motion path. See what I mean?

Also, I noticed you're using MorphSVGPlugin but it doesn't look like you've got a Club GreenSock membership - are you just trying it out on codepen or something? If so, that's totally fine. Just curious.

elegantseagulls · October 16, 2018

Can you provide a simplified CodePen demo for this? It's much easier to see what's going if we have some code to interact with.

GreenSock · October 16, 2018

Oh, and by the way, that codepen by Sarah Drasner wasn't working properly because it was using a really old version of GSAP that didn't support complex string parsing. If you update to 2.0.2 you'll see that it works fine.

jo87casi · October 16, 2018

Ok here is the simplified codepen:

See the Pen by JulianOestreich (@JulianOestreich) on CodePen

The problem is, that the balloon is not aligning to the line when the browser width does not equal the viewport width of the svg.

How can i make the animation scalable?

@greensock: Im working on project for my work and they have a license.

GreenSock · October 16, 2018

Is there some reason you can't put the SVGs into the same wrapper like this?:

See the Pen 1097e53a76bfac2f351cee5665ba99bf by GreenSock (@GreenSock) on CodePen

PointC · October 16, 2018

I was a little confused about the end result here too.

Most of the time you'll probably want one SVG for your animations like this. If you have multiple elements that interact with each other, it makes everything pretty simple and scales together nicely. That's not to say you can't make things work with multiple SVGs, but there aren't too many cases when it's necessary.

Just my two cents. YMMV.

Happy tweening @jo87casi and welcome to the forum.

Notifications

Messages

SVG animation along a path is never aligned to the path.

Warning: Please note

Recommended Posts

jo87casi

Link to comment

Share on other sites

jo87casi

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

elegantseagulls

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

jo87casi

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

PointC

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members