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. Hello guys, I'm trying to use ScrollTrigger.batch with typescript, but I can't set the markers nor the triggers, when I try yo put the markers for instance it says: Argument of type '{ onEnter: (batch: Element[]) => Tween; markers: boolean; }' is not assignable to parameter of type 'ScrollTriggerBatchVars'. Object literal may only specify known properties, and 'markers' does not exist in type 'ScrollTriggerBatchVars'.ts(2345) my code so far: gsap.set(".work", { y: 100 }); ScrollTrigger.batch(".work", { onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true, }), markers: true, }); am I doing something wrong?
  2. Hi there! I'm a newbie - been struggling to get this working for a week now. I've created a function that animates the styling of the clicked nav-link. I also created a timeline with a scroll trigger that is supposed to call the same function when each section scrolls into view. (This is the part that's not working.) I think my mistake has something to do with scope? Sorry - I don't even exactly know what that means. The reason I think that, is because when I put the nav styling tweens directly into the Nav Animation timeline, then the animation works. If there is a more efficient way to achieve this please tell me. Thanks so much! Sonya. PS. I did manage to achieve the nav styling using scrollTrigger's toggleClass, but animating the style with css does not look as smooth.
  3. Hello, I have issue with pin feature. Everything looks fine until you get to the bottom of the page and then change tab in browser or refresh it. Then the pinned element become fixed even if he shouldn't. I don't know if it is my bad or I forgot something or..
  4. Dez


    Hi, The attached code pen is a very much simplified example of my project. The problem is, my "SUN" slows down, almost stopping after completing each rotation. I can't get it to rotate at the same continuous speed. Also another a minor problem is, after a long while my "SUN" tends to drift off the path towards a 1 o'clock position while still continuing to circle. Any help would be very much appreciated. Thanks
  5. Is it possible with ScrollTrigger to assign a pin set for both top and bottom of the viewport? So when you scroll up the element pins to the top and when you scroll down it pins to the bottom. I tried starting with the elements fixed bottom on load and as soon as you started scrolling removed the sticky class and assigned the ScrollTrigger. That resulted in the elements disappearing.
  6. Hi Guys, First Time using this forum, and I'm scared.... I made a simple scroll animation, still took me a while since I'm still learning and trying a lot of different ways. I was just wondering what the best way is to make this animation run smoothly. Right now the text is going from y: -100 to y: 100, but since I'm starting with opacity: 0 and wanting to end there as well, I made two fromtTo()'s. But (i thought) to make it run naturally one ends at y:0 and the next one starts at y:0. this makes it stop for a second. What's the best way to just make the text go from y: -100 to y: 100 in one smooth motion? Thanks a bunch!
  7. Hello! I have a header which has 100vw width and 100vh height. Inside of it there are two slides that will change each other every 5 seconds. I want my header to disappear smoothly as I scroll down. Here's my HTML: <header class="header"> <div class="header_bg1 slide"> <strong class="header_text">Slide 1</strong> </div> <div class="header_bg2 slide"> <strong class="header_text">Slide 2</strong> </div> </header> Here's my CSS: .header { width: 100vw; height: 100vh; display: flex; overflow: hidden; } .header_bg1 { background: url(assets/header1.jpg); } .header_bg2 { background: url(assets/header2.jpg); } .slide { min-width: 100vw; width: 100vw; height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; transition: transform 500ms ease; } To get the desired result I wanted to use gsap ScrollTrigger. So added CDN and the following code (js code for my slideshow is not needed): <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.to(".header", { scrollTrigger: { trigger: ".header", pin: true, scrub: true }, opacity: 0 }); </script> Everything is working nicely. The only problem is that with this gsap code my header changes its size and horizontal scrollbar appears. If I delete the line scrub: true, the scrollbar disappears. What can I do to avoid this horizontal scrollbar? Thank you very much! It is my first post in this forum and English is not my first language, so please forgive me if my explanation is not clear
  8. https://codesandbox.io/s/little-pond-kfvfq I have used scroller property and markers don't move If you want to see what I want to accomplish here Delete Position: fixed in content-scroll and remove scroller property
  9. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  10. Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller. Now what's happening now: When I scroll down full section goes up. But I don't want this. What I want: I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/ On that website, scrolling is too smooth and works perfect. I want something like that. I want the smooth scroll. Here is my js code: gsap.to(".custom_panel:not(:last-child)", { backgroundPosition: `20% ${+innerWidth / 60}px`, yPercent: -100, ease: "slow", stagger: .5, scrollTrigger: { // markers: true, trigger: "#content", start: "top top", end: "+=300%", scrub: 8, pin: true } }); gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i}); Here is my css code: #content { width: 100vw; height: 100vh; position: relative; top: 0; left: 0; overflow: hidden; } .custom_panel { position: absolute !important; will-change: transform; min-height: 100vh; } Here is my view: http://araf.dynamicflowdev.com
  11. I'm trying to animate a page with multiple sections. When scrolling, the area should be blended directly (no vertical movement). It works correctly when scrolling down (see demo). It just doesn't fit when scrolling up. What am I doing wrong? Thanks in advance!
  12. Hello there, First post here, and only just starting out using your wonderful plugins and discovering js at the same time through all this... I'm sorry if this question is not even worth asking or if there have already been talks about it (I did search without much luck). I'm basically developing a few blocks for the Gutenberg editor in Wordpress, and wanted to use ScrollTrigger to allow for scroll animations etc. The thing is, since Gutenberg is an editor, everything on the backend is dynamic (no problem for the frontend), and I was wondering if it was possible to change the values in the ScrollTrigger config so that when a user selects a type of animation (triggered by a class), that ScrollTrigger automatically updates its config and thus the user gets a real-time view of what he's selected like animation. I have tried a few things here and there, found this thread here: But I'm either going at it the wrong way or just don't understand... Is it even possible to update the ScrollTrigger config or do I have to kill it and renew it every time the class I want to toggle changes? Thanks for your help!
  13. Hey guys, I'm a bit embarrassed to post this whole mess here, I bet you have a thousand ways how I could optimize and restructure my code, all comments are welcome. But my main issue is this: This is a fairly complex (for my abilities at least) animation which was surprisingly easy and intuitive to set up with gsap and the scrollTrigger plugin. It has 8 content section that define the scrollTriggers. Everything works beautifully smooth when you scroll through it at a normal speed. (Only look at the animation please, i didn't copy and paste all the page and font formatting CSS with it, only the stuff necessary for the layout and animation) The svg "#illu-workdays" is hidden at the beginning and is tweened visible by the third scrollTrigger. It stays on and has some subtweening going on in the next few scrollTriggers but is tweened to autoAlpha: 0 and yPercent: -100 in the 7th scrollTrigger. It then stays hidden. However, if you scroll super fast all the way down from the top (or, probably a more common case would be using an anchor link jump) to the last section, some unexpected stuff happens. One of the earlier triggers seems to override the one that hides it (since it maybe has duration that's longer than it takes to get to the bottom?) , even though I would expect that the toggleActions ( I set them to "restart complete restart reset") would take care of that? Do you have any advice on how to approach this issue in particular and maybe a complex scrollTrigger animation like this in general? Thank you in advance for any help and suggestions, it is highly appreciated! Kind Regards, Simon
  14. I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion. It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things. What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy Thanks for any pointers on my mistakes, it is apparently a great education...
  15. Hi guys, I am new to GSAP. I am stuck at ScrollTrigger. I tried using ScrollTrigger for t2 and t3. But it is not working and markers are also not showing up. I tried both the ways for the markers also i.e. using true and {startColor: "green" , endColor: "red" , font-size: "12px"}. All the animations are getting activated on page load, I want them to load them when we scroll through that section. I have created timelines separately for each section. I am using https://cdnjs.com/libraries/gsap/3.3.2 for cdns.
  16. Hey, guys. Thanks to everyone who created this wonderful scrollTrigger. How about a few scrolls... scrolling in another scrolls ...there are three sections, and there are three more sections in the skin that need to be animated for the scroll. I'm sure ScrollTrigger can handle that, but what tips will be at the start... ? here's a example. ↓ example.mp4 ↓↓
  17. Welp, this is embarrassing. As my username suggests, I'm a total newbie to web design, animation, etc. And I can't for the life of me get the simplest ScrollTrigger functionality to work. They all just animate at the same time no matter what I do. What am I doing wrong?
  18. Hello there! I'm new to GSAP (and CodePen, as it so happens), I've been lurking for ages as I worked on a personal project that I wanted to include animations with. I waited for ScrollTrigger to come out and immediately jumped into it as soon as it came out! So far I'm really impressed with GSAP and hope to bring it into my work life as well. Anyway, this could just be me being an amateur, but I'm having an issue trying to pin the same thing multiple times in a row. Basically I want to stick the whole section as it hits a certain div, keep it stuck for a few hundred pixels' worth of scrolling, then unstick and re-stick it almost immediately after for another div. Unfortunately, that's creating an issue where, at least from what I understand, the scroll-start and scroll-end get all messed up because they're not accounting for the 'distance' that the section was stuck. Mind you, I tried pinning the 'page04' div by itself and then pinning 'page05' for its turn and that worked well enough... but I would later have to pin 'page05' multiple times as well and it was the same problem. Genuinely not sure if this is a bug or just a mistake of mine, can anyone please help? Thanks! PS: Please let me know if you need additional info, like I said, I'm very new at this.
  19. Hi! On my old demo i try 3.3.2 version of ScrollTrigger. ScrollTrigger with id 'Change between slides" stop working, what changed on this version? ScrollTrigger.create({ trigger: '.pinwrapper', start: `center center`, end: "center center", markers: true, id: "Change between slides", animation: tl_inout, toggleActions: "restart complete reverse complete" }) Thank you!
  20. Hi there, first of all thank you so much for having gsap and all the plugins to use!! Especially the scrollTrigger Plugin! Thanks for all that work. I am totally new to the forum, this is my first post, so hopefully i am doing everything right. If not, please let me know :). I am thinking of a case where i do have some content. After that something like a pre-footer-section (like a second navigation) and the footer itself will follow (see the codepen i provided). The pre-footer-section should stay sticky until its ghost appears and should then scroll up with the rest (like position sticky does). Is it possible to get that done with scrollTrigger? (i could use position: sticky, it would be perfect for this szenario, but if you need IE11 it will break...). Thank you in advance for your help, tomekk
  21. Hi, I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes. Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen. Thank for the help!
  22. Hello! I'm importing ScrollTrigger into a React component and noticed the ScrollTrigger import redlining. I installed gsap with yarn. I tried including the @types/gsap package but I see that all of the types are included in the gsap package already. There is a scroll-trigger.d.ts file in the gsap package but my import can't seem to find it. I've tried importing a few other plugins and they work as expected. Let me know if you have any ideas or if there's any additional info that I can provide. Thanks! Error message: Could not find a declaration file for module 'gsap/ScrollTrigger'. '[directory-name]/node_modules/gsap/ScrollTrigger.js' implicitly has an 'any' type. Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/ScrollTrigger';`
  23. Hi all, Thanks for amazing plugin, been waiting for a long time. As per my understanding we can use st.scroll() method to get/set the position. I used to jump to a progress using this method earlier in ScrollMagic. (See how I get the triggerPosition and add it to progress * duration) this.controller.scrollTo(this.controller.Scene.triggerPosition() + progress * this.controller.Scene.duration()); This is my code this.controller = ScrollTrigger.create({ trigger: '.how-it-works', animation: this.howitworksTimeline, pin: true, start: 'top top', end: '+=500%', scrub: true, markers: { startColor: 'green', endColor: 'red', fontSize: '12px' } }); const progress = this.progressMap(idx); const top = this.howitworksController.start + (progress * 5000); window.scrollTo({ top, behavior: 'smooth' }); I have written 5000 explicitly as I know scene duration. How do I programmatically get scene duration? EDIT: I figured it out, Here is the solution: const progress = this.progressMap(idx); const top = this.howitworksController.start + (progress * (this.howitworksController.end - this.howitworksController.start)); window.scrollTo({ top, behavior: 'smooth' }); * .end - .start is the duration for the scene so this should work fine. Thanks again!
  24. Hi folks, I want to use ScrollTrigger for a UI component on a mini-site but I can't come up with the best way to toggle the scroll control between elements, if thats even possible. I understand that the typical use cases is to sequence animations/events to the scrollbar for the page itself, but in this case I am trying to use that as the interface for spinning through some items in a list i.e. on s per container basis instead of the whole page. I've brute forced several combinations but cant find one that works well. The codepen I included is sourced from another developer who had the initial idea I forked from and I have restored it to a point where the basic interaction can be seen. What Im trying to change is make it so 2 of those can be on a page at the same time and use JS to toggle which of the two receives the updates. I saw the "scroller" property in the documentation but there must be something about the relationship of the trigger to the scroller element that im not grok'ing because all the ways I try to combine them i either end up with no scrolling or back to scrolling from the viewport. I was able to get one version to run with 2 on the page but they both update together because both instances react to the triggers. So something like that works if i can just disable one or the oither without having to rebuild the whole thing or lose the state of the animation by doing .disable(). Any assistance would be helpful. Thanks!
  25. This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations John Polacek paved the way in 2013 with Superscrollorama, a jQuery plugin that used GSAP under the hood. Many amazing sites were created with this highly-acclaimed, ground-breaking, and trend-setting tool. In 2014 Jan Paepke took the reins and did a complete re-write and SuperScrollarama became ScrollMagic. ScrollMagic was hugely successful as it offered a slew of new features. Excellent demo files made the tool easy for beginners to understand. Awards sites exploded with many clever effects made with the ScrollMagic and GSAP combo. However, as with many solo-led open source projects, it's popularity created a hefty support burden that couldn't be managed. As issues went unanswered in the ScrollMagic repo, more users found their way to the GreenSock forums asking for support on a product GreenSock didn't create or have any way of fixing. ScrollTrigger is born On June 1st, 2020, GreenSock released ScrollTrigger to a sold out audience via a historic YouTube Premiere. ScrollTrigger was built with a totally fresh perspective on how GreenSock animations should be controlled via scroll. Not only does the API offer more features than it's predecessors, but it has a strong focus on performance which really shines in this "mobile-first" world. And as you can expect with any GreenSock product support is phenomenal. For a full list of features, you'll need to check out GreenSock's ScrollTrigger API Docs, but my job here is to get you up and running quickly... so let's go! Watch the Video This video is from my course GSAP 3 Express. I've got over 6 hours of training and loads of exclusive demos to help you master the GreenSock Animation Platform from the ground up at creativeCodingClub.com As always, I load my videos up with info so that I don't have to write a ton of stuff, but here are some key points. Get ScrollTrigger and GSAP ScrollTrigger is hosted on a CDN along with GSAP. Just use the script tags below to load it into your page. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script> Register ScrollTrigger It's recommended to register ScrollTrigger in your JavaScript to avoid tree-shaking with build tools. gsap.registerPlugin(ScrollTrigger); You can get recent CDN Urls from the GSAP Overview in the docs. For use with npm or more advanced build tools check out the GSAP installation videos. Super Basic Demo with a Single Tween The animation is super slow so that you can see how the animation reacts to entering and leaving the scroller-start and scroller-end positions. See the Pen ScrollTrigger QuickStart by Snorkl.tv (@snorkltv) on CodePen. Control a Timeline with ScrollTrigger See the Pen GreenSock ScrollTrigger Timeline by Snorkl.tv (@snorkltv) on CodePen. GreenSock's Toggle Action Demo In the video I explained how toggleActions work and how important they are. For each toggle event (onEnter, onLeave, onEnterBack, onLeaveBack) you can assign an action (play, pause, restart, reset, resume, complete, reverse, none). You'll assign a toggleAction via a 4-part string like "restart pause resume reverse". The best way to understand how they work is to play with the values in the demos above and study the demo below. See the Pen toggleActions - ScrollTrigger by GreenSock (@GreenSock) on CodePen. I'm hoping these resources help get you up and running quickly. For more inspiration check GreenSock's massive collection of ScrollTrigger Demos. What's next? I've only scratched the surface of what ScrollTrigger can do. I'll definitely be creating more training on this awesome tool. If you need help learning GSAP and want to take your skills to the next level check out my courses at CreativeCodingClub.com.