Hello,
i have a question regarding GSAP and canvas.
I have 2 divs, one is a loading screen and the other one is the page content, which includes 2 canvases.
Im using Barba.js and GSAP to animate the loading screen, so that it slides out and the page content slides in. All of that works as expected, but
when i check on mobile dimensions in the dev tools, suddenly after applying gsap, the canvas doesnt resize properly anymore to the windowsize. I tried wrapping the 2 canvases into a new div but no luck.
I add a picture before and after applying gsap.
transitions: [
{
name: "loading-screen",
to: {
namespace: ["home"],
},
once() {
console.log("Transition 'loading-screen' is running.");
gsap.to("#loading-screen", {
x: "-100%",
ease: "bounce",
delay: 2,
duration: 2.5,
onComplete: function () {
// Hide the loading screen once the animation is complete
document.getElementById("loading-screen").style.display = "none";
},
});
gsap.from("#main-page", {
x: "100%",
ease: "bounce",
delay: 2,
duration: 2.5,
});
gsap.from(".bg-video", {
opacity: "0",
ease: "power1.out",
delay: 3.5,
duration: 2,
});
},
},
],
<body class="min-h-screen bg-white text-black" data-barba="wrapper">
<div class="wrapper" data-barba="container" data-barba-namespace="home">
<div
id="loading-screen"
class="absolute z-40 h-screen w-full bg-black text-right"
>
<h2 class="mr-8 mt-[200px] sm:mr-32">
<span
class="animate-[counter_2s_linear_forwards] font-grenze text-[200px] text-textcolor2 [counter-set:_num_var(--num)] before:content-[counter(num)] lg:text-[280px]"
></span>
<span class="font-grenze text-[50px] text-textcolor2 lg:text-[120px]"
>%</span
>
</h2>
</div>
<div id="main-page" class="h-screen w-full">
<div class="threejswrapper">
<canvas
class="webgl2 fixed left-2 z-10 outline-none sm:left-0"
></canvas>
<canvas class="webgl fixed left-0 top-0 z-20 outline-none"></canvas>
</div>