jo87casi
jo87casi's Achievements
0
Reputation
-
Ok here is the simplified 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.
-
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.
-
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: https://codepen.io/sdras/pen/e028b7597cadf29b6d7eefcbc48d999c