The Better Trending Infinte Scrolling Marquee with anything for WordPress Gutenberg

Learn how to create a better trending infinite scrolling marquee with anything in WordPress Gutenberg. This tutorial will show you how to add eye-catching marquee animations to your WordPress website using Gutenberg blocks.
👇 Resources 👇
↪ Quick Test Website: tchs.li/tastewp
↪ Quick Starter download: tchs.li/ya9vrLb
CSS Classes:
infinite-scroll
is-faded
is-rotated
is-reversed
is-slower
is-faster
on-hover-paused
hide-overflow
Change these settings to what you want:
--marquee-duration: 20s; /*##ms, ##s*/
--marquee-gap: var(--wp--preset--spacing--xl); /* can be any spacing */
user-select: none; /* none, auto*/
Donations are never ever required but if you feel like supporting what I do, you can click the link below 😁. All donations will go towards either education to get better at teaching, my edit set up, WordPress plugins or web tools.
↪ tchs.li/tipjar 💸
👇 Timestamps 👇
00:00 Intro
00:30 Marquee do's, don'ts, and need to knows
02:01 Example
02:22 The Set up
04:43 Logo Marquee
06:29 Fading edges
06:50 Diagonal/Rotated Marquee
08:54 Bento grid Marquee
11:24 Outro
👍 If you enjoyed this video, please give it a thumbs up; this way, I know I should create more videos like this.
🔔 Remember to subscribe to my channel so you don't miss out on new web creation videos.
🌐 Visit my website for more web creation tips and tricks: techies.review
Thanks for watching, and keep designing!

[@thomassaunders225]

Also, if you can easily implement the option to switch the motion off for those that have issues with busy websites. What I am talking about is a code switch for the browser to automatically reduce motion. Not an actual switch. I need to research this myself to implement when I can.

[@techiesreviews]

Thank you so much for your comment! I had it in the plans but forget to implement it… I will add it pretty soon 😁. I already saw the code somewhere.

[@IsotonikStudios]

Possibly stupid question but can this be applied in Elementor in the same way?

[@techiesreviews]

The fact that your are asking, is for me a signal that you are curious and would love to know. Thank you for you question!
This can be used in elementor as well, that’s the beauty of css and classes. However the template included won’t work for elementor.
Secondly I haven’t tested it for elementor so there could be some settings that needs to be changed. Do you use elementor pro and hello theme? That way I can try it out and come back to you tonight.

[@IsotonikStudios]

@@techiesreviewsyes indeed that’s my standard set up!!

[@anshulbhatia5662]

Coding noob alert! I want to try using this on my existing website. How do I bypass using the starter template? Just add the CSS in additional CSS for the page?

[@techiesreviews]

Hahaha no worries, coding noobs are the best 😁. It’s where everyone starts😁.
Some themes allow you to add custom css. You can copy the contents of the style.css file into the place where you can add custom css.
I haven’t tested it with anything else than core Gutenberg blocks. So it could be that the css is not working as expected. If so let me know via email so I can help you make it work

[@anshulbhatia5662]

@@techiesreviews thank you! I figured out how to add css in my theme's stylesheet. It is just a bit jarring to mess with on my live site. What is your email ID? Would you be open to helping build out websites as a paid project? Thank you again.

[@techiesreviews]

@@anshulbhatia5662 awesome that you figured it out nice! Yeah, I am all open for a paid job. You can email me at [e-mail]

[@anshulbhatia5662]

@@techiesreviews Thank you. I have sent you an email. Look forward to hearing from you soon. Cheers

[@techiesreviews]

Thanks you for this opportunity. And replied to you twice. 😁