Since there are no keyframes, is there a way to remove a finished animation and attach a new one?
pegasusnotunicorn opened this issue · comments
I would love to use something like keyframes to make complex animations but it doesn't seem like this library supports that.
Is there a way that maybe we can remove the Parallax animation once its completed and attach a new one? Maybe like an event handler or something.
Thank you!
@pegasusnotunicorn it doesn't yet. There seems to be some interest in such a feature so I may support it in the future.
Currently the least hacky way I can think of achieving such effects is mocked up in this CodeSandbox. Basically I'm using two effects with different animations that happen in sequence. Honestly wouldn't recommend it though, probably some edge cases that would break expected behaviors.
Can you describe your use case for me so I can consider it for a future change to the API to support keyframes?
Yeah I was thinking about this some more after posting it. I figured it would have to use separate start/end scroll values to accomplish.
Well for my use-case, I want the element to animate, then maybe stick with the scroll (position fixed) for a bit, then animate out of view in a different way.
Might have to play around with using the callbacks and merge the animations and pause it at halfway or something like that. Hope I am explaining this correctly lol.
Ya that could work. If you end up making it work post the code in case anyone else tries the same thing. You could also just use ScrollTrigger by GSAP - might seem overkill but probably more suited for something like this.
I'll keep thinking on how to adapt the API for keyframes.
I thought onExit was only called when the element left the viewport but it seems to also be called when you first load a page and any elements with this callback are not in view. So it's called even if you never entered an element before.
Might need to update the docs on this.
Found this by trying to stagger parallax animations with separate start/end scroll values
@pegasusnotunicorn thats a bug, you can track a fix here: jscottsmith/parallax-controller#2
Thanks for catching it.
This should be fixed now, patch published in v3.0.3
@pegasusnotunicorn it doesn't yet. There seems to be some interest in such a feature so I may support it in the future.
Currently the least hacky way I can think of achieving such effects is mocked up in this CodeSandbox. Basically I'm using two effects with different animations that happen in sequence. Honestly wouldn't recommend it though, probably some edge cases that would break expected behaviors.
Can you describe your use case for me so I can consider it for a future change to the API to support keyframes?
So I'm trying to do multiple animations with separate start/end scrolls like in your CodeSandbox but it seems to bug out when scrolling really fast. It even bugs out for your CodeSandbox. Try scrolling like super fast and you'll see that the rectangle for a split second goes somewhere it shouldn't according to the animation.
You can also see it live on my website here - sharehomethegame.com. If I scroll too fast or even just change the tab the animations get wonky and the elements move to places it shouldn't be. Then if I slowly scroll again it jumps to where it should go.
Any idea what might be causing this?
Thank you so much!
It's so strange that even just something like changing tabs causes this issue
Hmm, i'm not seeing anything unusual on my end in the demo or your site. It is lagging a bit on your site but the animation seems to behave correct even when I'm scrolling wildly. Wondering if it's a browser issue. I tested on Safari and Chrome.
Based on what you describe it sounds like it could be related the elements not updating quickly enough -- like the animation frames are dropped, or an issue with the caching of positions. Might try and isolate the animation a bit to see if one in particular is causing the issue since it seems you have layered a few that move parent elements.
I'm testing on Chrome Version 98.0.4758.80 (Official Build) (x86_64)
Here is a GIF of what I am seeing on your CodeSandbox. See how around the 8s mark the rectangle appears a bit to the right when scrolling very fast. Even though it will never be there in the entire animation.
Screen.Recording.2022-02-07.at.2.32.28.PM.mov
I am seeing the same thing happening in Safari Version 15.3 (15612.4.9.1.7, 15612)
On my website it's even more janky looking since I have more complex animations.
Ya, these are dropped animation frames. You're seeing the end of the animation in my sample shown incorrectly because it didn't have time to update. The lag is exacerbated the more effects and animations you use. Record a profile in Chrome's performance tab to see dropped frames.
I would pair things down, probably not have every effect tied to scroll. Trigger animation at scroll positions instead. Also make sure your image assets are optimized. You may have better luck with performance. If not try GSAP -- its more suited for robust timeline animation anyway. Good luck!
I see. Thank you so much for all your help.
I have just decided to bite the bullet and migrate over to GSAP for my use-case.