Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Options don't work as expected? #2

Open
mepatterson opened this issue Oct 20, 2022 · 0 comments
Open

Options don't work as expected? #2

mepatterson opened this issue Oct 20, 2022 · 0 comments
Labels
bug Something isn't working enhancement New feature or request

Comments

@mepatterson
Copy link

mepatterson commented Oct 20, 2022

My expectations with the following options set are:

  • The marquee will not be moving when the page loads (paused: true)
  • If I make the .reel container big enough to fit everything, it will not create any clones and no need to run the marquee (clonesMin:0 and clonesOverflow: false)
  • When the animation does run via .resume(), it will run backwards (reversed: true)
  • If I made the container a relative width, I could expand the window and the animation would stop if everything fits (autoStop: true)

None of these things work as expected. As soon as the page loads, it just starts scrolling the marquee, no matter what I change in the options. Am I fundamentally missing something or misunderstanding all the options? Because this library animates really nicely and would seem to fit my needs better than anything else I've found, if I could just get it to work as I'm expecting...

const reeller = new Reeller({
      container: '.reel',
      wrapper: '.reel-wrapper',
      itemSelector: '.reel-item',
      clonesMin: 0,
      clonesOverflow: false,
      paused: true,
      reversed: true,
      autoStop: true
    })
    <div class="reel w-96 rounded border">
      <div class="reel-wrapper flex text-sm uppercase">
        <div class="reel-item mx-2 flex-none">Lorem</div>
        <div class="reel-item mx-2 flex-none">ipsum</div>
        <div class="reel-item mx-2 flex-none">dolor</div>
        <div class="reel-item mx-2 flex-none">sit</div>
        <div class="reel-item mx-2 flex-none">amet</div>
        <div class="reel-item mx-2 flex-none">consectetur</div>
        <div class="reel-item mx-2 flex-none">adipisicing</div>
        <div class="reel-item mx-2 flex-none">elit</div>
      </div>
    </div>
@Drafteed Drafteed added enhancement New feature or request bug Something isn't working labels Oct 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants