I would've never guessed that an infinite marquee could be so difficult. Getting it responsive was the difficult part. I saw both of your videos and chose GSAP. I'm a big fan and I most definitely will have some of their CDNs loaded. Thank you very much for your great work! 😃
Great video. I was trying to implament this for a group of photos that was wider than the screen width and kept running into an issue. seems like "const width = marqueeContent.scrollWidth;" correctly calculates the entire width of the div even if it overflows off screen. It also doesn't need a separate calculation for gap or padding. Not sure if there are any downsides when using it with smaller blocks of content.
Hey! I'll see if I can add something like that to my content planning. It should be possible. this video uses a Splide slider from CMS, which you could configure into a scrolling marquee as well! ua-cam.com/video/WhWTjaXlUdU/v-deo.htmlsi=rz3cniMJdE5YPPcJ
I have a problem with this marquee, I used logos (16 logos) instead of text and now after scrolling about 9 logos the animation resets to the initial position.
Hey Daniel - not exactly sure what the problem is but you might try playing with flex child sizing (none) and width (100%). There are some good comments about that in the comments section of my OTHER marquee video released before this one on how to make a marquee in HTML and CSS only. Hope that helps! Feel free to drop in the discord and post a link to your project.
This looks really good! Would it be a lot of work to have the speed increase the more the user is scrolling? I've seen this somewhere but I can't remember which website it was.
This is the cleanest marquee, thank you! how do I: - Make two or more marquees go in the same direction - Make two or more marquees go in the opposite direction I'll be waiting for your generous reply, Thank you again
Hey NA 19 thanks for the compliment - you could make two marquees and then loop over them if you want multiple on a page. I have some other videos that explain how to do that but not with marquees, with other elements. I'll see if I can update the video at some point.
Thanks for the cool GSAP lesson! I have an issue. This worked excellent until I added "Scrolling Marquee" to the text block. When making the screen size smaller, the words started blending together and it wasn't spacing out the text elements correctly. Did I miss something?
Sorry about that! It was mentioned in my other marquee (html and css only) tutorial as well. Looks like I forgot to mention that important styling point which comes in to play when the total width of all content is wider than the the wrapper. Glad you got it sorted.
Hey 1 Question, What if i want to use 2-3 marquee on the same page, while doing this method, the another marquee is not moving, PS: I am completely GSAP Noob
Great question. You could use querySelectorAll and a forEach loop to apply the code for each one. I use this technique in my update copyright year tool - github.com/learyjk/wb-date/blob/main/index.ts
@@webbae Heyo, I'm a total noob when it comes to JS, which part of the code needs to be replaced exactly with querySelectorAll and forEach? Thanks a lot for your videos, they've been immensely helpful!
The theory with gifs is what every lesson in school should start with
I’m working on my hooks so far my answer is to just throw a gif at it!🪝 😭
I would've never guessed that an infinite marquee could be so difficult. Getting it responsive was the difficult part. I saw both of your videos and chose GSAP. I'm a big fan and I most definitely will have some of their CDNs loaded. Thank you very much for your great work! 😃
Glad I could help! This is a really nice testimonial thank you!
Great video. I was trying to implament this for a group of photos that was wider than the screen width and kept running into an issue. seems like "const width = marqueeContent.scrollWidth;" correctly calculates the entire width of the div even if it overflows off screen. It also doesn't need a separate calculation for gap or padding. Not sure if there are any downsides when using it with smaller blocks of content.
Nice comment - thank you for sharing!
For longer marquees, wider than 100vw, it would be nice if duration could be calculated on the width so you don't have to trial&error that value.
I'm really glad I found your channel.
Thanks a lot for such quality content! I've subbed. ;)
Thanks Pigalcoto! Glad it has helped you.
Thank you sooo much for making this tutorial! You explained everything super well! Keep up the great work!
Great to meet you today Sung-Duk! Let’s chat more tomorrow.
Thank you for making this video. I created Marquee a different way but I got the idea from you. Thanks again.
Glad it helped! Loads of different use cases out there. Another guy adapted this one to make it scroll vertically.
Cool.
Hey buddy, how can i add collection list image to the scroll ? is that possible. can you make a video for cms
Hey! I'll see if I can add something like that to my content planning. It should be possible.
this video uses a Splide slider from CMS, which you could configure into a scrolling marquee as well!
ua-cam.com/video/WhWTjaXlUdU/v-deo.htmlsi=rz3cniMJdE5YPPcJ
@@webbae oh thanks for the response. I am late
I have a problem with this marquee, I used logos (16 logos) instead of text and now after scrolling about 9 logos the animation resets to the initial position.
Hey Daniel - not exactly sure what the problem is but you might try playing with flex child sizing (none) and width (100%). There are some good comments about that in the comments section of my OTHER marquee video released before this one on how to make a marquee in HTML and CSS only. Hope that helps! Feel free to drop in the discord and post a link to your project.
I believe you should make more GSAP content as it might blow up your channel.This vid did really well and amazing tutorial honestly! Thank you.
Working on it!
This is awesome. However, I'm using svgs for logos, and on mobile the second wrapper encroaches on the first one. I can't find the bug...
Not sure! I’d have to check an example. Feel free to pop in Discord and ask.
Confirm marquee-content Flex Child sizing is set to "none" for grow/shrink. I had the same problem and that fixed mine.
This looks really good! Would it be a lot of work to have the speed increase the more the user is scrolling? I've seen this somewhere but I can't remember which website it was.
It’s possible - cool idea. Can look in to making a tutorial for it :)
@@webbae That would be amazing!
@@studiomonty Oh yes, that would be awesome. I'm also wondering how I can change direction of the marquee if scroll up.
This is the cleanest marquee, thank you!
how do I:
- Make two or more marquees go in the same direction
- Make two or more marquees go in the opposite direction
I'll be waiting for your generous reply, Thank you again
Hey NA 19 thanks for the compliment - you could make two marquees and then loop over them if you want multiple on a page. I have some other videos that explain how to do that but not with marquees, with other elements. I'll see if I can update the video at some point.
Thanks for the cool GSAP lesson! I have an issue. This worked excellent until I added "Scrolling Marquee" to the text block. When making the screen size smaller, the words started blending together and it wasn't spacing out the text elements correctly. Did I miss something?
I see what I did. In the cloneable marquee-content is set to flex "not grow or shrink", but not indicated in this tutorial.
Sorry about that! It was mentioned in my other marquee (html and css only) tutorial as well. Looks like I forgot to mention that important styling point which comes in to play when the total width of all content is wider than the the wrapper. Glad you got it sorted.
I think you could just tween xPercent instead of x to avoid the resize calculation
great idea - should work!
Hey 1 Question, What if i want to use 2-3 marquee on the same page, while doing this method, the another marquee is not moving, PS: I am completely GSAP Noob
Great question. You could use querySelectorAll and a forEach loop to apply the code for each one. I use this technique in my update copyright year tool - github.com/learyjk/wb-date/blob/main/index.ts
@@webbae Heyo, I'm a total noob when it comes to JS, which part of the code needs to be replaced exactly with querySelectorAll and forEach? Thanks a lot for your videos, they've been immensely helpful!
Take love brother❤
i am from Bangladesh
Love is taken deeply 🤪. Thanks bro