Jump to content
GreenSock

jo87casi

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

Recommended Posts

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: kS2hs.png

   

 <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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Ok here is the simplified codepen:

See the Pen JmMVKq?editors=1111https: 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.

Link to comment
Share on other sites

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.

:)

 

  • Like 2
  • Thanks 1
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.
×