Jump to content
Search Community

AbyssWatcher

Members

  • Posts

    2

  • Joined

  • Last visited

AbyssWatcher's Achievements

  • One Month Later
  • Week One Done
  • Dedicated Rare
  • Conversation Starter Rare

Recent Badges

0

Reputation

  1. AbyssWatcher started following GSAP unwanted effects on Threejs Canvas size and Creating a Text / Wave Animation
  2. AbyssWatcher
    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
  3. 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>
×
×
  • Create New...