Hi there!
I have this lovely animation working on every browser, except Safari, and I have no idea why. Am running the latest Timeline Max, jquery, etc. and it just will not cooperate. Am guessing somewhere in the HTML, inconsistent tags? Any help appreciated!
<html>
<body>
<svg id="path_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1919px" height="498px" viewBox="0 0 1140.059 296" enable-background="new 0 0 1140.059 296" xml:space="preserve">
<path fill="none" stroke="#050101" id="flypath" stroke-miterlimit="10" d="M0,13c0,0,84-16,154,21s145,108,173,125s142,80,316,46
s277-19.173,355,9.913S1140.059,291,1140.059,291" />
</svg>
<h1>THIS IS THE HEADING</h1>
<img src="https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png" id="paperplane" width="150" />
</body>
</html>
$(function() {
//cache the repeated variables
var tl = new TimelineMax({repeat:-1}),
plane = $("#paperplane");
var bezierData = MorphSVGPlugin.pathDataToBezier("#flypath");
var bezierDataFiltered = [];
var path_width = $("#flypath").outerWidth();
var path_height = $("#flypath").outerHeight();
var path_svg_width = document.getElementById('path_svg').getBBox().width
var path_svg_height = document.getElementById('path_svg').getBBox().height;
$("#path_svg").hide();
var width_enlargement_factor = path_width/path_svg_width;
var height_enlargement_factor = path_height/path_svg_height;
console.log ("path_svg_width: ", path_svg_width, "path_width: ", path_width, "enlargement_factor: ", width_enlargement_factor);
$.each( bezierData, function( key, value ) {
value.x = value.x*width_enlargement_factor;
value.y = value.y*height_enlargement_factor;
bezierDataFiltered[key] = value;
//console.log (value.x);
});
function PlaneFly(autoRotate) {
// bring playhead back to beginning and clear all tweens
tl.progress(0).clear()
// set the initial rotation to be close to the direction he's headed in
.set(plane, {
rotation: 0
});
//console.log (bezierData);
//tween added to timeline with the specified bezier paths
tl.to(plane, 3.8, {
bezier: {
type: "cubic",
values: bezierDataFiltered,
autoRotate: autoRotate
}
//ease for slip-n-slide-like animation wheeee
//ease: Circ.easeInOut
});
}
setTimeout(function(){
PlaneFly(true);
}, 5000);
});
h1 {
font-size: 250px;
margin-top: 200px;
text-align: center;
}
svg {
/*display: none;*/
#flypath {
}
}
#paperplane {
position: absolute;
top: 0px;
left: 0px;
}