SVG animation not triggering on page load

[Moamm]

So i'm having trouble getting an SVG to draw when the index.html is first reached. 

 

The problem only seems to be on chrome for mac, the animation works fine on any other browser and loads on page load as intended. The SVG will also start to draw as soon as the page is refreshed, just not on the first load automatically.

 

I am using barbajs for smooth internal page navigation and have included all my tweens in the relevant page 'onEnter' function, i guess this is why its working on the other browsers.

 

var Indexpage = Barba.BaseView.extend({
  namespace: 'indexpage',
  onEnter: function() {

    var drawlogo = new TimelineMax();
  
    // TweenMax.from("main.home",8,{autoAlpha:0});
    TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true});
    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");

  },
  onEnterCompleted: function() {
    // TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true});
    // TweenMax.to(".title-container *", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}, 0.1);
  },
  onLeave: function() {

  },
  onLeaveCompleted: function() {
      // The Container has just been removed from the DOM.
  }
});

// Don't forget to init the view!
Indexpage.init();

 

Ive tried adding the tweens to barbas default fade in function but as expected, doesn't effect anything. Maybe i'm missing something simple?

[Dipscom]

Hi @Moamm,

 

It's very hard to help troubleshoot blind looking at a wall of code without context does not give me any insight on what might be going wrong.

 

There are a few discussions here in the forums on how to work with BarbaJS, have you looked at those?

 

https://greensock.com/forums/search/?&q=barbajs&search_and_or=or&sortby=relevancy

 

If none of those can help you, we would ask you to provide a reduced-case demo of your situation in a online code editor of your choice so we can see the issue and the context live.

[Moamm]

1 hour ago, Dipscom said:

Hi @Moamm,

 

It's very hard to help troubleshoot blind looking at a wall of code without context does not give me any insight on what might be going wrong.

 

There are a few discussions here in the forums on how to work with BarbaJS, have you looked at those?

 

https://greensock.com/forums/search/?&q=barbajs&search_and_or=or&sortby=relevancy

 

If none of those can help you, we would ask you to provide a reduced-case demo of your situation in a online code editor of your choice so we can see the issue and the context live.

Hi, its okay i've sorted it now!

[Dipscom]

Glad to hear.