Sloppy and chuncky animations on mobile

[niceoutput]

Guys,

 

I am using gsap for ui animations and when i test them in mobile hardware, they seems too sloppy and not fluid as they look in desktop.

 

The animation is inside this method:

initChatOpenCloseAnimation: function() {
      this.animationCloseTimeline = new TimelineLite({
        paused: true,
        onComplete: _.bind(this.focusComposer, this)
      });

      var container = $(this.options.launcherContainerElement);
      var chatBotContainer = $(this.options.chatbotContainerElement);
    
      this.animationCloseTimeline
          .to(container, .3, {scale: 0, opacity: 0}, 0)
          .to(chatBotContainer, 1, {opacity: 1, y: 0, visibility: 'visible'}, 0);
      },

Do you have any clue of what i'm doing wrong?

 

Thanks in advance.

[Carl]

Hi and welcome to the GreenSock forums.

 

Sorry to hear you are having difficulties.

 

There is nothing in your code that really looks problematic but the js code is only a small piece of the puzzle as the HTML, CSS, other js scripts, and especially the hardware all factor in.

 

The best thing to do is to create a reduced test case that we can test on similar hardware. Please let us know the device and OS that is having problems.

We suggest you use CodePen or jsFiddle so that we have an environment in which we can easily edit, test and offer clear solutions.

 

Please see: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/