ekfuhrmann

I made a grid with a bunch of cells that are supposed to animate a dot scaling up and down on hover, but in doing so I came across some peculiar browser quirks that one of you animation experts here may be able to help me make sense of. First-things-first on Edge (Chromium) when I hover on a cell, the dot will smoothly scale up and down as expected, but it will also occasionally leave some ghosting behind like the following: Moving a cursor over any of these points or simply re-animating the cell will usually clean it up, but it's definitely far from ideal. I figured that this had to do with GPU Acceleration, so I then went and added will-change: transform to the element, resolving the ghosting but resulting in the following... The elements become rasterized! So I figure this surely must be a Chrome issue, in fact I came across this article right here on Greensock which seems to be covering this very issue; however, it's many years old and I had hoped that Chromium would have released a fix for this by now. Meanwhile in Firefox my issues are different but equally curious. When hovering over each dot in Firefox, the animation comes off jittery, but will-change at least doesn't run into the rasterized issue Chromium browsers do have. So I'm curious if anyone has any advice on how best to go about handling this rather simple animation smoothly in a cross-browser friendly way?

Thank you so much @ZachSaucier! With your assistance I was able to get the animation done. Really cool, and quite simple in the end once I realized that my path was inverse to the ball (hence the end position being `motionPathNum - 0.33`). A completed example can be seen below, thanks again! https://codepen.io/ekfuhrmann/pen/JjbYLgg?editors=0010

I'm attempting to animate a static dot along an animated line, but I'm struggling with the Motion path tools, and may not be thinking about this in the correct way. To start, the SVG is clipped to allow me to draw an infinite line that moves up and down on repeat. In order to have it cleanly loop, I essentially duplicated the line outside of the SVG view and just move the position of it, giving the illusion of a never ending line. The illusion works well, but if there is a way any of you can think of that doesn't require doubling the width of the SVG, I'm all ears. I wish there was a `background-repeat` type feature which would have been great here. With that out of the way, all I'm trying to do is keep the dot along the line as the line moves across the screen. The dots X axis should be static, while the Y value has it move up and down. I was hopeful that I could achieve this effect using the Motion Path Plugin, but as far as I could see that results in the dot tracing along the x and y axis, rather than just the y axis. To compound on that a bit as well, the line path is exceedingly long in the SVG due to my earlier point relating to repeating the line, so the path trace isn't great. As such, I made a new path with coordinates that in theory should cover the dot along 1 full segment of the line. When looking at the codepen you will see I have commented out the Motion Path plugin for now, but someone more knowledgeable of the tool may be able to get that to work. I'm also definitely willing to go about building this differently if anyone has a better approach/idea to this rather simple animation. Thank you!

Thanks @ZachSaucier! I've edited the top post so that people can find this easier if they search for it. As always fantastic work!

Great, I really appreciate all of the assistance and hope you have a great rest of the day!

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.

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?

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!

@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!

@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.

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.

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

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!

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.

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!

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?

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!

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.

POST RESOLUTION EDIT: See Zach's comment below for a more modern approach to this problem. ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty good example of what I'm going for, with content staggering in on load, followed by then animating the lower elements in on scroll. Thanks!

This was helpful and I'm definitely getting closer. Building off of your Codepen I modified it slightly to better reflect the issue I'm running into. Since it's building the timeline each time for the list, it's overriding the prior element and ends up only looping the final iteration of the list. I'm probably missing something simple here to get this working.

@PointC, I get what you're saying about placing the tweens into their own individual timelines, but I'm really struggling with how to achieve that within this project. I've made a mess of a forked codepen trying to get something remotely resembling what you suggested but to no avail. I looked at some other nested codepens but the ones I have found tend to be hover animations, rather than a looping list of names. Any suggestions?

You understood exactly what I was asking, so thank you for that! It goes without saying that you and the rest of the GSAP team are absolutely incredible and helpful, and I can't thank you all enough! With your provided codepen examples, I was able to get pretty close to the animation I was aiming for; however it seems for every hurdle I jump over, another one comes up. I have the following timeline: tl .from($marqueeLine, 0.6, {width: 0}, 0) .fromTo($marqueeTitle, 0.6, {y: '+=100', autoAlpha: 0}, {y: '100%', autoAlpha: 1}, 0.1) .add('endLine', '+=2') .add('startList', 'endLine') // Animite in tagline[1] .from($marqueeListItemFirst, 0.4, {scaleY: '0', autoAlpha: '0', transformOrigin: '100% 100%'}, 'startList') // Animate title .to($marqueeTitle, 0.3, {y: '0%'}, 'startList') // Animate out tagline[1] .to($marqueeListItemFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 'startList +=5') .add('start') // Animate in the other taglines -- tagline[2], tagline[3] .staggerFrom($marqueeListItemNotFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'100% 100%'}, 5, 'start -=0.25') // Animate out the other taglines -- tagline[2], tagline[3] .staggerTo($marqueeListItemNotFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 5, 'start +=4.65') // Animate tagline[1], tagline[2], tagline[3] on loop .add(loopListTween, '-=0.3'); // start early so that transition is seamless Everything animates and is timed correctly up until we get inside 'loopListTween' var loopListTween = new TimelineMax({repeat: 2}); loopListTween .add('startListLoop') .staggerTo($marqueeListItem, 0.4, {autoAlpha: 1, rotationX: '0deg', transformOrigin:'100% 100%'}, 5, 'startListLoop -=0.6') .staggerTo($marqueeListItem, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 5, 'startListLoop +=4.9'); // When this finishes repeating, there is a delay between the start and end. How would you remove the delay between repeats? In the master timeline, I have this loop start 300ms early so that it seamlessly continues from the 'Animate out' tween. This works fine initially, but then does not work once within the loop, causing there to be a couple hundred MS delay between when the loop ends and the next iteration begins. Any suggestions on what I can do there? Or suggestions to make this timeline more manageable? Updated codepen can be found below. I should also mention that while your codepens were super helpful in getting me to this point, 'autoAlpha' has proved a real pain to manage as it seems that the later tweens using it override the earlier ones. This is what has lead to my 'loopListTween' having two 'staggerTo' tweens rather than the 'staggerFrom' and 'staggerTo' tween I used earlier for the partial cycle. Again, thank you for the time you've put towards helping me. I've learned a whole lot through this process so far.

Apologies for not being clear the first time, hopefully this makes more sense! I removed a lot of the unnecessary elements to make it more clear. I also added better comments into the JS to help explain what should be happening throughout the timeline. What I'm trying to have happen is for the first item in 'marquee__list-item' (tagline one) to have a different animation from the rest of the list items the first time it animates. Once that animation has passed, I then want to cycle through all of the taglines (tagline two, tagline three, tagline one) with the same animation which just repeats. My issue is that the list tween impacts my tagline one animation on the first pass. It then also has some delays in it between its repetition which makes it really easy to identify where the repeat is for it. That I know I can fix with better timing, but I'm struggling breaking out the first item animation within the list from the repeat tween that I would like to run for all of them.

To start off, I'm going to share an example of the animation I am trying to recreate. The key takeaways are that I want the first element in the list to animate differently than when the list is cycling through itself. This means that I need a one-off animation for the first list item, before it then sequences through a list that should repeat a couple times. I was able to animate the first list item the way I wanted initially, but the moment I added listTween, the alpha was no longer visible due to the staggerFrom's. How can I break off the first-one (something like first-of-type) and then cycle it back into the repeated animation thereafter? The second issue I'm struggling with is that the listTween between repetitions has a delay in which none of the listItems are visible. Is there a better way of setting this up so that they sequence for 5s at a time, but don't delay in repeating the loop? Thanks. Edit: I've made some minor tweaks so that my first list item is displaying, but still unsure of how to start the tween at the second list item and then circle back in the first one after it repeats.

Hah, well that's a bit embarrassing. That did indeed resolve my issue. The Codepen is still very much a WIP so no worries about being unsure of what was going on. Thanks for the assist and for saving me from any more hours of trying to figure out where I was going wrong.