Low performance on mobile

[Philippe-Gllrt]

Hello GSAP people !

I recently created my first GSAP animation, for my portfolio. It consist in a horizontal scrolling, with a paper plane staying in the middle of the screen. Here is the link for you to understand better: actual version
I am pretty with the result sor far, but it's lagging a lot on mobile.

 

For the plane to follow the scroll, I did this

//create the animation timeline
  let tl = gsap.timeline({
    defaults: {
      ease: "none",
    },
    scrollTrigger: {
      trigger: slider,
      pin: true,
      scrub: true,
      end: () => "+=" + scrollLength,
    },
  });



  //create the horizontal scroll
  tl.to(slider, {
    xPercent: -1905.5
  });

  //make paperPlane stay in scroll
  tl.to("#landing__paper_plane_transform", {
    x: paperPlaneScrolling,
    scrub: true,
  }, 0);

I noticed it is especially lagging when other elements enter the screen. Maybe I should preload all the other svgs ?

Thank you in advance for any help you will provide 😁

[mvaneijgen]

Hi @Philippe-Gllrt welcome to the forum!

 

Cool animation! Sadly we can't debug a live website. If you can narrow down what is causing the issue and post that in a minimal demo, we would be happy to take a look for you, to help you debug 

 

Setting xPercent: -1905.5 seems weird to me, why not get the with of the element and moving using the x property that amount, then using a function based value x: () => widthOfMyElement, then ScrollTrigger recalculates on refresh or browser resize. 

 

Also, why not make the paper plane stay fixed on top of everything, you then can animate it like it is struggling to keep up, but that is all fake, because it is just fixed pinned to the left of the browser window. 

 

I now see! A timeline can only have one ScrollTrigger, individual tweens on a timeline can't have ScrollTriggers them selfs! But with my previous comment that would be fixed.

 

Hope it helps and happy tweening! 

[Philippe-Gllrt]

thanks a lot for the reply. I was trying things with the -1905, I fixed it to a value computed like so

const sliderScrolling = -100*(scrollLength / window.innerWidth - 1);

about fixing the paper plane, this was my initial idea. The fact is the paper plane has to go behind some elements and in front of others. I need to keep this stacking context. As the paper plane is contained in in the div I am mooving to create this animation, I thought the easiest way was to moove it in the same direction. I will try to find a way

About those scrollTriggers, if I cannot add any scrollTringer on a tween in a TimeLine, how can I make it happen at a certain moment of the horizontal scrolling ? I use the time line more as a container for the horizontal scrolling, using containerAnimation

[Philippe-Gllrt]

I found a solution by adding another plane on the very top of html and display it  only on mobile.
By looking for info, I found this topic :

If people read this topic, it may be a good idea to have a look there.
Thanks again