'Jump' happening at the end of each 'loop'

[richgcook]

I'm wondering if you're also seeing a 'jump' in the marquee... I'm guessing at the end of each 'loop'?

You can see it happening here after a while... https://adeletypefoundry.eu/

Thoughts? Or garbage?

👽

[ezekielaquino]

Hey Richard!

I’ve gotten the same feedback before: the behaviour is not consistent tho— sometimes it’s there and sometimes its smooth. I’m definitely looking into it and improvements soon :-)

Best, E

On 8 Nov 2017, 21:59 +0100, Richard Cook notifications@github.com, wrote:

I'm wondering if you're also seeing a 'jump' in the marquee... I'm guessing at the end of each 'loop'? You can see it happening here after a while... https://adeletypefoundry.eu/ Thoughts? Or garbage? 👽 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[richgcook]

You the man, thanks E.

[gitrormeister]

Hi Ezekiel, Love the script. I added a comment via email. I see this on my page as well (workstation/iphone/ipad). It will run a full loop on launch then just past perhaps 1/4 of the string (a little wider than the width of the <div width="640px" @ approximately "DEW"> it starts over from the beginning. Here's the actual string if it will help. (it's reformatted xml from wunderground):

    <p>

• • • Redmond Ridge GC 11th Green Weather - - - Updated: 01/02/2018 8:40:00 AM   TEMP: 31.5 F (-0.3 C)   DEWPOINT: 28.4 F (-2.0 C)   PRECIP-RATE: 0.00 in (0.0 mm)   PRECIP-TTL: 0.00 in (0.0 cm)   WIND: Calm   WIND-DIR: North   PRESSURE: 30.35 in (1027.7 mb)   HUMIDITY: 88% 

Many thanks, ~r

[gitrormeister]

One additonal thought. When I peek behind the curtains, I notice 3 versions of "marquee3k__copy". Not sure if this is by design, but I wonder if one of them is overstepping the other?

[sus-boi]

+1

[hansgohr]

Hey there,

im having the same issue I guess, if possible could you have a quick look at http://neu.madspankow.de/ to figure out if this is the same issue or if maybe I've implemented the script in a wrong way? Thanks in advance :) H

[ghost]

@ezekielaquino any news about the 'jump' issue?

[danielcampagne]

I fixed it using   instead of spaces.

[fritzweisshart]

@danielcampagne fixed it for me too. Thanks.

[VoidZA]

I think I figured out what the issue is, it is calculating the width of the content before starting incorrectly. If you set the inner wrapper of your marquee to have css -> white-space: nowrap then it should stop jumping. Something like this:

<div class="marquee3k">
    <div style="white-space: nowrap">
        <span>test test test </span>
        <span>hello hello hello </span>
        <span>yes yes yes </span>
        <span>abc abc abc </span>
    </div>
</div>

[ndimatteo]

Also getting a jump, even with the white-space implemented. It seems to happen on initial load only. As in, if I resize my screen the jumping goes away.

I have a strong feeling this has to do with font-display: swap or something with the styles not being loaded in yet when the initial calculation is made.

[VoidZA]

@ndimatteo do you have the init wrapped in a document ready?

$(document).ready(function () {
    Marquee3k.init();
});

You can also try wrapping it in a timeout, just to try figure out if the issue is with it being loaded in too soon or not:

$(document).ready(function () {
    setTimeout(function () {
        Marquee3k.init();
    }, 5000);
});

[ndimatteo]

@VoidZA This is in a react site, so init is being called in a useEffect

[till-kammertoens]

I had the same problem, fixed it by applying

width: max-content;

to the (only) child element of the element with class=marquee3k.

[el-sphere]

I have tried pretty much all these solutions but couldn't stop the issue. The only site I've found not having the issue is this one: https://theface.com/.

If anyone find the solution...

[ezekielaquino]

Hi guys! Sorry, I really haven't had the time (and same passion for marquees) to maintain and answer (I know)! But just some quick hunch on why the jump. trying to be as general here as I don't know everyone's use case... the plug-in calculates the content width and consequently the animation on instantiation; meaning, for example, if on load the marquee is already instantiated and you are using a custom font which hasn't loaded yet, then there would be a jump, since the actual "real" width was not accounted for. Same is true and is possible with images. Make sure the content is already "set" before asking the marquee to do its thing. If you do have dynamic contents, then you'd have to recall/update the instance. Would be glad if anyone found the cause and suggest a PR 🙏

It's 2021, and will totally try to say hi to marquees again and update ❤️ (I've learned a lot since I made this and can maybe make it 4K ✨)

[gitrormeister]

I've experienced this issue from day one. In my case, I believe it has to do with the fact my text value length changes every 5 minutes when I update the HTML. I am reporting weather information (temp, dew-point, barometer, wind, gust, uv, precipitation, etc). I have found that most of the time the scrolling is precise. However, there are times when it would jump. I have experimented with adding hard spaces to my text (" ") for every space in the string. While this seemed to reduce the issue, it still will jump on occasion.

On Mon, Jan 25, 2021 at 3:03 PM el-sphere notifications@github.com wrote:

I have tried pretty much all these solutions but couldn't stop the issue. The only site I've found not having the issue is this one: https://theface.com/ http://url.

If anyone find the solution...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ezekielaquino/Marquee3000/issues/7#issuecomment-767168774, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACEQAQ2TA6HLGFG4KHI5VLLS3X2CXANCNFSM4EC4D3MQ .

[ted399]

Had the same issue. In my case it seems that it was caused by initializing the marquee before custom font was loaded. Ended up fixing it this way:

document.fonts.ready.then(function () {
    Marquee3k.init();
});

[gbsimon]

Had the same issue. In my case it seems that it was caused by initializing the marquee before custom font was loaded. Ended up fixing it this way:

document.fonts.ready.then(function () {
    Marquee3k.init();
});

Wow, yup, I think that's the solution! Thanks

[gitrormeister]

@ted399 Gave your code snippet a try. It definitely sounded like a plausible explanation. Unfortunately in my case it continues to re-appear randomly. Again, in my situation I have variable length text that can change a character or two on each 5 minute refresh.

edit: Interesting. I was playing my banner simultaneously on an iPad, and iPhone. The iPad worked flawlessly, but the iPhone jumped. Makes me wonder if screen width is at play.

[martaareosa]

Hey! I was also having all these jumping problems (using both images and text on the marquee), and tried everything here.

Then I was looking for websites where this was working and found this (https://stillwater-sparkling.com/) with both images and text with marquee which was working smoothly.

Turns out there was an eventListener at the .js that was doing wonders fo this!

Marquee3k.init({
    selector: 'marquee3k',
});
window.addEventListener('load', (event) => {
   Marquee3k.refreshAll();
});

Solved my problem, so it might be useful!

[till-kammertoens]

I used it on a new project, this time I found a new fix for the jump, or for one possible cause of it: The (only) child of the .marquee3k element had a margin-right of 10px. When I changed the margin-right for a padding-right (which was possible in this case) the jump stopped happening.

[egemenerd]

I changed the following code (line 62);

for (let i = 0; i < this.requiredReps; i++) {

with the following (I just changed "<" with "<=");

for (let i = 0; i <= this.requiredReps; i++) {

After this change, one more ".marquee3k__copy" is created and this fixed the problem for me.

[mfa777]

Hi, on newest version v1.1.1 this issue still exists.

Here is my HTML structure

    <div class="marquee3k" data-speed="0.5" data-pausable="bool">
        <div class="inline w-max">
            <a href="#1" class="whitespace-nowrap">
                Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous saw thoughts the humoured.
            </a>

            <a href="#2" class="whitespace-nowrap">
                No depending be convinced in unfeeling he. Excellence she unaffected and too sentiments her. Rooms he doors there ye aware in by shall. Education remainder in so cordially. His remainder and own dejection daughters sportsmen. Is easy took he shed to kind.
            </a>
        </div>
    </div>

After attempt many times, I found there are two properties can avoid the 'jump' behave:

1. width: max-content; (which is w-max in tailwindcss) on the first child element under .marquee3k element
2. white-space: nowrap (which was whitespace-nowrap in tailwindcss) on all the sub child elements

[Makkons]

I used it on a new project, this time I found a new fix for the jump, or for one possible cause of it: The (only) child of the .marquee3k element had a margin-right of 10px. When I changed the margin-right for a padding-right (which was possible in this case) the jump stopped happening.

I confirm that there was also a problem with breaking the animation due to margin. I solved it by wrapping the element in another div. As if most of the problem is more serious, but suddenly for someone it will be a solution