Search the Community

Hey guys, new to react and gsap here, also haven't used codepen before so I don't know how to import my models and use react there - thus the code looks messy and doesn't display anything but just putting it there for you guys to better visualise the problem I tried Scroll Trigger with 2d elements and they work fine, however when I try it with 3d elements it displays the usual error I see around about the missing plugin. I've tried searching for similar threads/problems but all those are for 2d elements and have not worked to solve my issue. My code with gsap.to works, but the scroll trigger afterwards doesn't work. I assume the problem is related to scroll trigger for 3d models? I wrapped it in a <Canvas> element. Error: Invalid property markers set to true Missing plugin? gsap.registerPlugin() Here is the code again in case codepen doesn't work: import React, { useEffect, useRef } from 'react'; import { useGLTF, PerspectiveCamera } from '@react-three/drei'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useControls } from 'leva'; import { useSound } from 'use-sound'; import * as THREE from 'three'; import { useFrame } from '@react-three/fiber'; import { OrbitControls, Html } from '@react-three/drei'; export default function BoxTest(props) { const { nodes, materials } = useGLTF('./models/box.glb') const ref = useRef(); const tl = useRef(); const { scale, rotation, position } = useControls({ scale: 0.8, rotation: [4.5, 6.5, 3], position: [-0.6, -1.4, -1] }); useEffect(() => { gsap.registerPlugin(ScrollTrigger); tl.current = gsap.timeline(); tl.current.to(ref.current.position, {y: 5, markers: true, ScrollTrigger: { trigger: tl.current, scrub: true, }}) }, []); return ( <> <ambientLight intensity={1} /> <OrbitControls enableZoom={false} /> <group dispose={null}> <group {...props} dispose={null}> <PerspectiveCamera makeDefault={false} far={100} near={0.1} fov={22.895} position={[7.359, 4.958, 6.926]} rotation={[-0.627, 0.71, 0.441]} /> <mesh ref={ref} scale={scale} position={position} rotation={rotation} geometry={nodes.Cube.geometry} material={materials.Material} /> </group> </group> </> ); } useGLTF.preload('./models/box.glb');

I want to create a parent div with 80% of screen width, and inside of that there should be mini square colorful divs, now the functionality i want it to drag though them inside of that parent div, and see all the divs because there'll be so much divs so it will be hard to see them in 1 place, and also It should show the divs in a grid style. another website (midjourney) using same features uses this draggable.min.js() gsap.(). how to achieve it? you can go to (https://www.midjourney.com/) and test it, just click on the eye icon and it will appear on the hero section

I want the svg's lines to move a bit due to my mouse position and then snap back to its original position. Like this codepen but without the draggability.It should read my mouse's position. CODEPEN Link -> https://codepen.io/osublake/pen/QdbQjN. And then do the same things on this svg -->

How can I implement a marquee with GSAP which changes direction on scroll (ease part), but then it continues in the reverse direction from the state it was there previously (tough part, couldn't figure out this) https://drive.google.com/file/d/1J4Dquyl-proyeh5EqPTXioNAfFQc_twq/view?usp=sharing Site link: https://hello.cuberto.com/

Hello everyone, Hope you all are doing good. I need some assistance on the GSAP scroll trigger. I have a section like this https://prnt.sc/KSmvaP4g6Mdk My requirements and some screenshots are given below: When scrolling down: 1. As the user scrolls, the section becomes sticky, limited to the top portion shown in the screenshot. https://prnt.sc/i6ZtbL_a_5_G 2. Initially, the first content on the left side becomes active, and the right side image matches the first content's image. like this https://prnt.sc/rrkB5EFo6W91 3. When scrolling further, the second content on the left becomes active, and the right side image changes to match the second content's image. 4. This pattern continues, with the third content becoming active, and then the section stops being sticky, allowing the user to move to the next section. When scrolling up: 1. The sticky section reappears at the top, containing the third content on the left, and the right side image matching the third content's image. 2. Scrolling up again activates the second content on the left, changing the right side image accordingly. 3. Similarly, scrolling further up activates the first content on the left, and the right side image updates to match. 4. After the first content is active, the sticky section is no longer sticky, and the user can continue scrolling to the previous section. I have implemented it a little bit in Codepen (link here). But I tried to make it sticky and exactly my requirement. How can I achieve this?

Hello Team, we are facing three issues with the SplitText Module. Issue 1: The DOM created by SplitText is not placed in the same position as the original DOM The Original DOM: The DOM created by SplitText: Issue 2: The Word split is not happening based on Whitespace. The words "IS ALL" in the first list items are split like ["I", "S", "AL", "L"] the expected output is ["IS", "ALL"] Issue 3: The Word "There" in the first list items is not underlined in the final output. Kindly note that Note: the user edits all the dom, so we cannot change the DOM structure. CLICK the click here button to start the animation CLICK the reset button to reset the animation and back to its original position.

Hi everyone, I am working on a project where I want to create a blob effect using GSAP. I have animated two blob SVGs using GSAP as you can see in codepen attached below, but I am still learning, and I don’t know how to do everything. I have tried everything, mask-image, -webkit-mask-image but I'm not getting the result that I want. My goal is to mask an image into the blobs, like in the image I have attached. Can anyone please help me with this? How can I use GSAP to mask an image into the blobs? Thank you in advance for your help and suggestions.

I want to achieve the text animation when we scroll in that specific component in React JS using Tailwind CSS. Currently I'm getting animations Line by Line and when I reverse the scroll the text gets disappeared, whereas, I want the animations to be displayed Character by Character like the link I'm sharing below: But I want to use this in React JS and instead of SplitText, I want to use SplitType NPM Package I'm attaching my code file below for further reference. Please guide me to achieve the functionality. FreshIdeaTesting.js

Hello everyone, could you tell me how I can get rid of the skips when scrolling the page? I use deferred image loading and update the scroll trigger every time an image is loaded https://codepen.io/a-glinskiy/pen/ZEVGXxj

I have one timeline. inside div I have 3 divs ( position: absolute ) I am pushing animation objects in a array const anim = mainTimeline.from(...) animations.push(anim); but when I try to play animation on specific index, for example animations[2].play() it plays whole timeline is it possible to play only specific animation under same timeline?

Hi all.To avoid indents at the bottom I made a couple of manipulations.I added "margin" for the "pin-spacer" element at "onUpdate" method "scrollTigger".But when scrolling it is noticeable how the whole section jumps.Everywhere examples where the "pin" element covers the whole screen,but there are no examples where the elements keep their positions and without any gaps. I just wanted the section with cards was pinned to the top of the screen until it does not scroll to the end horizontally and that the gaps at the bottom was not, as the screens are different and everywhere look different.As you already know "pinSpacing:false" does not help, as the sections are layered on top of each other, and I do not need it.I will be glad to any suggestions. Pls check on full screen mode to better understand what i mean

Hi everyone, I have 4 sections. I need to make transitions between them. The second section should run over the first, and the third on the second as in first demo, but between the third and fourth transition should be like in second demo, when the third section goes to the top and opens the fourth section under it. I don't understand how this effect can be achieved https://codepen.io/GreenSock/pen/KKpLdWW https://codepen.io/GreenSock/pen/BaowPwo

Hello, vibrations occur in the borderline with the scrollsmoother plugin. To resolve this "will-change: transform;" I used it but the problem persists. Can you help me? #smooth-content { will-change: transform; } "* { will-change: transform; }" > As soon as I apply this the page is completely broken css Video https://streamable.com/1cc12y

Hello all, i'm new to gsap, i'm trying to adapt the scramble text plugin to make it as similar as possible to the one in the video i linked, only i noticed some limitations like putting the text on multiple lines and showing the finished words at the same time. Can anyone help me or recommend some other plugin? Thanks scramble.mp4

I try implement this code on Vanilla JS but something doesn't work out, although this is the same code, for example in the example from codepen which I attached in url this displayed all rows smoothly and my side this displayed only first row smoothly and other rows this like static rows . I'm using shadow DOM. On my side just differ javascript code for example, I using an object instead of a string. Thank you in advance! tl.fromTo(menuIcon, { rotation: 0 }, { rotation: 180 }, 0) <header> <h1>GSAP Rocks!</h1> <div class="menu-icon"></div> <ul class="menu"> <li class="menu-item">Home</li> <li class="menu-item">About</li> <li class="menu-item">Contact</li> <li class="menu-item">Rock on GSAP</li> </ul> </header> import { gsap } from "gsap"; export class Header extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); fetch("../CORE/Header/header.html"). then(response => response.text()).then(content => { this.shadowRoot.innerHTML = content; this.createMenu(this.shadowRoot); }); } createMenu(shadowRoot) { const menuIcon = shadowRoot.querySelector(".menu-icon"); const menu = shadowRoot.querySelector(".menu"); const menuItem = shadowRoot.querySelector(".menu-item"); const menuUp = "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"; const menuDown = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"; let menuOpen = false; const tl = gsap.timeline({ paused: true, defaults: { duration: 0.3, ease: "power1.inOut" } }); tl.fromTo(menuIcon, { rotation: 0 }, { rotation: 180 }, 0) .fromTo( menu, { clipPath: menuUp, visibility: "hidden" }, { clipPath: menuDown, visibility: "visible" }, 0 ) .fromTo( menuItem, { opacity: 0, y: "0.5em", stagger: 0.1 }, { opacity: 1, y: "0em", stagger: 0.1 } ); menuIcon.addEventListener("click", () => { if (!menuOpen) { tl.play(); menuOpen = true; } else { tl.reverse(); menuOpen = false; } }); } }

Hello, I'm pretty new with gsap. When I scrollsmoother is activated, it's like the "viewport" is being reduced when I scroll down. Behavior expected : https://codepen.io/amazingweb/pen/VwVdBBw The code only works in desktop for now (>991px)

const drawImage = useCallback(() => { const image = images[defaultFrame.frame]; const canvas = document.querySelector("canvas") as HTMLCanvasElement; // window.innerWidth canvas.style.width = `${width}`; // window.innerHeight canvas.style.height = `${height}`; const context = canvas.getContext("2d") as CanvasRenderingContext2D; // window.innerWidth context.canvas.width = width; // window.innerHeight context.canvas.height = height; context.clearRect(0, 0, canvas.width, canvas.height); // Draw the image on the canvas //, width, height context.drawImage(image, 0, 0, canvas.width, canvas.height); }, [defaultFrame.frame, height, images, width]); const initGSAP = useCallback(() => { gsap.to(defaultFrame, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: true, pin: "canvas", }, onUpdate: drawImage, }); gsap.fromTo( ".game", { opacity: 0.1, }, { opacity: 1, scrollTrigger: { scrub: true, start: "0%", end: "100%", }, onComplete: () => { // do stuff }, } ); images[defaultFrame.frame].onload = drawImage; }, [defaultFrame, drawImage, images]); I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this? Here a video

Hello everyone, I have a React app with a number animation that activates when we scroll down. The animation works fine with regular scrolling. However, when I click an Anchor tag <a href="#section"> to jump-scroll to a section below, the animation doesn't play. Even after scrolling up and down again, the animation still doesn't work. I need some guidance on how to fix this issue. Link to sandbox: https://codesandbox.io/s/gsap-animation-issue-k3g7yl?file=/src/App.js Note: also, can someone tell me how to embed codesandbox in my form?

Hi, as mentioned in title I want to show the elements one by one on screen on scroll while make line element grow vertically like a roadmap kinda view. And also I need to add active class to milestone-stone element so that it indicates the active element and give it a cool effect Thanks a lot in advance ?.

Hey guys, i just want to re-implement candycode fading in and out animation when scrolling. i'm using tailwind and vue js could please direct me how to archive the similar animation?

I want the video to play smoothly on scroll, here on my code pen demo it's not smooth, how do I make it better?

Hello, I have such a part in my project, when I put a period and a comma between numbers like "1,000,000" or "4,000", the counter doesn't work. Can you help me?

my animation lags on load , but doesn't when I go other pages and switch back to the home page

Hi, Not sure if this is the right forum to ask this question but hoping that one of the many geniuses on here is able to provide assistance so here it goes. I am having an issue when trying to deploy my Next.js project to Vercel and it seems to be occurring in the build process and more specifically to due with gsap.context() This is my code inside my index.tsx page: import { useRef } from 'react'; import dynamic from "next/dynamic" import { montserrat } from '../utils/fonts' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import useIsomorphicLayoutEffect from '../utils/isomorphicEffect'; import Head from 'next/head' import Image from 'next/image' import styles from '@/styles/home.module.scss' import profilePic from '@/images/dayne-profile-circle-new.png' import gradientPic from '@/images/gradient-bg.jpg' gsap.registerPlugin(ScrollTrigger, ScrollSmoother); export default function Home() { const smoother = useRef(); const ctx = useRef(); useIsomorphicLayoutEffect(() => { ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 2, effects: true, }); ScrollTrigger.create({ trigger: '#pinned-element', pin: true, start: 'top top', end: '+=5000', pinSpacing: false }); }); return () => ctx.current.revert(); }); return ( <> <Head> <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title> <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" sizes="any" /> </Head> <div id="smooth-wrapper" className={styles.scrollWrapper}> <div id='smooth-content'> </div> </div> </> ) } This code works perfectly on my local server (https://localhost:3000) The issue is when I push changes to my repo and Vercel runs a build from those changes. I have attached the error message that I am being given from Vercel to this post. Please, any React geniuses who can shed some light it would be greatly appreciated. Thanks, Dayne

Hello! I'm trying to implement confetti effect made with gsap to my project ? The problem is that when changing the window width / orientation, I need the width and height of the container where the confetti is located to be recalculated. I tried to implement this with a timeline (instead of the usual gsap), but I couldn't do it because the Random property was removed from gsap version 3 (at least that's what my PhpStorm says). Here is link to my codepen with code: https://codepen.io/ProjectDCL/pen/ZEmKyPq How can I implement a confetti animation that will adjust to the width of the user's window and that can be turned off by itself (for example, by clicking on a button)? Many thanks in advance for your advice and help. I believe that the GSAP team, as always, will come to the rescue