Search the Community

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 Greensock team, My first question here in the forum. Congrats on the new branding and the website. It looks awesome I recently created an infinite marquee/gallery effect. What I needed to add is that it should also react to scroll. Creating gallery that moves to right as a repeat tween and wrapper to move left and right based on scroll was also doable with ScrollTrigger. But I need it to move extra only to left no matter I scroll down or up. I've read related questions here on the forum and put together something. They were quite helpful. It works. I just want help to see if this is the right way to do this, syntax and performance wise. I'd be extremely grateful. Minimal Codepen Demo - https://codepen.io/deepak-gangwar/pen/mdaZqXM

I've been experimenting with GSAP for the past few weeks using next, and I've been trying to use "pin" with "scrollTrigger." However, it seems like I'm getting extra white space every time I use "pin" with the scroll trigger. Is there something wrong with my code? first, I create two refs. const animatedPath = useRef(null) const svgref = useRef(null) and second I use `useLayoutEffect` for register scroll trigger plugin and define gasp animation useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: svgref.current, start: "top top", end: "bottom 100", scrub: true, markers: true, pin: true } }) gsap.set(animatedPath.current, { strokeDasharray: 471.2, strokeDashoffset: 471.2, }) tl.to(animatedPath.current, { strokeDashoffset: 0 }) }, []) after that, i create svg with circle inside it <section style={{ height: "200vh" }}> <svg ref={svgref} style={{ width: "400px", height: "400px" }} xmlns="http://www.w3.org/2000/svg"> <circle cx={200} cy={200} r={75} fill="none" stroke="black" strokeWidth={10} ref={animatedPath} /> </svg> </section> The result shows that the `pin-spacer` class has a large padding/whitespace, and the animation doesn't start properly. full link https://codesandbox.io/p/sandbox/sad-lalande-q7c578?file=%2Fapp%2Fglobals.css%3A1%2C1 Thanks in advance!

Just starting out. Trying to animate clip-path on scroll. It's working but the left side doesn't transition out.. It just jumps to end, the the right side plays fine. Can anyone see what Im missing??? thanks T

Hello, I am new to the GSAP community, I want to implement the GSAP horizontal Scroll. I have a screen of full view width and height section. I want to pause the horizontal scroll animation for 100% of the screen. In the meantime, I want to add the scroll animation to that page. For example: We are scrolling through our section and at one section our section is pinned, and then another animation starts. A new section on the right coming over the section before. Below is my implementation in the Next Js. "use client"; import React, { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Login from "./login/page"; import Register from "./register/page"; import LandingPage from "./landingPage/page"; import LandingTransition from "./landingPageTransition/page"; import Category from "./categories/page"; import CategoriesList from "./categoriesList/page"; import PhilosophyPage from "./philosophy/page"; import Header from "./__components/header/Header"; import ArchetypePage from "./archetype/page"; import { escape } from "querystring"; import Accordion from "./__components/accordians/Accordians"; import Profile from "./profile/page"; import {useIsomorphicLayoutEffect} from '../helpers/isomorphicEffect' gsap.registerPlugin(ScrollTrigger); export default function Home() { const router = useRouter(); const [activeNav, setActiveNav] = useState(null); const [toggleNav, setToggleNav] = useState(1); useIsomorphicLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: "#container1", pin: true, scrub: 1, end: "+=14000", }, }); gsap.to("#textCatogries", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: "#textCatogries", containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true, id: "2", }, }); gsap.set( ".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end", { autoAlpha: 0 } ); ["landing", "archtype", "category", "cetogiresList","philosophy"].forEach((triggerClass, i) => { ScrollTrigger.create({ trigger: "." + triggerClass, containerAnimation: scrollTween, start: "left 30%", end: i === 3 ? "right right" : "right 30%", markers: false, onToggle: (self) => gsap.to(".marker-" + (i + 1), { duration: 0.25, autoAlpha: self.isActive ? 1 : 0, }), }); }); }, []); const handleNav = (navNumber: any) => { if (navNumber === activeNav) { setActiveNav(null); } else { setActiveNav(navNumber); } }; return ( <div className=""> <Header navTheme={ toggleNav == 2 ? "bg-primary text-white" : toggleNav == 3 ? "" : "bg-[#E3FF00]" } toggleNav={activeNav === 2} handleNav={() => handleNav(2)} navCol={toggleNav} /> <div className="mainans "> <div className="containerMain" id="container1"> <section className={`panel landing`}> <LandingTransition /> </section> <section className={`panel archtype`} data-pin="true"> <ArchetypePage /> </section> <section className={`panel category`} data-pin="true"> <Category /> </section> <section className={`panel cetogiresList`} data-pin="true"> <CategoriesList /> </section> <section className={`panel philosophy`} data-pin="true"> <div className="Philosophy"> <PhilosophyPage scrollCheck={true} /> </div> </section> </div> </div> </div> ); }

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

Hi, I have an element that rotates infinitely 360 degrees using GSAP. I've also implemented direction-based rotating on scroll using ScrollTrigger. It works great initially but once you begin to scroll either up or down and the scrolling stops, the element jumps to its original rotating position and begins rotating again which isn't ideal. This is the code that I'm using: gsap.to(this.rotatingText, {rotation: 360, duration: 40, repeat: -1}); var rotate = gsap.timeline({ scrollTrigger: { trigger: "html", scrub: 0.2, start: "top top", end: "+=10000" } }).to(this.rotatingText, { rotation: 360 * 5, duration: 1, ease: "none" }) Ideally, I would love it to, be that after scrolling, it gets the element's current rotated position and then begins rotating again from that point. You can view a video screenshot of the issue here: https://www.veed.io/view/6de5e2cc-072e-45d7-bb30-d015766ae546?sharingWidget=true&panel=share Any help would be greatly appreciated. Thanks

Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem?

Hi, I have an issue with text flickering on Safari. It happens only when I scroll. On Chrome and other browsers it works smoothly. I am using ScrollTrigger to move the text to the right side. Any ideas how to solve this issue? Everything is kindly welcomed.

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

The first two sections of this animation are working almost perfectly as I intended. However, there is one issue I would like to resolve: I want the image and text to slide up before the section is pinned, and once the section is pinned, I want the image to slide down as the user scrolls, while gradually reducing the opacity of the text based on the scroll progress. There is also a major issue: when the third section starts coming into view, the animation of the image sliding up and down starts to break. Could you please review the animation in the first two sections? This is the effect I'm aiming for across all sections. Additionally, I would like the same animation to occur in reverse when the user starts scrolling back up. I would greatly appreciate your assistance with this. Thank you,

Hello everyone, I'm seeking to create an opacity transition effect that changes from 0 to 1 as soon as a section enters the viewport and becomes pinned. During this time, the opacity of the current section should transition from 0 to 1. After the pinned section's scrolling progress is complete and it is unpinned, I aim to have the opacity of the section transition from 1 to 0 while the section is being unpinned and until it moves out of the viewport. Despite attempting various approaches, I have been unable to find a successful solution. Any assistance and guidance would be immensely appreciated.

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)

Animating the camera position and camera target on scroll from section to section but it jittery(main webpage link - https://drill-rose.vercel.app/) a look at the first scroll of the code pen, that little jitter is what im trying to fix FullSizeRender.MOV

Hello, I am having some issues with pinning a section (making it fixed) while having a stacking card effect inside the pinned section. The pinned section has an image on the left and the stacking cards on the right. I want that whole section to be fixed as it scrolls to that section. The image on the left should still be show while there is a stacking card effect on the right. However, when the parent container is pinned, the stacking card effect isn't working. When I remove the pinning codes (for the parent container), the stacking card effect is working fine. What is the issue? How can I pin a section while having the stacking card effect inside that pinned section? I am using these urls for the stacking cards effect: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz https://codepen.io/GreenSock/pen/MWmVwpX Thank you!

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?

hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js

Hey, I'm New here! my question can bother you. I'm looking for a suggestion basically for my project. I'm developing a website landing section where I want to place a video on Scroll video should be play (I'm Just using a word video it can be any other bes approach) On the whole, as I study myself there are different techniques to do so. 1) video play/off on scroll like this { } 2) Image sequence { } 3) Sprite images https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 a. which technique should I follow? b. Should I work on Canvas or just HTML divs'? speed of the loading the first time is my priority as the Apple website has quick response I just want your suggestion in this way.

based on the scroll of the section I am adding an active class to the sticky menu by targeting href element through JS but while scrolling to Overview section which is a snapping section based on scroll trigger its not allowed to add an active class in the sticky menu of overview.

Hi community, I have been facing an issue with scrolltrigger animation when preventing the address bar from hiding in mobile. I have replicated my HTML structure in the below codepen demo. I just wanted to keep the address bar visible always and able to trigger the animations on scroll. After setting the overflow and position properties, the address bar is fixed now. But the scrolltrigger animations are not working as expected. The animations are getting triggered only using scroll wheel and not by touch swipe.

We have few sections with a data attribute (data-name) on each. We want to update the body classname when it enters the section. The data-name is the classname that we want to add to body. Below is my code, but it's not working: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } const sections = gsap.utils.toArray('.section'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top center', end: 'somehow get the height of each section(??)', onEnter: () => updateBodyClassName(section.dataset.name), markers: true }) }); HTML: <div class="section" data-name="class1"> <h1>One</h1> </div> <div class="section" data-name="class2"> <h1>Two</h1> </div> <div class="section" data-name="class3"> <h1>Three</h1> </div> #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. #2) Not sure is there a way to update the body/html classname when we enter a section. I know there is a toggleClass, but this isn't what we need, since the class names are all different for each section. In the code, I have 'onEnter', so when it enters a section it will trigger the updateBodyClassName() function. In this function, it should go update the body/html class name: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } For example, when we scroll to or enter section 1, the section 'data-name' value should get added to the body/html class, like below: <html class="no-js class1"> When it enter section 2, the section 2 'data-name' value should replace 'class1' from the html class (not appending class name), like below: <html class="no-js class2"> Is there a way to add a class name to body/html when it enters a section, then somehow replace the newly added class name when it enter another section? Thank you!

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

I cannot flip the car image and it always appears backwards. What am i doing wrong? And i want to show the text when the car is near red points, and hide it after, but i cannot figure it out. Any help would be appreciated)