TimelineMax animation not working in only Safari

hybride · March 23, 2017

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;
}

See the Pen yMjXgJ by hybride (@hybride) on CodePen

Carl · March 24, 2017

Hi and welcome to the GreenSock forums,

Thanks for the CodePen demo. Very helpful.

As your logs show, your width and height variables for the path are coming out as 0 in safari.

I think the issue is that jQuery is not playing nice with your SVG in Safari for some reason.

I changed:

var path_width = $("#flypath").outerWidth();
var path_height = $("#flypath").outerHeight();

to hardcoded values of

var path_width = 1000;
var path_height = 1000;

and the animation plays fine. Perhaps someone who knows more about SVG, Safari, jQuery might know, but based on what I've seen I don't think there is anything wrong with what GSAP is doing.

https://codepen.io/anon/pen/evKBOb?editors=1010

PS. in the future please remove any long 5-second setTimeouts that trigger the animation or give us a little warning

Notifications

Messages

TimelineMax animation not working in only Safari

Warning: Please note

Recommended Posts

hybride

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members