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


Everything posted by ZachSaucier

  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.
  16. Thanks for the demo. The issue is that you're animating the width of the #imageWithText which, since it keeps its aspect ratio, changes the height as well. There are a lot of methods of avoiding this, the best depends on your needs. In general I try to avoid using floats. You could rebuild the layout using some other layout instead. Don't animate the width/height. Instead use transforms which affect the rendered values but not the ones that affect other element's positioning. Set an explicit height for the container. That way the container doesn't change height based on the content during the animation. You could even get the end height, set it to that for only the duration of the animation, and then in the animation's onComplete remove the set height. Hiding the other content like you show in your second demo is also an option if that's alright. That's fine, but generally it's better to use the "fork" button in the bottom right to create a new version for future changes
  17. In that case you could use a timeline. But Blake's approach of trying to use an array of values (if you have a chained sequence perhaps an array of array of values might be better) is a good way to keep your code DRY (don't repeat yourself). Side note: Using GSAP's .defaults() might help you need to type less code. Also for your ease you should use the condensed form: ease: "none".
  18. Hey piet. Unfortunately we don't have the capacity to build out the entire project for every person who posts in the forums. If you have a question related to GSAP we're happy to help Happy tweening.
  19. Hey mfk and welcome to the GreenSock forums. As mvaneijgen said, you can concatenate the value with a string. Using your function it should look something like this: start: "top " + get_start(),
  20. There are a couple of things going wrong in that pen. You're attempting to use a tweenTo on a timeline controlled by a ScrollTrigger every time someone clicks... That doesn't make that much sense. You're immediately setting the scroll position for the button.scrolltrigger element. It won't animate if you're using that approach. Why not just use the original approach in the demo that I linked? Why do you need these other attempts at methods? What's your end goal?
  21. That's what the demos in the documentation page that Jacked linked to are doing. Can you please try to explain what's not like what you're wanting?
  22. Hey ashthornton and welcome. Yes, that is definitely possible. The trick is to not create the ScrollTriggers until you want the animation to start playing. I show how to do that when the page is scrolled the first time in this thread:
  23. In order to help you with the actual implementation we need more information. How are the cards being moved? Using a tween like you are doing in the demo? Or by the regular scrolling of the page? I understand that there are an infinite number of cards but that doesn't explain the mechanism of movement. If it's moving using a tween/timeline, how are you creating that animation? Will the page be scrollable like your demo is? If so, do you expect the middle element regardless of the scroll position to be the one that's active or the one in the middle if the scroll position is 0? Lots of unknowns at this point.
  24. Hey Jordan and welcome to the GreenSock forums. Based on the title of your post I thought your issue was something a bit more pressing (like maybe someone was dying, hah). This is just a regular question. Maybe next time just include the part after the : There are a lot of ways to set this up. One is using ScrollTrigger and having a different ScrollTrigger for each card. Another way is to use Draggable's .hitTest method. Another is to use .elementsFromPoint.
  25. Hey kuglix. What do you mean "jump/scroll to animations"? ScrollTrigger bases everything off of the scroll position of the page... ScrollTrigger also works great with ScrollToPlugin: https://codepen.io/GreenSock/pen/bGVjLwG Please create a minimal demo of your issue if you'd like our help