versoly / taos

Tailwind CSS Animation on Scroll - A simple and small (600 bytes) library to help animate elements while scrolling using responsive Tailwind CSS JIT utility classes.
https://versoly.com/taos
MIT License
243 stars 8 forks source link

Resizing? #3

Closed cmalpeli closed 1 year ago

cmalpeli commented 1 year ago

Great library! I noticed that resizing the browser on desktop causes the previously animated content to disappear. It doesn't seem to re-animate consistently either after resize. Is this s known issue? You can replicate it on the demo site.

volkandkaya commented 1 year ago

Confirmed the issue, i will need to add a check after to readd elements in view and most likely a throttle.

cmalpeli commented 1 year ago

Hi @volkandkaya did you happen to have a chance to look into this issue?

RyanRoberts commented 1 year ago

It would be good to get a fix for this :)

volkandkaya commented 1 year ago

Fixed, please give it a try.

RyanRoberts commented 1 year ago

Thanks for looking into that and updating it.

It does seem to work for the most part but the animation is still triggered again when the browser is resized. I wasn't too concerned on desktop but when I scroll down in iOS Safari's UI minimises and when you scroll up to reveals again, this seems to be triggering the animations (I guess it's a viewport or window size change?).

I can provide an example site I'm working on but I'd have to share that privately.

volkandkaya commented 1 year ago

I didn't think about mobile height changes, so I removed some code that might have fixed that (reduce bundle size).

I will test tomorrow on a Safari device.

RyanRoberts commented 1 year ago

Cool, thanks. I'm not great with JS so I don't have my own suggestions to make but with the help of a certain AI I did come up with this temporary solution that may help, or not. https://gist.github.com/RyanRoberts/6260530cf100c37a1f3bb3795dcbd1a3/revisions?diff=split

Thanks for looking into it.

volkandkaya commented 1 year ago

When resizing it needs to rerun initElement to get offsets and set the trigger for each element. I had some performance and other issues. This seemed to be the best solution.

volkandkaya commented 1 year ago

Updated can you try 1.0.5 @RyanRoberts

RyanRoberts commented 1 year ago

That's working great! Thanks for the update.

cmalpeli commented 1 year ago

Thanks @volkandkaya - I think this may still be an issue on desktop resize. Was this fix just for mobile?

volkandkaya commented 1 year ago

What issue are you having on desktop resizing @cmalpeli ?

I fixed the issue where it didn't come back after resizing and reanimates.

cmalpeli commented 1 year ago

@volkandkaya on desktop, if I resize, the previously animated content disappears and then re-animates on the next scroll event.

cmalpeli commented 1 year ago

@volkandkaya if you see here on the example site, all the animated content disappears and then re-animates on scroll when you resize the window:

https://versoly.com/taos#fade