Jump to content
Search Community

TimelineMax animation not working in only Safari

hybride test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

    <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" />
    <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" />
$(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;
  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
  // 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
  }, 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

Link to comment
Share on other sites

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.
PS. in the future please remove any long 5-second setTimeouts that trigger the animation or give us a little warning ;)
  • Like 2
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.
  • Create New...