cuberto / reeller Goto Github PK

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>

Hi, ive followed the instructions to implement, to the T.

I get this message

Uncaught TypeError: Cannot read properties of undefined (reading 'cloneNode')
    at Filler.addClones (index.module.js:183:61)
    at Filler.setClonesCount (index.module.js:216:40)
    at Filler.update (index.module.js:263:10)
    at ResizeObserver.eval (index.module.js:161:14)

My code is quite simple, im calling the function from my app.js. The reeller.js file i have only contains this

import Reeller from 'reeller';
import gsap from 'gsap';


Reeller.registerGSAP(gsap);

export default function cubertoReeller(){

    const reeller = new Reeller({
        container: '.my-reel',
        wrapper: '.my-reel-wrap',
        itemSelector: '.my-reel-item',
        speed: 10,
    });
}

Would appreciate any help you can provide!

Thanks in advance

Hey there,

Any clue about achieving a vertical direction instead of horizontal?

If it isn´t possible, do you plan to add this possiblity?

Thanks a lot.

The speed option doesnt seem to do anything

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://unpkg.com/reeller@0/dist/reeller.min.js"></script>
<script src="./js/index.js" type="module"></script>

const reller = new Reeller.Reeller({ 
   container: '#reel',
    wrapper: '#reel-wrap',
    itemSelector: '#reel-item',
    speed: 10,
});

Hey there,

I was playing with your library to implement it in my sites and wanted to achieve a pause on hover. Already tried your methods and properties and can´t get this functional.
Apart from that, I also wanted to achieve a paused marquee that only moves when scrolling (no loop movement once the scroll is produced). I also couldn´t achieve that using your docs params.

I would be very grateful if you could provide a small code with these features. If they aren´t achievable with reeller please tell me. This was a headache for me.
Keep the awesome work.

There is a slight jitter that occurs when a translate resets. That is due to the fact that the gap between each cloned node is not being taken into consideration when setting translateX. More info here https://ryanmulligan.dev/blog/css-marquee/

And also add aria-hidden="true" to cloned nodes to avoid accessibility issues.

Hello,

I try to make Reeller to work using CDN, have gsap loaded etc....

Whatever I try, I always have the same error : "Reeller is not a constructor"

Best regards,

Alex