SVG анимация при загрузке страницы во всех браузерах, кроме Chrome

Question

Так что у меня есть SVG анимация при первой загрузке страницы. Это будет отображаться только один раз, когда index.html загружен и работает так, как задумано во всех браузерах, кроме chrome для Mac. Однако анимация будет загружаться при обновлении страницы.

Анимации используют GSAP и плагин DrawSVG.

Я использую Барбайс для внутренних страниц.

Я добавил основных анимаций в barbas onEnter: funtion(){}, который работает как положено. Когда индекс загружается впервые, SVG просто появляется и исчезает. Это должно быть рисование, которое работает в других браузерах.

Я пытался добавить ту же самую анимацию в стандартный переход 'fadeIn', но почему он будет работать в других браузерах?

var Indexpage = Barba.BaseView.extend({

пространство имен: 'indexpage', onEnter: function() {

var drawlogo = new TimelineMax();

TweenMax.from("main.home",8,{autoAlpha:0});
TweenMax.from(".logotop",2,{autoAlpha:0});
TweenMax.from(".frontlogo1,.frontlogo2",5,{drawSVG:0});

TweenMax.to("main.home",1,{autoAlpha:0,delay:5});
TweenMax.to(".logotop",1,{autoAlpha:0,delay:5});
TweenMax.to(".frontlogo1,.frontlogo2",1,{autoAlpha:0,delay:5});

TweenMax.from(".logoblue",2,{autoAlpha:1,x:-220,ease: Expo.easeOut,delay:4.8});
TweenMax.from(".burger",1,{autoAlpha:1,x:100,ease: Expo.easeOut,delay:4.6});

TweenMax.to("#intro",3,{autoAlpha:1,ease:Expo.easeOut,delay:5.8});
TweenMax.to("#sectionone",3,{autoAlpha:1,ease:Expo.easeOut,delay:6});
TweenMax.to("#sectiontwo",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.2});
TweenMax.to("#sectionthree",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.4});
TweenMax.to("#contactus",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.6});

console.log("enter");},