AbyssWatcher
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by AbyssWatcher
-
-
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>
Creating a Text / Wave Animation
in GSAP
Posted
Hi,
i found this great animation on single tentacle pngs here made with pixi.js.
I was wondering if anybody has an idea how to make this same animation with a text. Is it possible to make this with only GSAP?
Thank you in advance
See the Pen 3ccd225b73a7fb9aeffafbe8afac75f0 by osublake (@osublake) on CodePen