Jump to content

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

GreenSock last won the day on April 20

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. I just updated the demo. It's just a matter of using function-based values and setting invalidateOnRefresh: true on the ScrollTrigger. https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d?editors=0010 Does it work better for you now?
  2. You might be interested in my answer to another recent post:
  3. I'm curious - is this for a class assignment or something? It looks remarkably similar to this other forums post: Well, I got intrigued and "whipped together" an effect (@PointC will appreciate that term) that'll make it super simple to zoom into certain parts of an element by animating the xPercent and yPercent and scale - you just tell it where on the image to zoom into like origin: [0.25, 0.8] would zoom into the spot that's 25% from the left, and 80% from the top (x and y axis). It automatically caps things so that the edges don't collapse toward the center, thus if you do [1
  4. Are you saying that simple CSS scroll snapping doesn't work for you? Here's a demo (without any ScrollTrigger stuff): https://codepen.io/GreenSock/pen/5153511977f9b1238d1f921ca7659eea Maybe this article would help: https://css-tricks.com/practical-css-scroll-snapping/ And for the record, ScrollTrigger works great in combination with native CSS scroll snapping. Hm, that sounds strange. Feel free to post a minimal demo for us to peek at. Should work fine even in WordPress. I didn't quite follow that - are you saying that you want the pinning
  5. Sorry, I don't have time to work my way through 1,000+ lines of code to hunt for that, especially when it's using a very old version of GSAP and an old syntax, CSS transitions, and code that goes against best practices (animating to values like transform: "translate3d(0px, 8px, 0px)" and lots of other "transform" values instead of the shortcuts like x, y, z, scaleX, scaleY, etc.). One thing you could try is disabling lagSmoothing with TweenLite.lagSmoothing(false); (which, again, is the OLD syntax - the new GSAP 3 way is gsap.ticker.lagSmoothing(false)). Good luck!
  6. Have you tried this?: start: () => `top+=${containerRef.offsetHeight} bottom`, end: () => `+=${containerRef.offsetHeight}`, If you're still having trouble, it'd significantly improve your chances of getting a solid answer if you can provide a minimal demo. Oh, and I imagine you'd want your tween's "y" value to be function-based too so that it changes when you resize: y: () => -containerRef.offsetHeight, Happy tweening!
  7. Have you poked around the demos section? Perhaps you can find some inspiration there. Here's what I imagine you were looking for, or at least it'll serve as a jumping-off point: https://codepen.io/GreenSock/pen/GRrwQRB?editors=0010 Here's a different concept (probably not what you're looking for, but I figured I'd drop it in here anyway): https://codepen.io/GreenSock/pen/rNOebyo Happy tweening!
  8. Yeah, an <img> or whatever that's having its x/y transforms animated. Not with CSS, with GSAP.
  9. I think there may be a misunderstanding of the logic though. An animation's playhead is typically controlled by its parent timeline's playhead progressing. This is part of the reason why it's not usually a good idea to nest ScrollTrigger-controlled animations inside of a timeline; it creates a scenario where the same animation is trying to be controlled by BOTH its parent timeline AND the ScrollTrigger (particularly if scrub is set). Like...if the parent playhead is moving forward, but the user scrolls backward...what's the child animation supposed to do? That's what I tried to
  10. Sure, that should be pretty doable. You may even be able to use CSS snapping. https://codepen.io/GreenSock/pen/YzyaKrq By the way, your original drawing reminded me of this CodePen too: https://codepen.io/GreenSock/pen/eYpOZvX?editors=0010 Good luck!
  11. Welcome to the community, @Popique! From a user's perspective, this sounds like a really annoying experience unless I'm misunderstanding something. So I'd arrive on the page and see the scrollbar which indicates I have a long way to scroll, but after I go a certain distance it suddenly stops me from scrolling and makes the scrollbar disappear? Then I have to click a button to get the scrollbar back and continue? Am I understanding that correctly? And what happens when I scroll back up? I can go as far as I want? But then on the way back down I keep getting stopped?
  12. We'd love to help with any GSAP-specific questions, but your demo has over 1,000 lines of code (HTML/CSS/JS) and there's just a lot going on. Plus we don't have the resources to do build-to-order solutions like "tell me how to make a slider exactly like this video". A few tips: I noticed you're using some CSS transitions. Be very careful about those. It's usually best to use GSAP for everything. Definitely don't use CSS transitions on the same elements/properties that you're controlling with GSAP because CSS transitions basically tell the browser to ignore the JS-based chan
  13. I see several problems with that approach: You're adding a new child tween into that waveAnim (which I assume is a timeline?)...inside an onLeave...in which you're actually killing that ScrollTrigger (and the associated animation). Basically it's suicide You're making one of the most common ScrollTrigger mistakes of having ScrollTriggers on child tweens: What if you just put it in a container <div> or something, so you've got your intro animation separated (affecting the inner content), and the ScrollTrigger controls the container. Perhaps I'm misunderstanding your goa
  14. Glad you got it working - sorry, I mistyped that second offset. The way I had it caused the label to be directly on top of the 2nd .set() call because labels don't take up any "space" in the timeline. I fixed that now. .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu', "+=0.001") .set('#navigation', {'pointerEvents':'none'}, "+=0.002")
  15. @Christopher Evans yeah, @Visual-Q is correct about the docs. Also, you never need to use TimelineLite, TweenLite, TweenMax or TimelineMax because in GSAP 3 they were all consolidated into a simple "gsap" object. See If you want to turn off the lagSmoothing feature, you can simply gsap.ticker.lagSmoothing(false) Does that help? Side note: the ticker is NOT the same thing as the global timeline. It's what tells the global timeline to update, typically 60 times per second.
  16. Welcome aboard, Murray! I think you're gonna grow to love the tools more and more as you learn what you can do with them. I'd strongly recommend heading over to the ScrollTrigger demos page: https://greensock.com/st-demos/ It visually shows you a bunch of demos, and you can click to see the CodePens. Your demo looks similar to this: https://codepen.io/GreenSock/pen/YzygYvM Does that help? Sounds great. Perhaps your story would unfold in a similar way as @PointC's did: We love it when the community helps each other a
  17. Yep. Think of it like an external tween that's literally animating the playhead of that heroTl timeline! So we're using GSAP to animate GSAP. 👍
  18. I think it's because you've got it set to "cover" and then you're trying to use percentages which will always match up anyway. Here's an excerpt from MDN docs: So maybe you'd want to switch to px or something. I'd personally avoid background-image animation because from my understanding, it's not accelerated and some browsers apply pixel snapping which means it can look jerky. Instead, I'd put an actual image behind there and use transforms to move it around. But that's just me Are you saying that when you scroll down on a tablet, it doesn't work? Or are y
  19. That's totally doable with GSAP/ScrollTrigger. I don't really have time to build it for you, but here are some tips: Avoid CSS transitions. Use GSAP. You'll typically get much cleaner results. The content on the left should just scroll normally in the flow of the page - the right side element should be pinned using ScrollTrigger. The "scroller" would be the default (the body/viewport). No need to set it. When you set the transformOrigin with GSAP, it applies it immediately (doesn't animate it) because that's almost always what people want. I wouldn't recommend trying to ani
  20. From my cursory glance, here's your problem: .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) You've got two set() calls at EXACTLY the same spot on the timeline. There's literally no space whatsoever between them, so when you tween to that label, it lands on top of both, and the latter one "wins" (in the forward direction, though it's opposite if you're going backwards). One solution would be to just add some space between them, even if it's like 0.001 seconds (imperceptible) .set('#navigation',
  21. Sure, it should be totally possible to do that, but it's hard for me to visualize your setup exactly. It would be really, really, REALLY helpful if you could provide a minimal demo so we can see it in context. For example, I'm not sure what ".skill" or ".lottie" refer to. I assume that maybe you meant something more like this: const lotties = document.querySelectorAll(".lottie"); gsap.utils.toArray(".skill").forEach((el, i) => { let SkillAnim = gsap.timeline({ scrollTrigger: { trigger: el, start: "top 80%", end: "bottom center", toggleActions:
  22. Welcome to the forums, @anaelyts. It'd be super helpful if you could just isolate the one thing you're struggling with and eliminate all the extra fluff like the clipPath, opacities, all the extra images, etc. because it's just kinda hard to follow exactly what you're saying the problem is. I'll offer a few thoughts... As you probably know, you're using a non-standard order of transforms which makes things tricky. One of the big benefits of GSAP is it lets you independently control each part of the transforms (x, y, scaleX, scaleY, rotation, etc.) which requires that they b
  23. Didn't you just say earlier that you always want it to keep 2 decimal places?: I'm confused. These are general logic questions that are unrelated to GSAP - we really try to keep these forums focused on GSAP-specific questions whenever possible. You should be able to just add some conditional logic to your onUpdate to do the formatting according to whatever logic you want. For example, if you want the function to skip the decimal for whole numbers: function format(value, decimals) { const a = value.toFixed(decimals).split("."); return a[0]
  24. Then just use a proxy object and then format things in an onUpdate: https://codepen.io/GreenSock/pen/a481d19080b552c3f1620cd6ac205619 Format function that takes a number, adds commas, and a fixed number of decimal places: function format(value, decimals) { const a = value.toFixed(decimals).split("."); return a[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "." + a[1]; }
  25. Bummer. Sorry to hear about the challenges, @JustinNobles. Unfortunately, this sounds like much more of an Angular issue - we just don't have the resources to provide free troubleshooting for other frameworks. We'd be happy to answer any GSAP-specific questions, though. Perhaps @OSUblake has some other suggestions, but I'm definitely not an Angular guy.