Jump to content

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



  1. Hello. This is my first proper project with GSAP, been enjoying learning and animating with it. 🙂 I have this example on codesandbox. It uses ScrollSmoother, ScrollTrigger and some timeline animations on text. Everything works perfectly in the dev preview with npm run dev. But when I build the project with npm run build then npm run start, many of the animations just dont run. Especially when using nested timelines. All of the calls are inside a useIsomorphicLayoutEffect hook and I've used context and refs everywhere. Here are some findings: The animations run when I take out ScrollSmoother (But I want to keep it) When I take the ScrollTrigger out, the animation will run All runs fine on the dev preview I wonder if anyone has had similar issues or can shine a light on what might be causing it? Preview: https://yu9mle-3000.preview.csb.app/ Build: https://modernage-web-git-main-modern-age-digital.vercel.app/ Thanks!
  2. Hi GSAP team, First of all, thanks again for your work, I'm trying to achieve a specific effect for a project I have sections which look like tiles. When we scroll, the next tile is pinned under the current one and then scrolls naturally with the page once the "tile" is fully shown. Like if you have a deck of cards in your hand and you remove them one by one by pushing them to the top. But inside one tile, I have another Scrolltrigger (the black container in the Codepen) and its start value is calculated "well" but as the tile is pinned for one moment, the start value becomes wrong and I would like to recalculate it but it looks like Scrolltrigger cannot do that Do you have an idea of how I can manage this use case? I did a Codepen to show my issue, the markers are supposed to stick to the top and the bottom of the black box Bonus question: I don't understand why the last ".content" background is cut? Cheers 🫰
  3. How do I animate the circles one at a time? Im using react, the circles works just perfectly fine but the content animates at the same time and not based on the scroll. **You can scroll to view the content
  4. I'm trying to make a super simple behaviour and found that Chrome is breaking ScrollTrigger scrub revert positioning on maximize / some resizing. Everything looks perfect in Codepen, but when I launch it from Webstorm and view it on Chrome, resize, and especially maximize, causes crazy behaviours like remembering the wrong initial values, etc. Sometimes the values are so off the element disappears. I've tried everything from ScrollTrigger.clearMemory() to invalidateOnRefresh, added a 500ms setTimeout to the resize (I've tried without), removing the initial CSS transforms and using a gsap.set at the beginning of my useEffect, using a .fromTo() with the initial transform in the from var, and any combination of the above through exhaustive googling for 2 days now. The only thing I can do is to window.location.reload() on resize which totally works but I'm not really sure if that's the best way forward here because I wonder if that will just completely mess with iOS as I heard it calls resizing on just a normal scroll (I don't own an iPhone). I know it's weird to troubleshoot since Codepen works, but if someone could send me in the right direction, or kindly take the time to verify this outside of Codepen and let me know I'm not crazy?
  5. Hi guys, I am using webpack as the tool to compile my JS. ScrollTrigger works amazing in the local dev setup, no errors. Unfortunately, when I run the `yarn build` command, the production code logs a warning Invalid property scrollTrigger set to {trigger: ".pSection", scrub: true} Missing plugin? gsap.registerPlugin() The issue is that it IS registered, and it's working fine in dev mode. This is the exact example as on your codepen https://codepen.io/GreenSock/pen/JjYPQpN import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger.js"; gsap.registerPlugin(ScrollTrigger); gsap.to(".pContent", { yPercent: -100, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); gsap.to(".pImage", { yPercent: 50, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); Steps to reproduce: I have used custom and the official facebook starterkit and they both have the same issue. npx create-react-app scrolltrigger open INDEX.JS remove all code (we don't want any react there anyway) paste following code: import "./index.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger.js"; gsap.registerPlugin(ScrollTrigger); gsap.to(".pContent", { yPercent: -100, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); gsap.to(".pImage", { yPercent: 50, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); run yarn (or npm) start , everything works fine, no errors run yarn build , (run the code that's in the build folder. e.g. python -m SimpleHTTPServer 8812 Now you'll see errors I am not sure how this is happening, happy to help if you have any clues.... Attached the zip with all the filesscrolltrigger.zip Cheers, Joris P.S I have tried setting the name as per , but that's not allowed and won't compile.
  6. Hi, im trying to stack images on scroll and pin (which i've succeeded) however now what happends is they stack on top of each other centrally. I want to choose the position of the image that is stacking. Within the container. Maybe my images will explain better: This is what i get now: And this is what i want:
  7. Hi there, This is my first post, so apologies if this has already been raised. The referenced Gsap 'Cover Layered Sections' functionality is close to what I am looking to achieve, though the only issue I have is that my content in each 'section' is deeper than the screen vertical height as shown in the codepen demo. The demo changes the state to fixed hence why it cuts off the content below the screen depth. Is there a way to have the same overlap effect, though it allows to scroll to end of section, rather than hiding beyond the screen vertical height? Thanks in advance. Kev
  8. Hi Friends, Recently I make this horizontal scroller tab: Everything Is ok but when I scroll it for horizontally and then I clicked one of the tab button and it Begins again from where it ended, and this problem clearly show in my react js project and codesandbox. Please Kindly Check my codesandbox link. Now, just I want to start it from beginning when I click a new tab button. Here is My Codesandbox Link For You: https://codesandbox.io/s/fix-this-tab-the-problem-kskoe3?file=/src/App.js Please Solve It For Me☺️ Codepen Link:
  9. Hello everyone! I'm dealing with this animation: When the background image is in the middle of the viewport, an animation should start on its black gradient overlay that leaves only the center of the photo visible with a spotlight (in Italy we call it bull's-eye light) effect (the one used in theaters on actors) and an svg appears (always on scroll) with a scale effect. Also the animation should be pinned untill it's finished. But when I pin it, the overlay square moves down and scroll on its own. In the JS code of the Codepen I wrote two functions: 1. maskRadialGradientReveal() which takes care of the timeline (scale the backround image, then apply the overlay and then scale the logo svg I'm not ble to pin the section untill the animation is finished in the maskRadialGradientReveal function. Thank you in advance as always and any suggestions are welcome!😊
  10. Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.
  11. Hi, I am trying to add a small delay to the start my ScrollTrigger timeline with scrub. Basically as soon as the pin starts the opacity begins to fade, I would like a small delay before that happens. My current solution is to use an empty tween ('.empty-tween' is not a real element) at the beginning as shown below. However, I thought this looks/feels a bit inelegant and was hoping there was a better solution. timeline = gsap.timeline({ scrollTrigger: { trigger: '.logo_block_content_block', start: 'center center', end: '+=100%', scrub: true, pin: 'body', pinSpacing: false } }) .to('.empty-tween', {opacity: "1"}, "scene-0") .to('.example', {fill: "#F5F5F5"}, "scene-1") .to('.example1', {opacity: 0}, "scene-1") .to('.example2', {fill: "#1C3661"}, "scene-2") .to('.example3', {fill: "#6fc4c2"}, "scene-2") .to('.example4', {fill: "#6ab651"}, "scene-2") Many thanks, Liam
  12. Hi, I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed. When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13") This is the code that I'm using to init the ScrollTriggers is: this.fixedElements.forEach(element => { ScrollTrigger.create({ trigger: element, start: "top top", end: "bottom top", pin: true, markers: true, pinSpacing: true, }) }) And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update() this.accordions.forEach(accordion => { accordion.addEventListener('click', e => { ScrollTrigger.refresh() }) }) Any help would be greatly appreciated. Thanks, Dayne
  13. I want to make the sections overlap when the bottom of the current section is in the viewport, at which point the new section will overlap it. I want all the sections to overlap each other Here an example https://www.polybion.bio/ Thanks
  14. I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } });
  15. Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js
  16. Hi all I seem to completely stuck on what I hope is a trival mistake/issue on my behalf, but I cannot seem to resolve so any help would be greatly appreciated! Some context... I am building a site with Nuxt 2 + GSAP and working on a simple scroll interaction on the home page. It can be broken into a few small steps to help illustrate the desired outcome: A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page The inner page content is then transformed down by `transform: translate3d(0, 100vh, 0)` and on close of the splash is transformed back up to simulate a parallax effect over the splash page Then, nested inside the inner page content there are three 100vh full-bleed image sticky sections (with nested headline etc) that have predefined `width: 100%'; height: 100vh; position: sticky; top: 0;` styles making them overlap on scroll. We are then using a scrollTrigger to animate the headline and images to show and reveal on scroll i.e. hide first image when next image reaches the top (and should probably be using pinning for the sticky sections?!). My issue is that on first render/load the markers are positioned incorrectly and then work perfectly on window resize or returning to route. I seem to have determined this due to the translate set on the parent container on load (when the splash is active). I have been able to reproduce the issue in a minimal Nuxt 2 + GSAP repo here: https://stackblitz.com/edit/nuxt-starter-qp4xkc?file=pages/index.vue From what I have read in other issues, calling `ScrollTrigger.refresh()` once we know the DOM is ready and/or when the splash transition is complete, should recalculate the scrollTriggers but testing refresh hasn't resolved the issue. Nesting the `ScrollTrigger.refresh()` inside a `setTimeout()` to wait for the splash transition to end works inconsistently and doesn't feel like a production safe solution? I have also tried changing the CSS on the parent i.e. pushing down the content down using padding or margins instead of translating but the issue persists. I know from experience that's always best to go all GSAP and not mix elements with CSS (i.e. the sticky panels) but I just can't seem to get it to work.. Hoping I just have some logic mixed up and would appreciate any guidance!
  17. I'm working on an animation effect where the items appear as an overlay to the previous element on scroll, but when I use animation to translate Y, it adds extra white space at the bottom, which I don't want. I also experimented with the scroll snap effect. But that didn't work either.
  18. Hello,guys! I am a designer and front-end green hands, learning Gsap and implementing some mouse-scrolling web animations in ReactJS. But it doesn't work when I use it. I hope to get your help. Thank you very much. I expect something similar to this example import "./styles.css"; import { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function App() { const containerRef = useRef(); const pageRef = useRef(); const Container = document.querySelectorAll(".container"); console.log(Container); const Page = document.querySelectorAll(".page"); console.log(Page); useEffect(() => { gsap.to( Page, { xPercent: -100 * (Page.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: true, end: () => "+=" + Container.offsetWidth } }, [] ); }); return ( <div ref={containerRef} id="container" className="container"> <div className="page" id="red" ref={pageRef}></div> <div className="page" id="green" ref={pageRef}></div> <div className="page" id="blue" ref={pageRef}></div> <div className="page" id="yellow" ref={pageRef}></div> <div className="page" id="pink" ref={pageRef}></div> </div> ); } .App { font-family: sans-serif; text-align: center; } .page { width: 100vw; height: 100vh; } #red { background-color: rgb(202, 62, 62); } #green { background-color: green; } #yellow { background-color: yellow; } #blue { background-color: blue; } #pink { background-color: pink; } .container { display: flex; flex-shrink: 0; width: 500vw; flex-wrap: nowrap; } * { box-sizing: border-box; padding: 0; margin: 0; }
  19. Hello! my specific problem is that I'm trying to figure out how to disable ScrollTrigger animation when the screen width is under 800px. My guess is that I have to use matchMedia? and maybe .disable()? But I can't really get it to work. Any help is appreciated! I recreated the issue in the provided Codepen
  20. Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
  21. Hello! I have a usage problem and I'm wondering if what I'm trying to achieve is feasible with gsap. From the CodePen demo, I am looking for the following flow: 1. Scroll the page until section 2, not being 100vh, is at the top of the viewport 2. When section 2 is at the top, scroll the 3 images in the left part. The right part must remain fixed. Section 3 must remain visible and fixed during this scroll. 3. When the scrolling of the images is finished, resume the "normal" scrolling of the page (scroll into section 3) My problems: - In the current demo, I manage to have this sticky effect and get the images scrolling. However, the section below (section 3 in blue) is not visible when scrolling the images. I tried to set pinSpacing: false but I don't get the expected result. - At scroller_start, image 1 is well centered in the left part of section 2. I can't manage to configure the scroller_end so that image 3 is also centered in the left part of section 2, when the "normal" scroll resumes. Any help would be very much appreciated!
  22. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  23. hi, I have a big problem after updating the gsap library from 3.6.1 to current version. In the first case (version 3.6.1) everything work fine, but in the current version is a problem with scroll after firing animation, only the first animation works correctly but the next animations after firing it moves scroll to top (it is big jump ~100vh). On iOS mobile devices, the first and second solution working well and this problem not happend. I prepared two codesandbox, the first is with version 3.6.1 (next 11) and the second with the current version (gsap: 3.11.4, next: 13). I tried update next in my project but problem is the same and next version is not important in this case. If someone want to test it please test on mobile, because in devtools everything is ok. Codesandbox gsap 3.6.1: https://codesandbox.io/s/gsap-3-6-1-47r3qv Live: https://47r3qv.sse.codesandbox.io/ Codesandbox gsap 3.11.4: https://codesandbox.io/s/gsap-3-11-4-6fn5m0 Live: https://6fn5m0.sse.codesandbox.io/
  24. Hey guys, i am trying to make an x amount of sections and i want each section to have its animation. The only thing is that i don't know how to adjust the height (or duration) for each section because i want each section's duration to vary. For example, in the codepen i provided i'd like: 1. for the first section to scroll 2000px , during that time the svg elements will move at a different speed upwards creating a parallax effect 2. for the second section the svg camera is coming up on top of the first section and zooming in its squared display (by scaling up the camera), at which point when the display's border touches the screen's viewport width the third section will appear from the center. So its duration should be longer than the first section's duration. Basically i want absolute control over the entrance and exit points of each section as well as their duration. I messed around with the start and end values of each section quite a lot and i can't wrap my head around it. Any help is greatly appreciated!
  25. Hi y'all! I've been trying for a few days to get my sections working horizontally and vertically (https://codepen.io/EricCV/pen/wvPQXKB?editors=0010) with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything😓 I only make it work in one direction, not both (https://codepen.io/EricCV/pen/JjOeZPL?editors=0010) Another option could be to do it in this way (https://codepen.io/EricCV/pen/dyZQKKE) but snapping the slides Any idea to try something? I'm stuck and I need some push I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated... Also any feedback to improve my gsap code would be perfect Many thanks