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

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

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 😁