Jump to content
GreenSock

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

GreenSock last won the day on July 6

GreenSock had the most liked content!

GreenSock

Administrators
  • Content Count

    14,831
  • Joined

  • Last visited

  • Days Won

    476

GreenSock last won the day on July 6

GreenSock had the most liked content!

Community Reputation

10,711 Superhero

About GreenSock

  • Rank
    Administrator

Contact Methods

Profile Information

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

Recent Profile Visitors

52,484 profile views
  1. I'm not at all familiar with Framer Motion, but you should certainly be able to do it with GSAP. I'd use the FLIP technique which is described here: https://greensock.com/docs/v3/HelperFunctions#FLIP Good luck!
  2. I'm not much of a React guy, but the error means you're passing in a reference to an element that doesn't exist. My guess is that this is the problem: trigger: purpleRef, // BAD trigger: purpleRef.current, // GOOD?
  3. Oh, it's just an arbitrary property name I added to the instance. No significance whatsoever. It just seemed easier than doing a loop and creating a variable for each one.
  4. Sounds like a pretty confusing UX to me, but is this what you want?: https://codepen.io/GreenSock/pen/9a8dab71f2b3c4fcaa15f76ae448d020?editors=0010
  5. Are you using GSAP 3? I'd highly recommend it. Smaller, more features, simpler API. You could simplify your code to: gsap.to(this.target, {x: boxX, y: boxY, ease: "bounce"}); Happy tweening!
  6. Oh, you want it to pin when the bottom of the sidebar hits the bottom of the screen? Sure, that's easy: https://codepen.io/GreenSock/pen/yLeErZv?editors=0010 Is that the behavior you want?
  7. @jesper.landberg I read your question a few times and I'm still not quite sure what you're asking. Did you read through the docs and watch the [new] video already? That might clear things up. Basically the scrollerProxy() method lets you say "hey, ScrollTrigger, for this particular scroller element (like 'body' or '.container'), please use these methods to interact with it instead of the standard ones because I'm gonna customize things". So your scrollTop in that configuration object should be a FUNCTION that can get or set the scrollTop. So when ScrollTrigger tries to discern the scrollTop of that element, it'll call that function and you can return whatever value you want, and ScrollTrigger will use that. Is it clearer now? There are 3 different demos on the docs page. Hopefully those serve as decent templates. Let me know if you have any other questions. Better yet, if you've got a reduced test case where you're trying to make something work (but it isn't working), please provide that. I'm sure it'll illuminate things for me so I better understand what you're asking.
  8. Yes, I see what you mean. I can't say it's unexpected behavior, but see why you'd think it is. Let me explain... Timelines are very unique in the sense that they're populated AFTER they're created. When you call gsap.timeline({...scrollTrigger:{...}}), the timeline is completely empty. Zero duration. The ScrollTrigger waits for one tick to perform its refresh() so that there's actually data in there to work with and calculate things properly (otherwise setting the progress of the animation, for example, couldn't work). This is a GOOD thing, but it's not necessary for individual tweens because they don't get populated after instantiation, thus they can refresh() right away. And keep in mind that the "start" and "end" values for the ScrollTrigger get populated in the refresh() call. It's best to have it happen as soon as it can so that things are set up properly. Each ScrollTrigger initially pauses the animation it's linked to. And then when it updates (refresh() triggers an update), it figures out if it's active or not and responds accordingly. So in your example, the ScrollTriggers linked to individual tweens refreshed immediately and updated, thus if their element is on-screen, they started playing (as they should). And THEN you called disable() on the ScrollTrigger which indeed caused the ScrollTrigger to relinquish control, but at that point they were already playing so they kept playing. Not a bug. The timelines, however, needed to wait that one tick before refreshing/updating...and by the time that happened, you had already called disable() on those, so they never started playing. See the logic? It's doing what it should even though it appears odd in your edge case scenario. Now that you understand how things work under the hood, you can adjust accordingly. If your goal is to have things paused initially, just do so explicitly, and then when you enable(), check to see if the ScrollTrigger is active and play() it if so: https://codepen.io/GreenSock/pen/3a7ebe9b99032ba5038b670383b30744?editors=0010 Does that clear things up?
  9. The problem is that (particularly with pinning) you should create your ScrollTriggers in the order they'd take effect. Your code is jumping around on the page. So you're creating a ScrollTrigger that's further down on the page FIRST, and then later you're creating a ScrollTrigger that's ABOVE that one which would push it down. It's very hard for ScrollTrigger to know your page layout and handle all of that automatically. However, this helper function should do a decent job in most cases: function orderTriggers() { let triggers = ScrollTrigger.getAll(); triggers.sort((a, b) => a.start - b.start); triggers.forEach(trigger => { trigger.kill(); ScrollTrigger.create(trigger.vars); }); ScrollTrigger.refresh(); } orderTriggers(); You'd run that function AFTER you've created all of your ScrollTriggers. Seems to work okay in your demo, right? This is a pretty rare edge case because most people intuitively create their ScrollTriggers in the proper order. Does that clear things up?
  10. Sure, here you go: https://codepen.io/GreenSock/pen/6bb02b87dd39f8a7e8f021e1b88adf17?editors=0010 Is that what you were looking for?
  11. Learn to control your animations on scroll with GreenSock's powerful ScrollTrigger in this mini-course by SnorklTV.
  12. Just for the record, the only reason that would EVER happen is if you were using one of the special trial versions of the plugins that we only make available on CodePen.io. Those have domain-sniffing so they won't run elsewhere. But the "real" plugins that you download from GreenSock.com after joining Club GreenSock have ZERO domain-sniffing code (or any restrictions whatsoever). Those would never redirect or suddenly stop working due to something like an expired membership. Happy tweening!
  13. GreenSock

    smooth page scroll

    That means you're not using 3.4.0 or later. Please update. scrollerProxy() is a brand new addition. As long as you run it when the window/documentElement/body are defined, you're fine. Obviously it should be before you create your tweens/ScrollTriggers. There's not a specific place you're required to do it, though.
  14. GreenSock

    smooth page scroll

    Hm, did you get errors or something? I wonder if you just forgot to gsap.registerPlugin(ScrollTrigger). You should absolutely be able to use ScrollTrigger in an NPM environment.
  15. Yeah, I wish we could see a reduced test case that would allow us to recreate the issue on our end. Without that, it's almost impossible for us to troubleshoot. Nobody else has reported any similar issues, and like you said it did work fine on CodePen so it must be something else in your setup. If you'd still like some help, feel free to post a reduced test case that'd let us reproduce the issue. Sorry to hear about the hassles. Happy tweening!
×