Jump to content
GreenSock

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

GreenSock last won the day on June 12

GreenSock had the most liked content!

GreenSock

Administrators
  • Content Count

    16,837
  • Joined

  • Last visited

  • Days Won

    568

GreenSock last won the day on June 12

GreenSock had the most liked content!

Community Reputation

14,025 Superhero

About GreenSock

  • Rank
    Administrator

Contact Methods

Profile Information

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

Recent Profile Visitors

60,412 profile views
  1. Yeah, a placeholder is probably your best bet. There were various logic issues in your pen and I tweaked a few things to come up with this: https://codepen.io/GreenSock/pen/yLMZxmO?editors=0010 You were checking hitTest on the same element that you were dragging, causing false positives You should suspend the logic while the flipping is happening, otherwise you'll get hitTests that fire while things are animating and overlapping You were including the element that you were dragging in the flip animation itself, thus you'd create conflicts where an animation is trying t
  2. What's the error message exactly (from the console)? If you want some help, we'll definitely need a minimal demo please. Otherwise we're just totally taking shots in the dark and guessing
  3. Welcome to the forums, @daniel.englert. It's totally up to each ad network (we have no control over it), but last I checked every single major ad network exempts GSAP from file size calculations, at least when you use the version from their CDN. Yay! We outlined the reasons for this here and here They don't typically allow other (external) CDN links because it leaves them open to problems. It's a control thing. Like if, for example, CDNJS totally went down but thousands of Sizmek ads were pulling GSAP from CDNJS, that could make Sizmek look really bad. So
  4. I don't see any difference either, and I'm using a magic mouse. It's normal for the drawSVG version to be very slightly less performant than a basic strokeDashoffset tween because DrawSVG does a bunch of things to protect you from browser bugs. And you're not using vector-effect="non-scaling-stroke" on any SVG that's doing the draw effect, right? That can hurt performance as well.
  5. I'd recommend nailing down the animation first (forget about hooking it up to ScrollTrigger). Once you nail that, then worry about the scroll stuff. Feel free to post back here if you've got any GSAP-specific questions. Good luck!
  6. Yep, Blake is right. You need to figure out what in your code is triggering the layout changes and then call ScrollTrigger.refresh() after that. My guess is it's something like this: loader.load('models/RobotExpressive.glb', ... In other words, after that finishes loading and doing whatever it does after that, THEN call ScrollTrigger.refresh(). And there's no need to call it on DOMContentLoaded because ScrollTrigger automatically does that already.
  7. This is very doable, but I'm curious why you feel the need to use tailwind and toggle classes instead of just letting GSAP manage the necessary CSS inline. It's just an added headache to manage the class like that too. Entirely possible, though. I assume you wanted something like this? https://codepen.io/GreenSock/pen/mdWaYpd?editors=0010 There are quite a few ways to accomplish it. That's just one. Let me know if it's clear enough. Happy tweening!
  8. Potential quick fix: set your ease to "none" on all those scale tweens. I'm pretty sure it's just the nature of the easing that's causing the overlap. Short of that, I don't have time to build something for you but if I understand your goal correctly, it may not be as simple as "scale one thing up while others scale down" while expecting it to have no overlaps. If one element scales up, the others need to shift out of the way to make room. You could definitely animate the width/height so that the browser is forced to adjust the layout for you, but that's probably not the most perf
  9. I haven't had time to look through all your code, but based on your description it sounds like you must have things loading in after the page fires its "load" event, and those things affect layout (messing with start/end positions). In that case, just make sure you call ScrollTrigger.refresh() AFTER you're done loading and doing anything that affects layout. Does that resolve things for you?
  10. How about just applying the pinSpacing to the last one only?: pinSpacing: index === pinnables.length - 1, Also beware of margin collapsing. See this post for more details:
  11. Can you confirm that if you ONLY load the GSAP/ScrollTrigger files (but have NO other JavaScript executed...no ScrollTriggers created or any animations), it still won't scroll for you? Or are you saying that setting up the ScrollTriggers is what seems to cause the issue on your machine?
  12. And are you saying this issue is somehow related to ScrollTrigger? If you remove ScrollTrigger, the issue goes away? Again, I cannot reproduce.
  13. I'm having a difficult time understanding your question. Can you elaborate a bit? It seems to me like you're creating a logical impossibility. You want to pin things, but you don't want to have pinSpacing AND you want them to stay within the bounds of its container? So imagine a 200px-tall <div> that's inside a 500px container. If you pin that for 400px with no pinSpacing, how could that possibly work? The 200px <div> would end up 400px further down which goes beyond the container's bounds. See what I mean? Sorry, I may be misunderstanding what you're aski
  14. Also note that there's a helper function in the docs for making it even easier to work with Lottie animations and tie them to a ScrollTrigger. https://greensock.com/docs/v3/HelperFunctions#lottie Have fun!
×