Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

19 Newbie

About ekfuhrmann

  • Rank

Recent Profile Visitors

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

  1. Thanks @ZachSaucier! I've edited the top post so that people can find this easier if they search for it. As always fantastic work!
  2. Great, I really appreciate all of the assistance and hope you have a great rest of the day!
  3. Awesome, one last question for you. Have you figured out any good way of forwarding multiple refs to a child? In this demo we only needed the one, but I have a more complex animation that requires accessing a few additional child refs. I came across this Stackoverflow regarding forwarding multiple refs, but the solutions weren't very sure of best way of handling them.
  4. Oh Man, I'm not familiar with forwardRef but at the onset of clicking through your example, this seems to be exactly what I'm looking for. I'm going to spend some time reading up on forwardRef and making sense of how you set everything up. Thanks for the help! EDIT: Quick question @Rodrigo, I see that you make a variable for your refs, such as let modalVeil = null;, is this a better way of handling refs as opposed to createRef or is it more just a preference type of thing?
  5. Congratulations on the release of GSAP 3! The work you lot do both with your framework and with the support for it is just incredible, and I personally can't express how thankful I am to have this resource! https://codesandbox.io/s/friendly-ellis-yi33q?fontsize=14 So what I'm trying to do is to run an animation across a few components. In this example specifically, I'm trying to have a button that animates and opens a modal, which then animates the content of the modal. I got it all to open relatively well, but what I'm not able to figure out is how best to go about reversing the animation, and more specifically the `ModalContent.js` animation. What I want to have happen is for it to reverse the content, then transition the modal itself. I'm certain that the issues all lie in the way in which I set this up, so any suggestions on structuring this better (while still preserving the capabilities of animating across multiple components), I'm all ears. Also, am I correct in using refs for targeting the elements? Is there any type of drawback to having a fair amount of refs for animating? Thanks!
  6. @OSUblake with the help of your Codepen and a much simpler Class system, I was able to really improve the Codepen to a much better spot, but I'm running into one minor issue. I made the details image always visible and set it to grayscale so you can see what I'm talking about, but after running the animation once, it seems like my b.top is off by ~25px. Looking through both the Open and Close function I can't identify anything that could be causing it and was wondering if you may see something I'm missing. I also have a question regarding the following: this.image.style.cssText = ""; Is there a specific reason you used this over a clearProps within the Close timeline? Updated Codepen: https://codepen.io/ekfuhrmann/pen/EOKrEJ Again, thank you so much!
  7. @OSUblake Wow. Here I was working on a new example to simplify and refactor as @Carl rightfully suggested how confusing it was to follow and understand -- then I see your post regarding flexbox animation via capturing start/end position which got me excited -- AND THEN you drop this codepen on me. Your expertise and knowledge never ceases to amaze me! Just incredible, thank you! It's late right now and I've been working through this all day so I'm going to get some sleep and come back into it fresh tomorrow and really look through how you went about doing it. I'll most likely end up dissecting a lot of what you did to try and learn it better and adapt it for the current draft I was working on, but just having this resource will be of tremendous help. I'll absolutely be sure to reply back here and share what comes of it all, but in the meantime, again, I just can't begin to thank you both for the assistance and help you have provided. Honestly, you guys make up one of the best dev communities out there that I've come across, so genuinely thank you for that.
  8. I've made some adjustments from the original post, but I wanted to bring up a newish issue I've run into. The scaling works on the initial click and play through, but on subsequent play-throughs it no longer is applying the `from` width property. In addition, and really may be related, I have issues resetting /reversing the animation. A lot of what I tried has resulted in flickering or multiple timelines playing at once, so that's still a sore-spot I'm working through.
  9. I should start by sharing the inspiration for what I'm trying to re-create via GSAP. https://tympanus.net/Development/ExpandingGridItemAnimation/ In this example, when a grid item is clicked, the metadata for that item is captured and then populated into a modal-like view while transitioning the image (in this case a guitar) to a new location. I was able to get the metadata stuff working no problem, but have run into issues when trying to have my image transition from the clicked grid to the modal resting place. I'm a bit stumped where to go for this transitional animation. As you will be able to see in the codepen, I tried playing around with capturing the starting/ending positions and using Transform to transition it from the starting place to the resting, but things are just not lining up or working -- specifically when it comes to scaling it. Also, I'd be interested to hear some thoughts on best way of closing, or reversing the animation. I'm aware of `tl.reverse`, but since I'm killing this thing once done I'm not really sure best approaches for tackling that. I'm definitely new to OOJS and this is really my first time playing with Classes, so apologies if I set stuff up poorly. Lastly, I've also gone ahead and attached the JS file used in the tympanus demo. They used Anime for the transitions, but it may help provide some more clarity for those of you who understand GSAP/Classes better than myself: main.js
  10. Great call on the suggestion of using set() rather than to(). I swapped it to a combination of set() and immediateRender:false to get the desired effect, but it still seems strange to me that a nested timelines set() and zero duration tweens will fire immediately even with the parent timeline paused. Nonetheless this solution works well for me. Cheers!
  11. I came across a possible on load bug when trying to transition between two scenes which required a `display` change. I'm using a nested timeline to transition out 'Scene One', and then another nested timeline to transition in 'Scene Two'. Since these scenes are overlaying atop one another, I'm changing the `display` from `flex` to `none` and vice-versa depending on if the scene is coming or going. Since `display` is not animatable, I really didn't need to set a tween duration so I used `0`. For some reason it seems like despite the parent Timeline being `paused`, this forces the tween to run on load. Adding any other number > 0 will result in it working as expected. For my Codepen example, I am sharing the buggy approach. On load, you'll notice that `.scene.two` is showing (scroll down), and that the console is printing some text showing that the tween ran. If you click `.scene.one` it will animate properly to the next scene, and then clicking `.scene.two` will properly take you back to scene one, at which point it is now working correctly. The trick I came up with to resolve this issue was to pause the nested timelines. This does indeed resolve the issue, but it does seem like there may be some buggy interaction causing `0`s tweens to run early, even if they are nested in a paused timeline. I included some JS commenting to hopefully help clarify, but let me know what you think and whether or not I was misguided with my initial approach.
  12. Fantastic, that did it! I can't begin to thank you enough with helping me through this process. I'll be updating the following Codepen so that anyone who should stumble across this can see how it all came together. Many thanks!
  13. I actually initially tried that approach but wasn't making proper use of the relative position parameter. This is working significantly better than before, but still a bit strange when new rows come into view. It seems like the first or second box of new rows is ignoring the delay parameter or something along those lines, resulting in some speed up for the boxes staggering in. Forked a new pen, any thoughts? EDIT: Upon playing around with it further, I think I know the root of the problem but am not sure how to work around it. Since we're staggering each animation by `-=0.3`, this only works if it has something to stagger against. In a new row, it is starting at 0s, and then the subsequent tween is stating after 0.2s of the first since the animation is 0.5s long. This is causing it to appear to load quicker than intended. Is there a way to identify if the TL is starting up again and then changing the stagger for that first iteration of the new row?
  14. Alright, it's been awhile since I last posted in this thread, but I'm back now with an updated Codepen that makes use of the suggested Intersection Observer API, which truly is awesome. @PointC, thank you so much for the article as I found it really helpful for all sorts of other purposes beyond GSAP. In the following Codepen you'll see that initially the animation works as intended, but I'm using an incremented Timeline `delay` to create the stagger effect of elements that are in view. As you can maybe expect, the issue is that the incrementing does not reset upon a new row of elements coming into the view, lending way for some seriously long delays between elements if you scroll slowly. I feel like I'm almost there, but have been struggling to get over this hurdle. Let me know what you think!
  15. The Intersection Observer API looks really interesting. I'm messing around with it a bit to try and understand it better, but I'm also unsure of how I'd then go about combining it in my timeline. Honestly, it seems more like a replacement for ScrollMagic than anything else, so I'm not entirely sure how it would help in my instance of staggering the first few elements, and then revealing the rest on scroll. I have no issues with the scroll revealing, it's the staggering of the first few that gives me problems - even when I break them out to a new stagger timeline. If this can be done better with the Intersection Observer API, I'm willing to drop ScrollMagic, but I struggled to find working examples of implementing it with GSAP that I could understand.