Jump to content

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

ZachSaucier last won the day on July 9

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on July 9

ZachSaucier had the most liked content!

Community Reputation

3,831 Superhero

About ZachSaucier

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

5,201 profile views
  1. That is indeed a very unhealthy practice, hah. I can't imagine that that's required if you find the core issue. I'm guessing it was an issue with a parent element then. It's not just you. Browsers are pretty forgiving but it's invalid HTML.
  2. Hey Andy. It's best to create the animations at the start and use control method to play them. The way you have it setup it will create a new animation each repeat. I talk more about how to do that in my article about animating efficiently. It also helps you avoid one of the common mistakes of using relative tweens
  3. Hey Tony, thanks for posting. Hopefully we can help. I'm not sure what you mean about an "extra panel in the beginning". Not sure what to tell you there. Try using the same code as in the CodePen demo in your non-CodePen build. If it works then you know that it's something else in your code that's messing things up. If it doesn't work, then you're setting things up wrong (maybe a wrong version number, a resource not loading, something like that). It's hard for us to help more pointedly since the demo doesn't recreate the issue.
  4. That's expected. We have a helpful post on how to remove that
  5. Nope, not that will work well. Sorry. Like I said, what you're attempting to do is very unconventional.
  6. Hey Shan and welcome to the GreenSock forums. The issue has nothing to do with GSAP's ability or usage. The issue is that if you're expecting a 60fps animation then that leaves a total of 0.0166666667 seconds per frame to not only render but also save a PNG of the state, which is a big ask if you ask me. In other words the issue is how much you're trying to cram too much into a small amount of time. Your note about how using alerts helped shows this to be the case. It would make more sense to not use GSAP's ticker to do this sort of thing. I would try pausing the animation, using .progress() to go to a certain point of your animation, save the PNG, and then once it's saved update the progress and save it again (perhaps even using a callback of whatever is saving the image). That can let you get whatever FPS you want in the final rendering.
  7. What you're trying to do is definitely non-standard. I highly doubt there's a specification that says what a position: sticky element should do if a parent element has fixed positioning. Maybe there is and I'm not aware (@Jonathan any idea?). Evidently Chrome starts applying vertical offset from that point, moving the image down, while Firefox essentially resets the top position (so the image is in its original position in respect to the parent element). There's likely gray area for how it should behave but neither implementation seems bug-free to me (though Firefox's seems more reasonable). My recommendation is to not use the layering like you're wanting
  8. Hey Greg. I'd use a vastly different approach that's more flexible and reusable: https://codepen.io/GreenSock/pen/YzwLgVj?editors=0010 Take a look and let me know if you have any particular questions
  9. Here's a fork with the layered effect working. How are you wanting the red and blue sections to behave? https://codepen.io/GreenSock/pen/mdVLvXq?editors=0010
  10. Hey Fabio and welcome to the GreenSock forums. It's unclear to me what you mean by "parallax effect" in that demo as I don't see anything parallax related besides the name of your class. The main issue with your ScrollTrigger code is that you can't have nested pinning. Is this the effect that you're going for? https://codepen.io/GreenSock/pen/gOPzZKw?editors=0100
  11. Interesting. Whoever made that script uses some weird drag handling function (that causes conflict). Applying it to the onDragEnd instead works a lot better: // onDrag: onDrag, onDragEnd: onDrag,
  12. I see. So you are wanting to scroll to a certain point in a scrubbed ScrollTrigger animation. Using your approach, the position would be off after the link click. You just have to calculate the position of that label in the Scroll Trigger's offset: gsap.utils.toArray("nav button.scrollto").forEach(function(a) { a.addEventListener("click", function(e) { const percent = tl.labels[e.target.getAttribute("data-jump")] / tl.totalDuration(); const scrollPos = myST.start + (myST.end - myST.start) * percent; gsap.to(window, {duration: 1, scrollTo: scrollPos}); }); }); https://codepen.io/GreenSock/pen/eYJrQEg?editors=0010 Note that I removed the click events for buttons 1-3.
  13. Like I said, you can get the value dynamically, set it only for the duration of the animation, and remove it at the end. Here's how you'd do it with the demo you provided: https://codepen.io/GreenSock/pen/NWxMOVJ?editors=0010 Your question really has nothing to do with GSAP - it's just properly understanding how things are displayed in a web browser So regardless of GSAP you'd have the same issue. In fact, I think you'd find it significantly harder without using GSAP.
  14. We're happy to answer any questions that you have but unfortunately we don't have the capacity to build out everything for you. We're already outlined the approach you should take. Please let us know if you have specific questions and please provide a minimal demo showing the issue along with stating the issue clearly
  15. You're using a really old version of GSAP. We highly recommend that you use GSAP 3 because it has a smaller file size, a sleeker API, and a bunch of new features. As for your question, since you're using a set animation to move the elements then you can use a set animation to highlight which one you want to be highlighted. Just create a staggered animation that applies the effect that you want to apply on the timeline that repeats.