Jump to content
Search Community

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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 853 results

  1. 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.
  2. Something wrong with titles on resize. Please see sample: https://codepen.io/Lenspre/pen/zYbgLLL
  3. First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off! Coming to my issue, I am relatively new to React/ React router. I have gone through most of the articles in the forum regarding pinning/ ScrollTrigger/ Router navigation and many more and yet fail to understand what is it that I am doing wrong. In my actual project, there are multiple components, each having their different animations. My homepage works flawlessly, the issue arises when I navigate to a different page and return to my homepage. Now I have read tons of articles stating to call ScrollTrigger.refresh() or ScrollTrigger.update() but it does not seem to work. I am using the latest version of GSAP and react router 6.22. StackBlitz link: https://stackblitz.com/edit/vitejs-vite-kdw52g?file=src%2FApp.jsx Any help is appreciated! You all are anyway appreciated Thank you.
  4. Hello, after Chrome last update, my code doesn't work anymore. Video is flickering on scroll. I activated controls on video to check the correct animation of GSAP and all seems to be good but video doesn't follow scroll correctly and needs seconds to align with the scroll position. Video is encoded correctly and since 5/6 day ago, it worked correctly an all devices and browsers. On Safari, for example, it works correctly. It seems that the problem is related to Chrome on Mac. Does anyone have a suggestion? Thanks so much. Here's the code to play video on scrub. //GESTISCO IL PLAY/PAUSE DEL VIDEO SECONDO LO SCROLL let video = document.querySelector('#thevideo'); let sections = document.querySelectorAll('.gsap--section'); /* Make sure the video is 'activated' on iOS */ function once(el, event, fn, opts) { var onceFn = function (e) { el.removeEventListener(event, onceFn); fn.apply(this, arguments); }; el.addEventListener(event, onceFn, opts); return onceFn; } video.play(); // must call .play() first, otherwise it won't trigger things to be scrubbable (weird) video.pause(); var containerH = $(".gsap--outer").outerHeight(); //TIMELINE const videoTl = gsap.timeline({ scrollTrigger: { scroller: '.inner-site', pinType: 'fixed', anticipatePin: 1, trigger: ".gsap-pincontainer", start: "top top", end: "+=" + (100 * sections.length) + "%", pin: true, scrub: 2, // markers: true, } }); videoTl.to( video, { currentTime: 14, }); videoTl.to(".gsap--outer", { y: -(containerH - innerHeight), //100% - altezza del col-span }, "<"); }
  5. Hi there, I'm working on creating an accordion that should function with both scrollTrigger and click functionality. I've attached an example that expands the accordion on scroll, but I'm unsure how to implement the click functionality to open it as well. Let me know if you can provide any help! Thanks
  6. I want the numbers to count Up when I reach a certain DOM when scrolling. But I can't.. I know there's a problem with my code, but I don't know how to fix it. [problem] 1. I don't see the start, end marker of the DOM set as a tracker. Even if it is seen, it is seen a place the is not related to the area. 2. The animation runs before the trigger element is even reached Here my code (And I'm using react base) I need your help import { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { reviewList } from './reviewList'; import RadiusInText from '../common/RadiusInText'; import style from './index.module.css'; gsap.registerPlugin(ScrollTrigger); function ClientReview() { const countEls = useRef([]); const countContainer = useRef(); useEffect(() => { reviewList.forEach((item, index) => { const countEl = countEls.current[index]; gsap.to(countEl, { innerHTML: Math.ceil(Number(item.count)), duration: 4, scrollTrigger: { trigger: countContainer.current, start: 'bottm bottom ', end: 'bottom 50%', markers: true, }, }); }); }, []); return ( <div className={style.container} ref={countContainer}> <RadiusInText content="미니빔에서 작업한 결과들을 데이터로 확인해 보세요!" /> <h3 className={style.title}> 미니빔 서비스를 추천하는 <br /> 고객의 목소리를 들어보세요 </h3> <ul className={style.review_list}> {reviewList.map((item, index) => ( <li className={style.review} key={item.id}> <h3 ref={(el) => (countEls.current[index] = el)} className={style.length}> 0 </h3> <span className={style.title}>{item.title}</span> <p className={style.explain}>{item.explain}</p> </li> ))} </ul> </div> ); } export default ClientReview;
  7. I have a large menu that I don't want visible when scrolling down the web page (aside from initially visible at the top). But I would like it to slide (scrub) into view on scroll-up. In my codepen I've reversed the progress so it does scrub, but it takes the whole page to fully reveal (even with duration set). Can I make this slide down a little quicker, while still "scrubbing" with the mouse? (scroll to bottom of codepen, then back up to see menu reveal)
  8. Hellow Everyone! Just need a little help. I only want to show the path that the SVG (Rocket )has covered and not the whole path. as the rocket goes up the path is shown. https://codepen.io/Fawad4real/pen/LYaaOZG
  9. I am currently having some problems with my first time using GSAP. This is my current code. https://stackblitz.com/edit/nuxt-starter-bjtpnn?file=app.vue,package.json How can I make the box area have the effect of the program in the CodePen?
  10. I'm trying to fire the first two tweens simultaneously, so the blob and the text should scale away at the same time, but they always fire one after another, how can I fix this?
  11. Hi Awesome, GSAP community! I'm trying to achieve scrubbing using GSAP Flip animation. I'm facing an issue while scrubbing back to the top. Any idea why it's happening? Here is the codepen URL: https://codepen.io/azizqamar7/pen/XWGozxM When the end of the element crosses the center of the screen, while scrubbing back GSAP FLIP doesn't work properly, am I doing something wrong?
  12. Hi all, thank you in advance for checking out my post! I have a video reference of what I'm trying to achieve here: https://assets.codepen.io/191332/comp.mp4 And here is the Codepen demo I have started. Note: Please view Codepen in a new tab / window and view in Full mode or increase the Codepen panel height to have a better visual of what is going on, ha! I'm stuck on understanding a few things in my forEach loop of text blocks (right column)... As noted in purple for each block, as the video shows, I'm trying to expand / show the first text block and collapse the other two. Then as I scroll into the second block, collapse the first and last block. As I scroll into the last block, collapse the prior two blocks, and keep this block expanded as you continue to scroll down the page. And two more things: Is there a way to get the current self.progress / percent value for each block so I can animate their progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub. For the 3 text bocks, is it possible to pin or hold longer on the first block, say 50% of the timeline progress, and then the other two blocks for 25% each? Hope this demo and video make enough sense and any help to point me in the right direction is beyond appreciated! Thank you all so much!
  13. import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, CustomEase, ScrollToPlugin); let indexToActivate = 0; useEffect(() => { const startScrollSection = document.querySelector(".start-features-section"); const scrollIndicator = scrollSectionIndicator.current; const featuredNodes = Array.from(document.querySelectorAll(".featured")); const featuredIndicators = Array.from(document.querySelectorAll(".features_section_indicator")); // const totalScrollableHeight = 3000; const sectionHeight = totalScrollableHeight / featuredNodes.length; console.log("sectionHeight", sectionHeight); gsap.set(scrollIndicator, { autoAlpha: 0, y: 100, }); ScrollTrigger.create({ trigger: startScrollSection, start: "top top", end: `+=${totalScrollableHeight}px`, scrub: true, pin: true, onUpdate: self => { console.log("self", self); console.log("prev", self.previous()); // const scrollPosition = self.scroll() - self.start; const scrollPosition = totalScrollableHeight * self.progress; console.log("scrollPosition", scrollPosition); if (scrollPosition > 0 && scrollPosition < totalScrollableHeight) { gsap.to(scrollIndicator, { autoAlpha: 1, y: 0, transition: "ease-in-out-cubic", }); } else { gsap.to(scrollIndicator, { autoAlpha: 0, y: 100, transition: "ease-in-out-cubic", }); } indexToActivate = Math.floor(scrollPosition / sectionHeight); indexToActivate = Math.min(Math.max(indexToActivate, 0), featuredNodes.length - 1); console.log("indexToActivate", indexToActivate); // activateCurrentSection(indexToActivate); }, }); function activateNode(indexToActivate, nodeArray, className = "active") { if (indexToActivate >= 0 && indexToActivate < nodeArray.length) { nodeArray.forEach(_node => { _node.classList.remove(className); }); nodeArray[indexToActivate].classList.add(className); } else { console.error("Index out of bounds:", indexToActivate); } } // button indicators function updateActiveFeatureIndicator() { activateNode(indexToActivate, featuredIndicators); } // scroll function updateActiveFeatureSection() { activateNode(indexToActivate, featuredNodes); } // parent function function activateCurrentSection(indexToActivate) { updateActiveFeatureSection(indexToActivate); updateActiveFeatureIndicator(); } function scrollToCurrentSection(index) { indexToActivate = index; // activateCurrentSection(indexToActivate); gsap.to(startScrollSection, { duration: 1, scrollTo: { y: indexToActivate * sectionHeight, autoKill: false, }, ease: "ease-in-out-cubic", }); } // button click featuredIndicators.forEach((numberNode, index) => { numberNode.addEventListener("click", () => { scrollToCurrentSection(index); }); }); }, []); Hello there, need help with a scrollTo issue, please I'm trying to use a scrollTo plugin to scroll to a particular height in my pinned section (startScrollSection) when I click on my (featureIndicator) button and I also expect the scroll to continue from where I clicked correctly instead of starting from scrollPosition: 0
  14. I am trying to implement a water effect with pixi.JS and GSAP I have looked through all the similar questions on here and codepen but ,any are for slider and I just want one scene. Essentially what I am trying to achieve is this (which I love): https://tympanus.net/Development/LiquidDistortion/ Tutorial here https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ But NOT as a slider and with the amplified effect on page load not slide click. I did actually manage to sort of get this working here https://staging-chfp.shereewalker.com/ But I really want the amplified effect that you get when you click to the next slide in the first link - but for this to happen on page load. So on page load it's intense but gradually dies down - though never stops moving. And even better it would speed up again (I think it's called 'wacky' in Pixi) when scrolling. Even their 'non-amplified' wobble settings are better but I can't seem to replicate them. I could probably manage to strip out the slider but I can't get the intense wobble on page load or scroll. I couldn't seem to get anywhere so I started again using the basic displacement filter demo in Pixi which is where I am at now in codepen. Oddly, when i try to add my own images, it doesn't work - but it does on my site. I am okay with gsap and scrolltrigger and trying to get my head around Pixi, but I don't know how to merge the two together. Any help would be greatly appreciated.
  15. Certainly! It seems like you're looking to implement a text animation similar to the one on the Courage Inc website using GSAP and ScrollTrigger in a React application. Here's a revised and refined version of your request: "I'm new to GSAP and facing challenges with implementing a ScrollTrigger text animation in a React project. I would like to achieve a text animation similar to the one on the Courage Inc website (https://www.courageinc.com/). Can someone guide me on how to accomplish this effectively in a React environment?"
  16. I'm trying to create scroll-triggered animations using GSAP's ScrollTrigger plugin in conjunction with SmoothScrollbar. However, despite following the documentation and various examples, I'm unable to get the animations to work as expected. Problem: The animations defined using GSAP's ScrollTrigger plugin are not triggering when scrolling the page with SmoothScrollbar. I've ensured that there are no errors in the console, and I've double-checked the integration of both GSAP and SmoothScrollbar. JavaScript code: import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import SmoothScrollbar from "smooth-scrollbar"; gsap.registerPlugin(ScrollTrigger); document.addEventListener("DOMContentLoaded", function () { const container = document.querySelector(".home-page-wrapper"); const scrollbar = SmoothScrollbar.init(container, { damping: 0.016, renderByPixel: true, effects: true, }); // Update ScrollTrigger on SmoothScrollbar scroll event scrollbar.addListener(ScrollTrigger.update); // Set up ScrollTrigger scroller proxy for SmoothScrollbar ScrollTrigger.scrollerProxy(".home-page-wrapper", { scrollTop(value) { if (arguments.length) { scrollbar.scrollTop = value; } return scrollbar.scrollTop; }, // Add other necessary properties }); // Define the animation gsap.from(".project-grids > .item", { opacity: 0, y: -50, duration: 1, scrollTrigger: { trigger: ".project-grids", start: "top 80%", end: "bottom 20%", scrub: true, }, }); }); Pug code: extends _includes/layout block title title Sample block description meta(name="description" content="") block canonical - const canonicalUrl = "" if canonicalUrl link(rel="canonical", href=canonicalUrl) block content .home-page-wrapper .hero-container .bio-text .projects .project-grids .item-1 .item-2 .item-3 link(rel="stylesheet" href="/styles/pages/home-page.module.min.css") script(src="/js/pages/main-page.bundle.js") scss code: @import "../base.scss"; .home-page-wrapper { width: 100%; height: 100%; overflow-y: hidden !important; .hero-container { width: 100%; height: 100vh; background-color: yellow; display: flex; align-items: center; justify-content: center; } .projects { width: 100%; height: 100vh; background-color: black; .project-grids { display: grid; grid-template-columns: repeat(3, 1fr); // Three columns gap: 20px; // Gap between grid items .item { width: 100%; // Full width of the grid container height: 0; // Initial height, will be set by GSAP animation padding-top: 100%; // Maintain aspect ratio (assuming square items) background-color: aqua; // Background color &:nth-child(odd) { background-color: lightblue; // Alternate background color } } } } } base.scss: @import "./reset.scss"; @import "./fonts.scss"; @import "./variables.scss"; html { height: 100%; } body { height:100%; cursor: default; color: $color-graybase; font-family: "Averta Cyrillic Regular", sans-serif; word-spacing: normal; line-height: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden !important; a { color: inherit; text-decoration: none; } } What I've Tried: Checking for errors in the console. Verifying the integration of GSAP and SmoothScrollbar. Adjusting ScrollTrigger settings and animation properties. Testing the code without SmoothScrollbar (animations work without SmoothScrollbar). Expected Behavior: The animation should trigger when scrolling with SmoothScrollbar, smoothly animating the elements as defined in the GSAP animation. Additional Information: Gulp version: 4.0.2 GSAP version: 3.12.5 SmoothScrollbar version: 8.8.4 Browser: Chrome Version 121.0.6167.140 (Official Build) (64-bit) Operating System: Windows 11
  17. Hello, I am tring to recreate one of the animation from this link https://qwery.ancorathemes.com/marquee-text/ while scrolling the text appears fron right to left and at the same time each letter appears from the bottom I tries to make a demo but the text shows small https://stackblitz.com/edit/stackblitz-starters-xpqpr5?file=app%2Fpage.tsx What have I done so far? the text show smoothly from the right while scrolling with this code useGSAP(() => { if (texto.current) { const text = new SplitType(texto.current, { types: "chars" }); // gsap.from(".char", { // y: 500, // stagger: 0.5, // delay: 0.1, // }); } gsap.to(texto.current, { xPercent: -100, ease: "none", scrollTrigger: { trigger: container.current, pin: true, scrub: 3, markers: true, start: "10% top", }, }); }); then, with the commented function gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, }); more or less the animation for the text to appear from the bottom works but a the same time until it ends a seccond scrollbar appears, and dissapear when the animation ends gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, scrollTrigger: { trigger: container.current, scrub: true, pin: true, markers: true, }, }); and if i add the scroll trigger it jsut doesn´t work as i want I also tried with a "forEach" for the individial letters vut didn´t work i can´t find a similar animation within the demos, I hope someone can give me a hint at last Thank you!
  18. I animate some elements via scrollTrigger and everything is fine. The problem is that I wish to have some nested modal windows inside the animated elements to be opened/closed via click. Obviously the modal windows should not be displayed inside the parent element but positioned absolutely inside the parent section. But scrollTrigger adds positions to the animated elements, thus making it impossible to position those modal windows relatively to the parent section. I can’t think of a way to avoid this. It would be very useful to keep the html structure as is, because the input would be like that.
  19. Hello, i am new to gsap, currently im trying to make an animation in my react apps to move a text from flex start and flex end to the center, but apparently when the website first load it kind of missed the x endpoint, but when the page is refreshed it totally works just fine as seen in the video i sent, by that how do i fix it? thanks you. React code : https://stackblitz.com/edit/github-mvd39m-xp5haf?file=src%2FApp.jsx 0129(3).mp4
  20. What i need is i want to pin the red section until scrolling inside the blue section. But it is not working properly getting blinking effect. Using next js useEffect(() => { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.create({ trigger: '.sect', start: 'top top', // pinType: 'fixed', pin: true, // preventOverlaps: true, endTrigger: '.section4', markers: true }); }); JSX Code <div className="relative bg-[#0093e8b8]"> <Object3d /> #red color section <div className="h-screen section2"></div> <div className="h-screen section3"></div> <div className="h-screen section4"></div> </div>
  21. Hi! I've been trying to use gsap scroll trigger & motion path plugin in combination. I'm trying to create a horizontal path scroller but on an inner container that overflows which I think should've made the inner container as the trigger. Somehow gsap refuses to work when I set the `sc-trigger` class on the container that overflows. I'm not sure if what I'm doing somewhat wrong. - Goal: I want to use the inner scrollbar to move the car across the path instead of the window scrollbar. - nextjs-gsap repro: https://stackblitz.com/edit/stackblitz-starters-j4gryt?file=app%2Fpage.tsx
  22. Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.
  23. I want to animate the background, but it is not continuous with the spaces between words. Is there a way that I can treat spaces as characters, so that they will be animated the same way. Thank you!!! To be as clear as possible I want the background of the spaces to be treated exactly the same as the rest of the characters
  24. Hello everyone! I'm having trouble understanding and fully controlling my animations with Scrolltrigger and scrub. What I'm trying to achieve is - i want to have two animation elements (.main-title, var points) fired by scrollTrigger with the same trigger point. However I want to animate .main-title once it's finished i want to fire the next animations which are in forEach() .animate-text with paired .country. I think i achieved that in the codepen (please feel free to correct me or show the better/more efficient way). Now i have two problems/questions: I want to have full control of the duration/amount of scroll of each animation (.main-title, each point etc) for example i want to .main-title to be fast then first point to be slow, the next point fast and the last point very slow. (By point I mean each elem in forEach()) Also i have a bug on .main-title that sometimes it does jump up/down - no idea how to tackle this. Every input/tip/better approach to the whole functionality will be much appreciated, thank you guys in advance!
  • Create New...