Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Moamm

SVG animation not triggering on page load

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Glad to hear.

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.
×