scottalguire/grouploop

A jQuery plugin that creates a marquee with a group of DOM elements.

grouploop's Issues

If the area size is different from the window size, it will not work properly.

This is a problem I found during multiple tests.

Analyzing the source, it is operating based on the entire window size.
In my opinion, it should move based on 'childWrapper'.

So, I modified it as below and tested it.

	window.addEventListener("resize", function ()
	{
		windowWidth = $(el).find(settings.childWrapper)[0].scrollWidth / 2 - 1;
		wrapperWidth = $(el).width();

		if (settings.stickFirstItem)
		{
			stickFirstItemFunc();
		}
	});

Now it works as desired.

Text doesn't loop smoothly

Hi and thank you so much for this plugin. However I can't seem to understand why at the last word the animation is jumpy and the text appears to be jumping. Would you mind taking a look? There are 6 words.

https://theintegrateur.com/clients/inter/

Thanks!

Transition length is limited to screen width, even when the wrapper is a lot larger

Hi!

I noticed an issue with the looping part of the animation process. At the moment the translation is done depending on the window width. When the group is larger than that, the looping animation jumps earlier to the first position, making the effect look choppy.

The best I can see (and I am not a JS expert), you are using the main container width for wrapperWidth at

grouploop/src/grouploop-1.0.3.js

Line 30 in 989cff9

var wrapperWidth = $(window).width() < 768 ? $(el).width() * 2 : $(el).width();

instead of using the width of the childWrapper element. Thus your examples always transition for a distance equal to the window width.

One more thing to consider: the loop element might be inside a container narrower than the window width. Perhaps you might want to look at using the parent container width and the childWrapper width when calculating the translation values?

Here is an example where I am using the latest version (1.0.3) and the jumping effect is very visible:

http://lpv2ab-dev-4824874-4824874.hs-sites.com/-temporary-slug-628fe64a-bffb-407f-989a-5df97c6548db?hs_preview=xUnyBBom-6137431923

Looking forward to hearing back from you.

Regards,

Adrian

Option `forward: false` doesn't work out of the box

Hi! I am using your script to animate a series of Bootstrap cards and I noticed that the forward: false option causes an error at line 112:

grouploop/src/grouploop-1.0.1.js

Line 112 in 3a3fecb

.split(/[()]/)[1]

The script is looking for the transform property which doesn't exist by default.

My workaround has been to add a dummy translation to the child wrapper element:

<div class="slider-rail" style="transform: translateX(0)">...</div>