Jump to content
Search Community

ekfuhrmann

Members
  • Posts

    54
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ekfuhrmann's Achievements

  1. @PointC Is exactly right of what I was going for. I really appreciate you and @OSUblake mentioning the added difficulty in going the route of the fork you made. This animation is a simplified example of what I am currently working on and having an understanding of whether or not it was trivial to make it go back to that start in a direct line or not really was what I was looking to learn from this thread. I'm going to play around with both methods and see what feels best within the scope of my animation. Thanks for taking the time to better fill in my mental model of working with GSAP. Ah perfect. Thank you for that!
  2. Thanks for this @PointC. Could you explain how .to(".circle", { rotation: "0_short" }, 0) works. I'm unfamiliar with 0_short and couldn't find anything on it when searching. This really does almost nail what I'm going for, but is there a way to have it always go straight in rather than loop back towards the top like in my attached gif?
  3. I have an issue where I want to reverse a timeline that has a repeating tween but am unsure of how to best accommodate it. In this example, I'd like to essentially ignore the rotation tween, and only reverse the y transform. Perhaps reverse isn't correct here and I'm better off just adding a new tween on close that reverses the y? What I want to happen in this example is that when I click the toggle, it instantly brings the inner__circle element back into the parent, ignoring however many iterations of repeat there has been.
  4. Terrific, I imagine there is no real way to avoid the flicker that occurs before the page finishes loading for JS like that outside of hiding it until it's loaded?
  5. Happy New Year, hope you all are doing well and enjoyed the holidays! My question is whether or not it's possible to get an animation "mid-progress" in GSAP similar to the way CSS keyframes work when playing an animation from a negative value?
  6. Thank you so much Blake, as always you have been an immense help with learning more about GSAP and getting animations working. This is working wonderfully in my React app, so that did the trick placing them into the same effect! The amount of help and knowledge you and the rest of the team offer is great and I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers. I can only hope one day I can get to the point of thinking about these problems as the way you do. Nonetheless, thanks again and I hope you all have some nice upcoming holidays ahead of you!
  7. This is exactly what I'm looking to do. Mind explaining what gsap.quickSetter does and how it works? I also plan to use this as a React component. Do you know if there are any challenges that may be associated with using proxy elements in React?
  8. Hey there, I'm trying to have a scrubber that can be moved on the X axis, as well as expanded/collapsed on both the right and left using a couple handles on each side. Using draggable it was easy enough to get the scrubber to move as wanted, but I'm running to trouble having the handles resize the scrubber. I think I got it somewhat working in the sense that the scrubber is resizing in relation to my cursor drag, but the handle is flying all over the place so something is messed up in my logic no doubt.
  9. @Cassie Unrelated to this thread, I just wanted to let you know I came across your blog not more than a few hours after you responded here, not realizing that you were one in the same as cassie.code until realizing your avatars matched up. Anyway I shared your blog with my team because of just how beautiful and well put-together it is. It's a great site and I just found some humor in that you also just so happened to assist me with my animation question here. Sometimes it can feel like a small world thanks to little interactions like that, thanks for everything you do!
  10. Wow this thread has been incredibly helpful. @Cassie thank you so much for identifying that the pacing would never work due to them needing different easing curves. I really struggled with identifying why the dot seemed to either be so much quicker or so much slower than the path. @GreenSock this is such an interesting implementation and the first time I'm delving into custom-eases so thank you so much! I also really appreciate the commenting in the file!
  11. I've posted about a similar technique a few months back that you all helped me with, but when trying to recreate the same idea, I'm really struggling getting the timing of the dot to sync with that of the line. A few things to consider is that the dot is near the end of the path when it plays, so there is an offset, but even the speed of the line and the motion of the dot seem to be off so I think I'm just approaching it wrong? Outside of trial and error plugging in numbers, is there any way to better identify what the start and end values should be?
  12. Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP. https://codepen.io/ekfuhrmann/pen/QWvGBjz
  13. Great stuff, thank you both @OSUblake and @GreenSock!
  14. Yes! That's terrific. Is there any way to have the timeline already "started" so to speak so that the initial state on the page has the rings? Basically this being frame 0:
  15. Hey there, I created a CSS example of what I'm trying to create in GSAP. The issue I'm running into is I can't figure out in the docs how to simulate a negative animation delay outside of building individual timelines for each ring and then running all of those timelines from specific points of time and looping those timelines. A part of me feels there needs to be a better approach to such a simple loop such as this, but perhaps that's not the case? In my head it'd be nice if there is a yo-yo like function I can apply to a stagger tween that rather than going from forwards to back, it repeats itself on an individual tween level (as opposed to a timeline level). So with that said, what would be the best way to approach this animation from the context of GSAP?
×
×
  • Create New...