Search the Community

Hi there, hope everyone is doing well I've an issue using gsap, scrollTrigger to be more specific for smooth scrolling (horizontal and vertical) currently everything is working well. The only issue i'm having is the lag that can be hardly noticed at the start of the page on desktop, but its really noticed on mobile. Here is the website link: https://beyond-the-veil.vercel.app Here is my code bellow, i've sent my whole code because it is really simple that work for vertical (mobile) and horizontal (desktop) and i'm having a bit of lag on both, thanks in advance for whoever helps. import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const HorizontalScrollComponent = () => { const component = useRef(); const slider = useRef(null); const [isVerticalScroll, setIsVerticalScroll] = useState(false); useEffect(() => { const handleResize = () => { if (window.innerWidth < 1024) { setIsVerticalScroll(true); } else { setIsVerticalScroll(false); } }; window.addEventListener("resize", handleResize); handleResize(); // Initial check return () => { window.removeEventListener("resize", handleResize); }; }, []); useEffect(() => { // Target the container element to be scrolled const container = slider.current; const panels = gsap.utils.toArray(".panel"); const scrollDirection = isVerticalScroll ? "y" : "x"; const scrollSize = panels.reduce( (acc, panel) => acc + (isVerticalScroll ? panel.offsetHeight : panel.offsetWidth), 0 ); gsap.to(panels, { [scrollDirection]: () => -scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"], ease: "linear", scrollTrigger: { trigger: container, pin: true, scrub: isVerticalScroll ? 2 : 3.5, start: "top top", end: `+=${ scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"] }`, }, }); // Clean up ScrollTrigger when the component unmounts return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill(true)); }; }, [isVerticalScroll]); return ( <> <div ref={component}> <div ref={slider} className="app flex flex-col h-[100vh] w-[100vw] lg:flex-row lg:flex-nowrap lg:overflow-hidden" > <div id="header" className="panel w-full lg:h-[100vh] -z-[10] relative" > <LandingPage /> </div> <div id="tracking" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Tracking /> </div> <div id="investigating" className="panel lg:h-[100vh] sbg-blue-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Investigating /> </div> <div id="revealing" className="panel lg:h-[100vh] sbg-green-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Revealing /> </div> <div id="unveiling" className="panel lg:h-[100vh] sbg-purple-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Unveiling /> </div> <div id="footer" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Footer /> </div> </div> </div> </> ); }; export default HorizontalScrollComponent;

Hi folks, A few months ago, I joined a company where I, along with another developer, took on the responsibility of maintaining their website, which heavily relies on GSAP for animations. However, that other developer has since left the team, and I've been encountering an issue when attempting to build the website using Netlify. The error message I'm getting reads as follows: npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fbusiness - bad authorization header. Please login again npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. It seems like the build is failing due to authorization problems related to GSAP. I suspect this might be linked to the other developer using credentials that are no longer valid since his accounts were deactivated. Regardless of this being the case, could someone please advise me on what steps I should take to resolve this issue and ensure that everything runs smoothly again? I should mention that I'm not a highly experienced developer, so your assistance (and patience!) would be greatly appreciated.

Hi. I've been stuck on this issue for 3 days now. I went through all the docs, StackOverflow answers, gsap docs, codepens, gpt 4 answers etc, but I still can't figure out what is going wrong with my component. Maybe I'm just too stupid. Anyway. Here's the codesandbox (took me hours to figure out how to do this without bringing all the code and an entire nextjs app, so i just copied the styles and recreated the important components) https://codesandbox.io/s/lingering-pine-rkgr79?file=/src/components/FrontPageScene.tsx Unfortunately, i didn't use codepen. The animation should work as such: brain model moves left, then stays there for the entirety of the pinned element, then goes right when the footer appears. This works, but if you resize the window (not even fully to mobile) you'll notice that it starts to break and it doesn't recover. On mobile it should rotate the model, which doesn't work at all, but I'm guessing that's a threejs issue i also am trying to figure out.... It looks like when I resize, the pinned component "height" is completely ignored in the scrolltrigger calculations afterward. Any help would be super appreciated and i apologize if somehow i made dumb mistakes.

In the given code, I'm attempting to create two synchronized animations using ScrollMagic. The first animation involves a video whose playback is controlled by scrolling, while the second animation is a text that flies in at a specific point in the video. To achieve this, I've used TweenMax and ScrollMagic, setting an offset value for the text animation to ensure it starts at the right moment. The issue I'm encountering is that on larger screens, the text animation comes in later than expected. I initially considered using the `triggerHook` value between 0 and 1 to address this problem, but it didn't provide the desired results. How can I make the offset value for the text animation dynamic, so that it starts at the right time, especially on larger screens? let scene = new ScrollMagic.Scene({ duration: 19000, triggerElement: intro, //video triggerHook: 0, }) .addIndicators() .setPin(intro) .addTo(controller); const height = window.innerHeight; const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height }); let scene2 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, }) .setTween(textAnim) .addTo(controller); // Calculate the offset based on scene's duration let scene3Offset = scene.duration() * 0.315 - 1000; // 31.57% of scene's duration const textAnim2 = TweenMax.fromTo( text2, 4, { y: height }, { y: -1.5 * height } ); let scene3 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, offset: scene3Offset, }) .setTween(textAnim2) .addTo(controller);

Hey I am super new to GSAP. How can I ensure that after my reveal animation is completed using GSAP and ScrollTrigger, the page doesn't scroll down right away but instead triggers a new animation on the revealed element (in this case its .center), and only after this animation is completed, it scrolls to the next section? EDIT:- I have tried adding another timeline in .center element but now also as you can see once first end reaches scroll-end after the reveal animation i want my .center element wait for second end to reach scroll-end again. Instead center starts scrolling just after reveal animation is completed(i.e first end reaches scroll-end )

Hello GSAP community, I'm new to GSAP and struggling with making an element follow an SVG path while scrolling. The element isn't properly aligned and the animation feels off during scrolling. Any quick tips on getting it to align correctly with the path and ensuring smooth scrolling animation? Your guidance is much appreciated!

Hello everyone, I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component. The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen. I'm including the relevant code snippet from my component for reference: import React, { Fragment, useRef, useLayoutEffect } from "react"; import "./style/main.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function Main() { const app = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { var tl1 = gsap.timeline({ scrollTrigger: { trigger: ".box2", start: "0% 50%", end: "50% 50%", scrub: "true", markers: "true", }, }); }, app); return () => ctx.revert(); }, []); return ( <> <div ref={app} className="App"> <div className="box1"> <div className="box">selector</div> </div> <div className="box2"> <div className="boxx">selector</div> </div> </div> </> ); } export default Main; Css for this component is body { background-color: var(--dark); color: var(--light); font-family: "Signika Negative", sans-serif; margin: 0; padding: 0; height: 100vh; } .box { position: absolute; width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--green); font-weight: 600; color: var(--light); transition: cubic-bezier(0.165, 0.84, 0.44, 1); } .App { display: flex; align-items: center; flex-direction: column; justify-content: space-around; min-height: 100vh; } .box1{ background-color: #ffffff; height: 100vh; width: 100%; } .box2{ background-color: #5900ff; height: 100vh; width: 100%; }

<div id='app'> <div class='section1'> <h1>Section 1</h1> </div> <div class='section2'> <h1>Section 2</h1> </div> <div class='section3'> <h1>Section 3</h1> </div> <div class='section4'> <h1>Section 4</h1> </div> <div class='section5'> <h1>Section 5</h1> </div> </div> i have 5 sections and each sections height is 100vh. but i need more scroll area so i pin each of the 5 sections.Then i have a scrollTrigger method which the trigger is section1 and the start is from center but it is not starting from the center of the section1 . if any one knows how to fix this please help.Please

Hi community, https://htxrgj.csb.app/ I want to animate my animation using scroll within 1/4 or circle, or in arc shape, please checkout for code given on codesandbox. The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth. I hope you got my point..! Thanks in advance..!

Dear Coding Wizards, I've reached the limits of my current GSAP knowledge and require your expertise to realize my dream of launching an artwork gallery. The primary challenges I'm facing with my scripts are: Scroll Wheel Issues: Difficulty with implementing smooth navigation for next and previous slides using the scroll wheel. Keyboard Arrow Navigation: Challenges with enabling seamless navigation using keyboard arrows (up and down) to switch between slides. Mobile-Friendliness: I believe my project is mobile-friendly, but I'm not entirely certain. If there are any elements I might have overlooked or opportunities to make the project more contemporary and lightweight, your insights would be highly appreciated. Thank you in advance for your valuable assistance. Warm regards, René

Just wanted to pop in and say WOW. Love the new look/style. Very fresh. Class work. The intro really showcases the toolset nicely. Also think the move away from the greensock super dude / domain was due. Good work 👏

Hello, I have a question about how to replicate the hover effect in boxes like this site (https://www.vovi.studio/). My question is how to have the box background changed to black but in a smooth way like the example website and split the text. I managed to do something with the code below, but it wasn't as smooth as on the example site. // react box component import { useRef } from 'react'; import gsap from 'gsap'; import { ArrowCircleRight } from 'phosphor-react'; import { Flex, SplitElement } from '@/components'; import * as S from './styles'; import { DefaultTheme } from '@/styles'; interface IGridBoxProps { alignWrapper?: 'center' | 'flex-end'; justifyChildren?: 'center' | 'space-between'; } const GridBox = ({ alignWrapper = 'center', justifyChildren = 'space-between' }: IGridBoxProps) => { const splitElementRef = useRef<HTMLDivElement>(null); const gridBoxRef = useRef<HTMLDivElement>(null); const tl = gsap.timeline({ defaults: { duration: 0.2, ease: 'power1.inOut' } }); const onEnter = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.text.heading, duration: 0.3, stagger: -0.05 }); tl.to(splitChildren, { yPercent: -100, stagger: -0.05 }); } }; const onLeave = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(splitChildren, { yPercent: 0 }); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.white, duration: 0.15 }); } }; return ( <S.GridBoxWrapper align={alignWrapper} ref={gridBoxRef} onMouseEnter={onEnter} onMouseLeave={onLeave} > <Flex align="flex-end" justify={justifyChildren} style={{ width: '100%' }} > <SplitElement firstChild="firstChild" lastChild="lastChild" ref={splitElementRef} /> <ArrowCircleRight size={20} weight="bold" /> </Flex> </S.GridBoxWrapper> ); }; export default GridBox; //styles box component import styled, { css } from 'styled-components'; import { Flex } from '..'; export const GridBoxWrapper = styled(Flex)` ${({ theme }) => css` width: 100%; height: 200px; border: 1px solid ${theme.colors.gray[50]}; padding: 3.2rem; svg { color: ${theme.colors.gray[200]}; } `} `; //react split component import { ForwardRefRenderFunction, HTMLAttributes, ReactNode, forwardRef } from 'react'; import * as S from './styles'; type SlitWrapperDivType = HTMLAttributes<HTMLDivElement>; interface ISplitElementProps extends SlitWrapperDivType { firstChild: ReactNode; lastChild: ReactNode; } const SplitElement: ForwardRefRenderFunction< HTMLDivElement, ISplitElementProps > = ({ firstChild, lastChild, ...props }, ref) => { return ( <S.SplitWrapper {...props} ref={ref}> <S.SplitChildren>{firstChild}</S.SplitChildren> <S.SplitChildren>{lastChild}</S.SplitChildren> </S.SplitWrapper> ); }; export default forwardRef(SplitElement); //styles split component import styled, { css } from 'styled-components'; export const SplitWrapper = styled.div` width: fit-content; height: 2em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; `; export const SplitChildren = styled.span` ${({ theme }) => css` color: ${theme.colors.gray[200]}; font-size: 2em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; `} `; Can anyone help me improve this gsap code and make the animation as smooth as possible? Thank you all very much in advance. Gravação de Tela 2023-10-17 às 18.51.17.mov

Hello, I recreated the issue I am experiencing in this Codepen: https://codepen.io/mariospittas/pen/dywBmRX Can you please help me figure out how to animate each link individually? Note: I am using a SplitType js library, but I don't think this has anything to do with the main issue. Thanks!

Hi, I'm just wondering if it's possible to make something like this with GSAP and Help with any GSAP addon. When the users scrolls, the small pixels will independently fall into place forming an complete image. I tried to find some demo on codepen and no luck, Any reference or hint would be must appreciated. Thanks

Happy to share this with you and hear from experts and fellow enthusiasts in the field. Visit Website

Hey, I want to animate the white striped bar with the current animation. Additionally, the blue text should be visible when it comes into the view-port, and the purple text should be visible when it goes out of the view-port. Please help.🙂

Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me?

Hello Everyone , Recently i have started using React with GSAP, i have been creating a react app and i was able to achieve the animations but resizing doesn't happen and the container inside gets resized only when the page gets a reload and below is my demo code that illustrates the problem Thanks in advance for help! https://stackblitz.com/edit/gsap-react-basic-f48716-oddg3v?file=src%2Fhome.js https://gsap-react-basic-f4871

Hi everyone, I trying to create animation for text using React (https://stackblitz.com/edit/gsap-react-basic-f48716-nr918g?file=src%2FApp.js,src%2FAbout.jsx,src%2Fstyle.css) (I paste these elements as a children in parent element). I wanted to change opacity from 0 to 1 by scrollTrigger, but only first element works fine when other start to jump or even dont work. Its works great without react, but got problem with Thanks for help)

How can I trigger opacity: 1 to the top item and opacity: 0.6 to the item behind like the images. Here is my code: https://codesandbox.io/p/sandbox/practical-banzai-26fql6?file=%2Fapp%2Fpage.tsx%3A1%2C1 Please help me ❤️

I have stuck to make a normal scroll with Observer. I have scroll snapped from sections 1 to 2 and from sections 2 to 4 scroll normally with Observer. The body has overflow: hidden that I can't remove. Currently, the normal scroll I make by increasing progress to test. I'm trying to make it scroll by translate y with the mouse or wheel scroll value. This is the code sandbox: https://codesandbox.io/s/scroll-rfjx9k How can I reach that? Please help me . Thanks so much

First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!

Hi team! How can I make this slides automatically play in every 10 seconds or so... When it reaches the last slide, animation starts from start thanks)

document.addEventListener("DOMContentLoaded", function() { // Register ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); const translateIcon = document.querySelector(".translate-icon-global"); const dropdownContent = document.querySelector(".dropdown-content"); // Check if the device supports touch events const isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints; // Use const for screenWidth instead of let as it doesn't change const screenWidth = window.innerWidth; // Use querySelector instead of querySelectorAll for a single element const storyBlock = document.querySelector(".story-content"); // Use template literals for string interpolation console.log(`width: ${screenWidth}em`); const sections = document.querySelectorAll('.h-scroll__section'); const horizontalScroll = document.querySelector('.h-scroll__inview'); const container = document.querySelector('.h-scroll__inner'); // Calculate the total width of the horizontal content const horizontalContentWidth = (sections.length - 1) * window.innerWidth; console.log(horizontalContentWidth); // Vertical scrolling for mobile and tablet devices if (window.innerWidth > 991) { // Horizontal scrolling gsap.to(horizontalScroll, { xPercent: -43 * (sections.length - 1), ease: 'none', delay: 100, scrollTrigger: { trigger: container, invalidateOnRefresh: true, pin: true, start: 'top top', end: () => `+=${container.offsetWidth}`, scrub: 1, }, }); } if (!isTouchDevice) { const images = document.querySelectorAll(".study__img"); const scrollContainer = document.querySelector(".h-scroll__inview"); console.log(window.innerWidth, window.innerHeight); if (screenWidth < 1919) { scrollContainer.style.width = '1450em !important'; } else { scrollContainer.style.width = `${screenWidth - 589}em`; } const customCursor = document.querySelector(".custom-cursor"); // Add custom cursor functionality for non-touch devices document.addEventListener('mousemove', function(event) { customCursor.style.left = `${event.clientX}px`; customCursor.style.top = `${event.clientY}px`; }); const links = document.querySelectorAll("a"); links.forEach((link) => { link.addEventListener("mouseover", () => { customCursor.classList.add("custom-cursor--link"); }); link.addEventListener("mouseout", () => { customCursor.classList.remove("custom-cursor--link"); setTimeout(() => { customCursor.style.left = `${event.clientX}px`; customCursor.style.top = `${event.clientY}px`; }, 30); }); }); } else { const scrollContainer = document.querySelector(".h-scroll__inview"); const customCursor = document.querySelector(".custom-cursor"); customCursor.style.opacity = '0 !important'; // Function to disable vertical scrolling function disableVerticalScroll() { document.addEventListener("scroll", preventScroll); } // Function to re-enable vertical scrolling function enableVerticalScroll() { document.removeEventListener("scroll", preventScroll); } // Function to prevent the default scroll behavior function preventScroll(event) { event.preventDefault(); } if (screenWidth < 1919 && screenWidth > 991) { // Call the disableVerticalScroll function to turn off y scrolling scrollContainer.style.width = `${screenWidth}em`; storyBlock.style.width = `${screenWidth}em`; disableVerticalScroll(); } else if (screenWidth < 1919) { scrollContainer.style.width = '100%'; } } // Disable scroll function disableScroll() { // Get the current scroll position var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; // Save the current scroll position and add scroll-lock styles window.onscroll = function() { window.scrollTo(scrollLeft, scrollTop); }; document.body.classList.add('scroll-lock'); } // Enable scroll function enableScroll() { window.onscroll = null; document.body.classList.remove('scroll-lock'); } }); Hi! I am currently working on a horizontal scroll for a webpage with images. The webpage consists of three sections. First full-screen section. Sections with images. Last full-screen section. I have a problem with that horizontal scroll stucks. And even freezes at some point. All images are optimized and lightweight. How to make horizontal scroll work smoothly. #gsap #horizontal-scroll project_page_style.css test_index.html

Hi. Acording to design of site I must to make split screen with left side scrolling text and with right side pinned images, which change acording to text. But this is must be in the frame like on the added image. I tried to find examples. I found on of them simmilar to my design, but cant resolved two problems: 1. How to do change images with transition of opacity 2. How to make this work in a frame with red border I will be gratefull for any help!