Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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. Hey! So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker gets past the center. My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets past it? I hope my question was clear
  2. Hi all, I have created a timeline with some labels, when I created a nav links that when the link clicked, it will scroll to the selected label. I tried using tweenTo, which it's able to go to the selected label, but when i tried to scroll from the current position, it goes back to beginning, and not continue from the current position, is there a way to resolve this? The goal is, when i click on a link, the animate will scroll down/up to the selected label, then when I continue scrolling manually, it will continue from the current position, btw, I'm using GSAP 3, I tried to look search in docs and google for solution, but i cannot find any solution for it, i'm having problem interpreting the duration on the selected label with the scroll position. Regards, Ben
  3. Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks
  4. Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
  5. dear greensock, I am making this post in the hopes that someone can help me with this issue. seems absurd that i am making a post since I have been seeing this effect everywhere, but I cant' seem to make it work on my code. Im tried to reproduce the error inside a codepen I hope that helps So basically there are two things that i am missing: One: once the horizontal scroll is over, I want it to continue to vertically scroll through the rest ( the third panel, which is exactly like the first panel). What happens now is that even though the horizontal wrapper is pinned, it continues to scroll through the third panel and it kind of disappears Two: The horizontal scrolling doesn't seem to be working on a mobile device. Here is a link of a very good example of what I am trying to achieve: https://garoaskincare.com/ It is my first go at gsap so bare with me
  6. I've been trying to implement Gsap with ionic & angular and it seems like just don't work https://lampdigitalcol.web.app/666 https://stackblitz.com/edit/gsap-scroll-trigger?file=src/app/app.component.html Does anyone have any idea of why is this happening?
  7. I'm trying to recreate The Weeknd website Scrolling effect, I have written a working gsap code but I just cant crate that IMAGE CLIP EFFECT when u scroll enough that Image will pass by u. in my code, it's just scrolling and zoom but on Weeknd website, it has the effect of zooming and the image will pass by u, I'm trying to create that effect but right now I don't know how to hide an image when it becomes full zoom.
  8. I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease . Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity. For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.
  9. As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I? But back in 2017 I've made an animation that comes very close to what I want to do now: https://dumbo.design/airberlin (the laptop mockup as chapter intro) The difference to what I want now is: the laptop continues to move in the natural scroll direction very slowly (kinda like the SlowMo ease); I don't want it this time, the pinned element should be dead center and don't move at all (but of course I'll make another thread to do just that with ScrollTrigger aswell :D) the whole concept is the other way around: I "fake" the scroll, and the pin is "real" – the laptop is `position: fixed` all the time and I try to match the scroll initial movement speed with the scroll speed, which is definitely not ideal since the concept is so different, the laptop does never occupy any space and– .. it's hard for me to put into words but I just don't want to go this fixed route ever again the performance is just pure crap and I'm pretty sure not having to transform translate a fixed element until its pinned and just use the natural scroll and at the end some slight transforms to smooth things out, is way more performant than faking the entire "scroll distance" until the element stops. From what I saw you guys set `position: fixed` while pinning and set a transform translate immediately when the element gets unpinned and position: fixed got removed. Maybe there's a way to also animate the transform translate before the position: fixed gets set? Bonus: What would be reeeeally awesome is when the "ease" is not predetermined, but dynamic and reactive to the actual scroll speed. I just love the feel of `scrub: 1` and our users almost always play around with it in awe. An adaptable "pin dampener" would feel very organic Shoot it, Elders! Swing that file-size hammer. I'm ready for it 😎
  10. Hello Guys, I am a newbie to this awesome scrolltrigger plugin. I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. You can check live example here: https://algobulls.netlify.app/ecosystem-2/ Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me out. I will really appreciate it. const sectionFirst = useRef() const mainIllustrationContainer = useRef() const firstHeading = useRef() const ecoCore = useRef() const ecoMarkets = useRef() const ecoOms = useRef() const ecoBrokers = useRef() const ecoclients = useRef() const ecoStrategist = useRef() const ecoChannelPartner = useRef() const ecoDataVendor = useRef() const videoBlock = useRef() const sectionSecond = useRef() const sectionThird = useRef() const sectionFourth = useRef() useEffect(() => { let tl = new TimelineMax() tl.fromTo( ecoCore.current, { autoAlpha: 0, }, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 300", end: "center 100", scrub: true, //markers: true, }, //y: 450, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( firstHeading.current, { autoAlpha: 0, y: 0, }, { scrollTrigger: { trigger: sectionFirst.current, start: "600 300", end: "800 150", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, autoAlpha: 1, y: -100, ease: "power2.out", } ) .to(firstHeading.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "80% 300", end: "90% 100", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 1, scale: 0, ease: "power2.out", }) .to(sectionFirst.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 0", endTrigger: videoBlock.current, end: "center center", // markers: true, pin: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, ease: "power2.out", }) tl.fromTo(sectionFirst.current, { scale:1, x: 0, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top-=400 300", end: "200 200", markers: true, scrub: true, }, scale: 0.53, x: -290, duration: 3, ease: "power2.out", }) // this is the one which makes it scale 1 ///////// .to(sectionFirst.current, { scrollTrigger: { trigger: "#data-vendor", start: "bottom+=150 300", end: "bottom+=250 150", // markers: true, scrub: true, }, scale: 1, x: 0, duration: 3, ease: "power2.out", }) tl.fromTo( ecoMarkets.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top 400", end: "200 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoOms.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionThird.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoBrokers.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionFourth.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoclients.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#clients", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoStrategist.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#pro-strategist", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoChannelPartner.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#channel-partner", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoDataVendor.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#data-vendor", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( '#eco-video', { autoAlpha: 0, }, { scrollTrigger: { trigger: "#data-vendor", start: "bottom 200", end: "bottom+=200 100", // markers: true, scrub: true, }, duration: 2, autoAlpha: 1, ease: "power2.out", } ) }, [])
  11. I am using Gatsby JS and initializing smooth-scrollbar within a layout component and I've also configured the scroller proxy. Within a child component, I'm trying to setup an animation using scroll trigger but I'm not sure how to configure this. Also, the config does work after HMR fires but not after page refresh. I removed most of the markup from the page as I know the animation works - I think the issue is with syncing the scrollers. layout.js: import React, { useRef, useEffect } from "react" import Navbar from "./navbar" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Scrollbar from 'smooth-scrollbar' // import "../styles/locomotive-scroll.css" const Layout = ({ children, location }) => { const scrollerRef = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger) const scroller = scrollerRef.current const bodyScrollBar = Scrollbar.init(scrollerRef.current, { damping: 0.1, delegateTo: document, alwaysShowTracks: true }) window.bodyScrollBar = bodyScrollBar ScrollTrigger.scrollerProxy(scrollerRef.current, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value } return bodyScrollBar.scrollTop } }) window.scroller = scrollerRef.current bodyScrollBar.addListener(ScrollTrigger.update) ScrollTrigger.defaults({ scroller: scroller }) // ScrollTrigger.refresh() return () => { if (bodyScrollBar) bodyScrollBar.destroy() bodyScrollBar.removeListener(ScrollTrigger.update) } }, [location]) return ( <div className="global-wrapper scroller h-screen overflow-hidden" ref={scrollerRef}> <header className="global-header animate__animated animate__fadeIn"> <Navbar /> </header> <main>{children}</main> <footer> {/* © {new Date().getFullYear()}, Built with */} {` `} {/* <a href="https://www.gatsbyjs.com">Gatsby</a> */} </footer> </div> ) } export default Layout index.js: import React, { useEffect, useRef } from "react" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; function Index() { const outroRef = useRef() const outroContentRef = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger) gsap.fromTo(outroContentRef.current, { yPercent: "-50" }, { yPercent: "0", scrollTrigger: { scroller: window.scroller, trigger: outroRef.current, end: "bottom bottom", scrub: true, markers: true }, ease: "none" }) }, []); return ( <> {/* Page content */} </> ) } export default Index
  12. Hi, I got two problems when using Scrolltrigger pin. 1. Pinned elements have same trigger and start but the position of the markers are not the same (.photo is not correct). 2. When resizing the browser, the position of .yellow is not correct. how to solve these problems? Thanks!
  13. Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can help me, I will pray for your health from a faraway land. Thank you very much😉 海外の皆さん、こんにちは。日本は今夜の2時です。 リモートワークのおかげで、この時間まで仕事ができます。 ScrollTriggerでアニメーションをしたいのですが、私の作ったデモではどうやら難しいようです。 どうすればいいんだろうと考えて、行き着いたのが"ScrollTrigger.proxy"だったのですが、公式のドキュメントを読んでもよくわかりませんでした。 まあ私がDeepL越しでしか英語を読めないのが原因なのですが。。。。 もし心優しいGsaperがいたら、どうすればScrollTriggerをデモで動作させることができるのか教えてください。 もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします🙏
  14. GreenSock


  15. Hello! First of all, I must say that I am absolutely loving ScrollTrigger, thank you so much! I have a div that pins to the top right portion of my page when it reaches the top and stays there unless it is scrolled by again. This div also contains filters that will hide/show content below based on what is selected. Because of this, I believe I have to run ScrollTrigger.refresh() to update the elements (I am lazyloading images using ScrollTrigger.batch()). When refresh runs, my pinned div falls behind the navbar and doesn't reappear until a scroll takes place. It also causes issues with the future scrolling and will no longer pin to the top at certain points. I have a codepen created with a button at the bottom of the last section that calls ScrollTrigger.refresh() to replicate the issue. I think it might be an issue with my toggleActions values, but I haven't been able to find a combination that works properly. Thank you so much for your help!
  16. Hello Gsap, First, you guys are amazing and love every topics of it. Here is my issue: In Nuxt.js, scrolltrigger works perfectly fine on first load but when navigating between pages, i need to refresh the browser everytime for scrolltrigger to work again. Gsap and scrolltrigger are properly registered and my animation is in a mounted () hook. I believe it is something to do with Scrolltrigger.refresh or update() or kill() with the instances hook of Nuxt.js but cant figure out my head around this problem despite my research. Is there already a topic covering this issue ? Or you guys have a basic example, line of code on how to prevent this issue ? Someone had a similar situation ? Thanks in advance and have a nice day Kellig
  17. Hi All, I need your help to understand how I can build this kind of effect. The idea is quite simple, on scroll the viewport move along a big comp (gallery) but I don't know how to start :-/ Can you help me on this ? Thanks a lot scrollview.mp4
  18. I build an intro animation in which at some point a 'curtain' parts and gives way to the page behind. So far so good. Now i want to pause the animation sequence before opening the curtain and give the visitor a chance to scroll open said curtain. (If she doesn't do it I'll have play it independently.) As I have little Experience with scrollTrigger and the final setup is quite complex I would like to hear your advice: The Setup: The curtain (for now and good reasons) has position fixed and ist exactly the size of the viewport. The page under is has in most cases initially a height that is smaller or equal to the viewport height (but that might be not always the case.) I want the page to stay at its' place and somewhere in the upper half of the page an animation is playing synchronized with the curtain's opening. As I do normally not have an element that can scroll (nothing higher than the viewport) from that setup I guess I need to introduce some hidden/transparent element that either has (for example) double the viewport height, or adds additional height to the curtain or the page. I'm not sure what would be the best way to go about it. My thoughts are: Changing the height of either the page container or the curtain container itself would make trouble with the internal positioning and animations, so that seems to be the least best option. I'd prefer not to have an additional element it in the page. The content is more complex, it might change often and the page height is not predictable. Also the page is initially hidden behind the curtain and at least a litte extra effort would be necessary to receive the scrolling. (But if there are good arguments for putting the extra height in there, that all can be overcome.) My questions: Which element to extend, page, curtain or an extra element altogether? If one of the existing elements are to be used, is it better to place a high element inside, or should I put that element inside a container with extra height? I built a little abstract CopdePen to illustrate the principle. Thank you for our input.
  19. I'm trying to port over my site calexo.co from ScrollMagic to ScrollTrigger. The hardest part to port has been the product section, which works as follows: Parent wrapper set to pin at "top top" its children are the products. Each products position is set to absolute, that makes them stack on top of one another. Additionally each product has two timelines each: one to animate in/out images/copy another to animate copy bubbles (see calexo link) To achieve this in scrollmagic I would use the "offset" property. So the first product and its first timeline's offset gets '0' (plays right when pinned) second timeline's offset gets 100%. Then the next products first timeline get's an offset incrementally set to 200% and it's second 300%, so on and so forth. I've tried doing this with setting the start/end to no avail but I might be missing a detail here. Here's the basics Pinning the wrapper for 700% (total of the products. below) Products start and end get: Product 1: timeline 1: start: "top top" end: "100%" timeline 2 start: "200%" end: "300%" Product 2: timeline 1: start: "400%" end: "500%" timeline 2: start: 600% end: 700% I've been trying to put together a codepen, but so far haven't been able to get anything working but as soon as I do, I'll add here. Thanks for any input.
  20. Hi Community, iam new in GreenSock GSAP and my question is maybe fixed in few seconds. I have a timeline, so that every animations starts with the end of the previous, this all works perfectly. Now i want to give the class .services a scrolltrigger so that the animation start when the element is in the viewport - i implemented in the timeline, but i dont know if this is correct or how i can do this. All approaches are welcome - if you can tell me whats the best solution for that, it would be great. Thanks in forward Martin
  21. We have a react application that makes heavy use of GSAP & Scrolltrigger which is showing some inconsistent behavior and we need to fix it within a short timeframe. Payment is project-based with clear set of tasks -- the priority is for the Scrolltrigger issues, although it would be great to get assistance more generally. We have no idea how long this will take, we do have a project budget, so please give us a flat bid for just fixing the Scrolltrigger/React issue or for general help. We can also share the code with you, nothing fancy, if that is helpful before you determine your bid. Thanks! A very similar site: https://astraeafoundation.org/microsites/ar2019/ Our site in progress: http://tappingbones.works/icfj/Background:Our application consists of react components to apply various animation effects to content, trigger animations, etc, each component containing it's own triggering logic, and used multiple times throughout the project. Unfortunately their triggers don't appear where they should. We've refined this substantially, but have a few last details to fix for responsiveness, on window resize, and perhaps other needs to reset the animations. Could be a memory allocation issue? How the triggers are instantiated in react appears to be the solution with resetting or killing the instances of the trigger at the right points in the react lifecycle. We have a Tuesday demo of this (48 hours from now) and then need to deliver a week later. This site will have a wide audience, so it would be good for someone with solid experience shipping these sorts of animated websites to give it a once over to tighten the timing, optimize performance etc. Beyond this project, we will have similar needs in the future and will be looking for a goto developer for these kinds of frontend consulting projects as well as specific functionalities, plugins etc.Technology used in this project:ReactGsap 3ScrolltriggerGatsbyEmotionbodymovinreact-lottiegatsby image
  22. Hello everyone, Just a quick question to know if when killing the ScrollTrigger instance, it's normal the markers are left on the page? This seems weird since when refreshing (resize or manual) the markers do repaint if there has been a change... Thanks!
  23. Sup guys, First time developing a Vue.Js application and wanted to animate my #about section on scroll from the left side of the screen to the right side. I split my app into two parts: the welcome section wrapper that holds the elements I want to animate and the app that scrolls normal again. When the user starts scrolling stage-1 is applied to the master and the animation takes place: <div id="master" class="stage-0 h-100 w-100 position-relative isAnimating"> <div class="welcome-section-wrapper w-100 position-relative"> <div class="welcome-section-animated d-inline-flex w-100 h-100" > <Hero /> <About /> </div> </div> <div id="app" class="app"> <Experience /> </div> </div> When I start scrolling now it animates the section correct and disables scrolling for 3 seconds. I donßt know if this approach is right + I can´t go the way back when I want scroll up again. My first attempt was to detect when the user started to scroll and then add some classes to the sections to transform: handleScroll() { const navBar = document.querySelector(".navbar"); const master = document.querySelector("#master"); master.classList.add("stage-1"); master.classList.remove("stage-0"); var anim = gsap.timeline({ paused: false, }); anim.from("#master.stage-0", 0, { transform: "translateX(0)", }); anim.from("#master.stage-0 #about", 0, { transform: "translateX(-100vw)", }); anim.to("#master.stage-1 #hero", 0.25, { transform: "translateX(105vw)", }); anim.to("#master.stage-1 #about-content", 0.5, { opacity: 1, }); anim.to("#master.stage-1 #about", 3, { transform: "translateX(0)", onComplete: () => document.querySelector("#master").classList.remove("isLoading"), }); navBar.classList.add("bg-nav"); if (window.scrollY < 10) { navBar.classList.remove("bg-nav"); master.classList.remove("stage-1"); master.classList.add("stage-0"); } } and the corresponding transformations to animate the sections ( I excluded the transitions because they are just cubic bezier´s) /** *stage 0 */ #master.stage-0 { transform: translateX(0); } #master.stage-0 #about { transform: translateX(-100vw); } /** *stage 1 */ #master.stage-1 #hero { transform: translateX(105vw); } #master.stage-1 #about { transform: translateX(0); } #master.stage-1 #about-content { opacity: 1; } #master.isAnimating .app { display: none; } At this point I don´t really know how to setup the timeline. Any suggestions are highly appreciated! Thanks
  24. I'm using the vanilla codepen script attached to try to achieve horizontal scrolling going to the right instead of the left. Does anyone know how to do that?
  25. Hello everyone, I have an animation that needs to display only above 992px width and 700px height. however it seems i cant add more than one condition to matchMedia. What is the (proper) way to do this? (I hope you dont mind i used your matchMedia demo as a starting point for my codepen) Thanks, Patrick Rijkee