Jump to content
Search Community

Search the Community

Showing results for tags 'scroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 241 results

  1. Hello, I did what I wanted to do, at least partially, but I could not make it work as I wanted. When I scroll to the next section, I cannot change the number, but I could not go back to the previous section and did not change the numbers in the buttons. Can you help me?
  2. When the screen width is smaller than a certain width, the content of the menu cannot be scrolled to see all the content. When the markers are deleted, the scrollbar will disappear and not work. When I add content and use ScrollTrigger, it will conflict with the ScrollTrigger used by the menu. How can I separate the ScrollTrigger of the menu and the page content so that they can work separately? This is a minimal demo URL: https://stackblitz.com/edit/nuxt-starter-gnsxip?file=app.vue,components%2FmenuModal.vue,.gitignore This demo uses Nuxt 3.
  3. Hey everyone, I'm new to GSAP and trying to learn. I've hit a roadblock. I'm trying to make something scroll immediately after it's pinned, but it's not behaving as I want. When it gets pinned, I need it to jump to 25% right away, and then jump again to the next 25% each time I scroll. Even though I tried adding snap, it's not happening instantly. I don't want it to stop scrolling at any point except every 25%. Something like this but I want it in GSAP: https://codepen.io/Fahad-Aameer/pen/YzgmeGY
  4. Greetings all! I'm a scripting noob-uh that needs some guidance. I have the animation up and running for all-black text on a white background. I need to do the same for white text on a black background. Below is what I have so far. Any help in understanding the script needed to make this work is greatly appreciated. The website. gsap.registerPlugin(ScrollTrigger); const splitTypes = document.querySelectorAll(".text-split"); splitTypes.forEach((char, i) => { const bg = "#F1F1F1"; const fg = "#000000"; const text = new SplitType(char, { types: "chars" }); // Update on window resize let windowWidth = $(window).innerWidth(); window.addEventListener("resize", function () { if (windowWidth !== $(window).innerWidth()) { windowWidth = $(window).innerWidth(); typeSplit.revert(); runSplit(); } }); gsap.fromTo( text.chars, { color: bg }, { color: fg, duration: 1, stagger: 1, opacity: 1, scrollTrigger: { trigger: char, start: "top 80%", end: "top 35%", scrub: true, markers: false, toggleActions: "play play reverse reverse" } } ); });
  5. Hi, I am seeking a developer who can build a marquee animation for text/image elements by GSAP. If anyone is interested please get in touch with me.
  6. I have been struggling to find a way to center a select number of groups from an svg in their respective container. For some reason, the groups are always a little off. The "navyDots" all need to be vertically center at the end of the timeline.
  7. Guest

    Video Scroll Animation

    Where can I find a tutorial or maybe docs or blogs where I can learn how to make a video be animated on scroll. Like every time I scroll the video runs 1 or 2 frames. I am also interested in animating movement of elements on scroll. Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again. An example would be https://zoox.com/ . Thank you!
  8. Please Help Me recreate The awesome animation In React https://www.nathansmith.design Im stuck at infinite vertical scrolling and also the scrollup effect on main text 😓 I tried to understand with context of this post but it was too hard to do so because im new to the concept : Please do help me out
  9. So First off I am new to GSAP and dang excited to use it! However I am running into an issue where I am getting a lot of whitespace after my footer. It seems to me that once the pin container stops it adds a transform:translate(); to the element div. So in this case adding 5366px to it. I don't want that to happen I want to stop at my footer and not have a whole ton of whitespace after. You can see in my Pen that I have pinSpacing: False, and a min-height of the trigger div. Yet it still applies the transform:translate(0px, 5366px) to the div. What am I doing wrong here?
  10. Hello, I've created something with infinite draggable scroll, but there's a gap forming after the last item, leaving some space between it and the first item. Also, there seems to be a slight jitter in the slider. I am sharing the error image in the attachment. Can you help me with this?
  11. Hey there, I'd like to move an element horizontally using wheel and/or drag on desktop and touch and/scroll on mobile. I've set up Draggable for easiest possible scrolling with inertia, and Observer for wheel events. I can sort of update a target value for the element to tween to, but the back-and-forth of the respective x values won't quite work. Any tips? Best regards Constantin
  12. Hello, I made a horizontal scroll animation, but I wanted it to be like the example here "https://www.brooklyneditions.com". With the scroll, the left atrium remains fixed, the content belonging to each scroll remains and the next one comes. Can you help me?
  13. Hi, I have tried this in simple gsap now I want to do it using react gsap. Kindly guide me, how can I do that what I have to import
  14. I have main section in I have a HERO section when I scroll down to horizantle-scroll-wrapper then these 3 boxes should slide from right 100% to 0% onScroll mean when I scrolled down hero then box 1 will scroll from RTL when it reach 0% then If I further scroll then 2nd box will scroll according to scroll value. when all boxes are scrolled then body will move down to footer. When I scroll from footer (bottom to top) my horizantle-scroll-wrapper content which alread moved from RTL now it should move LTR. Note We have to use GSAP //HTML <div class="main"> <div class="hero box"> <h1>hero</h1> </div> <div class="horizantle-scroll-wrapper"> <div class="orange box"> <h1>1</h1> </div> <div class="purple box"> <h1>2</h1> </div> <div class="green box"> <h1>3</h1> </div> </div> <div class="footer box"> <h1>Footer</h1> </div> </div> //CSS .main { height: 100vh; overflow-x: hidden; } .box { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; font-size: 80px; } .purple { background-color: purple; } .orange { background-color: orange; } .green { background-color: green; }
  15. is it possible to control SmoothScroller request animation frame (updates) externally ? I have react app and i need to sychnronyze better SmoothScroller with other animations i have going, and i would like to do smoothscroller animation/position calculation togetehr with my other animation.
  16. 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
  17. 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> ); }
  18. Hi there. I am trying to create a bottomsheet. As you guys can see, there is a scrollable div element inside draggable element. If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down. If scrollTop is more than 0 then it should scroll and should not be dragged. But the problem is that I cannot solve this issue. I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue. And I tried to solve this issue but i can't. How can I fix this issue?
  19. Hi, How can I achieve a similar multi-step form like the following: https://forming-typeform.vercel.app/ I am challenged by the the positioning of each form section in the center after scroll os done. I find it challenging also to have the side nav buttons to handle the scroll direction accordingly. Any ideas on implementing this with gsap or pure JavaScript and CSS will be appreciated.
  20. 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 ?.
  21. Hello, seems that I cannot get ahead with the invalidateOnRefresh mode. I want my logo (red rectangle) start scaled and vertically centered and then scale down and move to the top into the header area on scroll. In my scrollTrigger timeline there are also other things that happen so I need to have that timeline. What I achieve is the choice between 2 things both not doing exactly what I want. invalidateOnRefresh: true does nothing. If I resize the window the centering via CSS is no longer respected (I understand that gsap overwrites and memorizes it for performance reasons). If I add the onRefresh part (commented out in the Codepen) the resizing works centering the rectangle correctly, but then starting the scroll makes the element position wrong again. I need both, though! Thank you in advance! Best regards, Stefan
  22. Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!
  23. I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message animation: useIsomorphicLayoutEffect(() => { if (!width) return; if (width >= 1200) { const changeOpacity = (props: ChangeOpacity) => { const { variant = "increase", selector, start = "+=75", end = `+=${window.innerHeight}`, } = props; if (variant === "increase") { return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: (self) => { const progress = self.progress; gsap.to(selector, { opacity: progress * 2, duration: 0, }); }, }, } ); } return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: () => { gsap.to(selector, { opacity: 0, duration: 0, }); }, }, } ); }; const ctx = gsap.context(() => { changeOpacity({ selector: ".first-panel", start: `+=75`, }); changeOpacity({ variant: "decrease", selector: ".first-panel", start: `+=${75 + window.innerHeight + 75}`, }); changeOpacity({ selector: ".second-panel", start: `+=${window.innerHeight}`, }); changeOpacity({ variant: "decrease", selector: ".second-panel", start: `+=${window.innerHeight * 2}`, }); changeOpacity({ selector: ".third-panel", start: `+=${window.innerHeight * 2 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".third-panel", start: `+=${window.innerHeight * 3}`, }); changeOpacity({ selector: ".fourth-panel", start: `+=${window.innerHeight * 3 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fourth-panel", start: `+=${window.innerHeight * 4}`, }); changeOpacity({ selector: ".fifth-panel", start: `+=${window.innerHeight * 4 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fifth-panel", start: `+=${window.innerHeight * 5}`, }); changeOpacity({ selector: ".sixth-panel", start: `+=${window.innerHeight * 5 + 75}`, }); }, contextRef); return () => ctx.revert(); } }, [width, contextRef]); codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw problem: must be like this :
  24. Hi, for a school project I would like to recreate the effect as seen on this website : https://2018.craftedbygc.com/#enter The most important part is the fact to zoom in divs and go from one div to another in a smooth way, scrolling endlessly until the end, and have the animation evolve with scrolling, not just fire at a certain position. How can I achieve that ? I'm very new to gsap so I lack experience to determine the best approach.
  25. I want to implement an animation that would collect parts of the cube on a scroll. The farther you scroll, the more faces of the cube joined. I encountered a problem that the animation works only if markers: true. I read a thread on a similar case, it said that the parent has flex or that the height is not 100vh, but none of that worked for me. In the case where markers: false, the animation works until the first edge, and then the scroll works as normal, not as scrub. What are some other options to solve the problem? The link with the current problem: https://codesandbox.io/s/optimistic-poitras-cym566?file=/src/cube.tsx
  • Create New...