Jump to content

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

GreenSock last won the day on June 29

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on June 29

GreenSock had the most liked content!

About GreenSock

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

77,221 profile views

GreenSock's Achievements

  1. Are you running that in the browser? If so, browsers require that you declare type="module" in the script tag, and I think you also need to use a relative path to the module files, like you could start with "./" assuming it's in the same folder: <script type="module"> import gsap from './gsap.js'; import { ScrollTrigger } from './gsap/ScrollTrigger.js'; ... </script> This has nothing to do with GSAP - it's just how all browsers work with any JavaScript module. It's pretty uncommon to load the uncompressed ES Module files like that in the browser, though. Typically you'd want to just load the minified UMD files and then you don't need imports at all, you get universal compatibility, and faster load times. Just load the files that end in ".min.js" (in the minified folder of the download zip, or just link to the CDN files). https://greensock.com/install
  2. Maybe this will help?: https://codepen.io/GreenSock/pen/VwXYeQm?editors=0010
  3. Hi @thunderfoot. I think I read your question 8 times and I still don't know what you're asking. Sorry
  4. Yeah, there are a lot of ways to approach this. None are super simple. You could have a paused timeline where you animate between the slides (one long linear one that goes from slide one to two, two to three, etc.). Then, use a ScrollTrigger-based timeline that simply has equally-spaced callbacks that trigger a tween to the spot on the paused timeline where the corresponding slide is. You'd just need to sense the direction from the ScrollTrigger so you know which slide to go to. Like if it's going backwards and hits the callback, it'd be going to the previous slide. Forward would be next. Good luck!
  5. Check out the helper function in the docs: https://greensock.com/docs/v3/HelperFunctions#format
  6. Here's one approach you could use: https://codepen.io/GreenSock/pen/VwXYYgb?editors=0010
  7. That's a pretty tricky scenario because you're pinning the container of the effect, throwing off the start/end positions by the distance you pin it. Here's a fork with some custom logic implemented to solve that in your case: https://codepen.io/GreenSock/pen/QWmwwGr?editors=0010 smoother.effects().forEach(st => { let v = st.vars; v.pinnedContainer = "main"; st.vars = null; st.init(v, st.animation); }); Is that what you were looking for?
  8. You can't Well, maybe I'm misunderstanding what you mean by that. There's no nesting going on here as far as I can tell. Yep, it can be a useful strategy. You can even make it depend on the previous ScrollTrigger: start: self => self.previous().end // start where the previous one ends Just beware that things get refreshed top-down, so you wouldn't want to make a ScrollTrigger depend on the next() one's positioning because it wouldn't be updated at that point. That's great, @A. Helton. Thanks for advocating for GSAP there at your company. 💚 If you need some help justifying the expense, this may help: I'm pretty confident the membership would pay for itself in a matter of weeks and then ultimately make your company more profitable considering all the added capabilities, performance, compatibility, the time it'll save your team, etc. Good luck!
  9. Hi, @orrbitt. Got a minimal demo? It's virtually impossible to troubleshoot without one.
  10. That's because you have custom logic driving all the smooth scrolling that's not taking into account the resizing. You might want to consider just using ScrollSmoother instead: https://codepen.io/GreenSock/pen/JjLojVq Otherwise, you'll need to fix your custom logic.
  11. Sure. 👍 I'd encourage you to give it a try and then if you get stuck, post back here with a minimal demo and we'd be happy to help with any GSAP-specific questions. Please read the forum guidelines. Good luck!
  12. I read your question a few times, @Tony Song, but I don't understand what you're asking. Can you please be more specific? Is there a GSAP-specific question you have? You might want to look into CustomEase.
  13. Yeah, that's why the response included this: If we just don't answer (letting others potentially fill the void), the poster may feel ignored. We bend over backwards to make sure every question gets a response, usually within a matter of hours. As stated, the goal was simply to manage expectations. As to your original question, there are many ways to accomplish it and here's one: https://codepen.io/GreenSock/pen/JjLjBVQ Two tricky things to note: Your scenario is odd because you're technically trying to make earlier ScrollTriggers base their end on a later ScrollTrigger. Since the refresh() procedure must start from the top and work down (primarily because pinned elements higher on the page can push subsequent ones further down, thus affecting their start/end positions), so it's an order-of-operation challenge. I just created another ScrollTrigger that serves the sole purpose of tracking the scroll position where the center of the LAST card hits the center of the screen so we can feed that to the other ScrollTriggers. You had margin-bottom applied to the things you were pinning. In rare cases, you can get margin collapse/contamination, so I'd recommend just wrapping your elements one layer deeper, and apply the margin to the wrapper(s) to avoid that. I hope that helps!
  14. I don't really understand the question either - can you please provide a minimal demo (like a CodePen), @Gasparo95? Every time you call that function, you're creating entirely new innerHTML (new elements entirely) that you're trying to animate. Are you sure that's what you want? Are you trying to do what SplitText does (but without SplitText)? It looks like you're using a very old syntax too - there's no need for TweenMax anymore. GSAP 3 launched many years ago and it has a more streamlined API. See A minimal demo will go a long way toward getting you an answer. 👍