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. 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...
  2. 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.
  3. 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 ↓↓
  4. 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?
  5. 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.
  6. 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!
  7. 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
  8. 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!
  9. 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';`
  10. 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!
  11. 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!
  12. 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.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/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.
  13. 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.
  14. Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: https://codepen.io/team/pixelart/pen/mdVbobo In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein
  15. Hi, I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. Here is my website (try it on mobile to understand what I mean): https://tbdalen.github.io/ And here is my repo: https://github.com/tbdalen/tbdalen.github.io Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though: https://dpotferstudio.com/
  16. Hi, I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks! https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js
  17. Hey! First of all, thanks for this great plugin!!! But I have some trouble, when you enter a block, left side should be pinned and it's working good, but after entering every content block I want to remove "-=100" of yPercent of all spans, but all I'm getting only restart animation, not adding "-=100". If you uncomment in css .numbers overflow:hidden; you will understand what I want. What am I doing wrong?
  18. On resize, when disabled, the dom object keeps the animation. I want it reset to its original position when disabled. Updated code below with working resize events let tl = gsap.to(child, {y: -50}), st = ScrollTrigger.create({ trigger: child, start: "top 80%", end: "bottom 10%", scrub: true, animation: tl }); console.log(st.animation); // tween if (Foundation.MediaQuery.atLeast('xlarge')) { st.enable(); } else { st.disable(); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { if ( newSize == 'large' && oldSize == 'xlarge') { st.disable(); ScrollTrigger.refresh(true); } else if ( newSize == 'xlarge' && oldSize == 'large') { st.enable(); } });