search

Vahan0799 / infinite-marquee

Infinite Horizontal & Vertical Marquee animation based on CSS and controlled with JS
MIT License
14 stars 0 forks source link

Pause and resume #1

Closed Fabiato closed 9 months ago

Fabiato commented 9 months ago

Hi, excellent library. Thank you! I was wondering how to pause the animation and resume it. More precisely I was thinking of activating the animation only when it enters the viewport and pausing it when it exits.

Vahan0799 commented 9 months ago

Hi @Fabiato, glad I could be helpful with this library :)

Since this Marquee runs purely from CSS animations, I considered not to dive deep into adding so much options that users might not find helpful and what would increase the JS package bundle size.

I will consider adding that kind of option in the future releases.

But for now you can achieve that, by adding paused class to .horizontal-marquee/.vertical-marquee element on page load after marquee initialization, that will help to prevent animation from playing at start.

To resume it when it comes to the viewport, you can use Intersection Observer and simply remove the paused class.

This is the solution that I will go with for adding in the package.

Fabiato commented 9 months ago

Hi @Vahan0799,

Thank you for the quick response. I toggled the paused class via Intersection Observer and it works! 🍻