Scroll long track titles

Instead of truncating the track title, make it scroll from right to left, so user can see the entire title of the track

1 Like

Hi @Raymond_Wade :wave:

I’ve discussed your case with the devs and they’ll try to customize the widget for you.

I’ll let you know once I receive a response from them :slightly_smiling_face:

Thank you for waiting @Raymond_Wade!

Our devs suggested adding a scrolling animation for the titles in your widget.

Here are 2 variants:

Could you please let me know if you like these animations? If yes, which one would you prefer to implement to your widget?

I prefer the bottom where it starts on the left side. That way the user will see the title on load and not have to wait for it to scroll across.

1 Like

Got it!

I’ve shared your feedback with the devs and will get back to you once the solution is provided :slightly_smiling_face:

1 Like

Thank you, I appreciate it. If they can add or allow a toggle option to loop the scrolling indefinitely, that would be an awesome bonus :wink: :grin:

1 Like

Okay! I’ve shared this addition as well. Hopefully, our devs will find a way to loop the animation :slightly_smiling_face:

Thank you for waiting @Raymond_Wade :wave:

Please add this code to the Custom CSS field on the Style tab of your widget’s settings:

[class*="Small__Title"] {
  width: fit-content;
  white-space: nowrap;
  text-overflow: initial;

And this script should be added to the Custom JS field:

const duration = 6000;

let animation = null;
const animate = () => {
    setTimeout(() => {

        const title = document.querySelector('[class*="Small__Title-sc"]');
        const titleWidth = Math.floor(title.getBoundingClientRect().width);
        const parent = document.querySelector('[class*="Small__Info-sc"]');
        const parentWidth = Math.floor(parent.getBoundingClientRect().width);
        if (titleWidth > parentWidth) {
            animation = title.animate({
                    transform: ['translateX(0px)', 'translateX(0px)', `translateX(-${titleWidth - parentWidth}px)`, `translateX(-${titleWidth - parentWidth}px)`],
                    offset: [0, 0.1, 0.8],
                    iterations: Infinity,
                    duration: duration,
                    delay: 1000,
    }, 100);

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
        } else if (i !== 50) {
            setTimeout(check, 100);


    .then(() => {
        const button = document.querySelector('[class*="Prev__Component-sc"]');
        button.addEventListener('click', () => {
        const next = document.querySelector('[class*="Next__Component-sc"]');
        next.addEventListener('click', () => {
        const tracks = document.querySelectorAll('[class*="PlaylistItem__PlaylistItemComponent-sc"]');
        tracks.forEach((el) => {
            el.addEventListener('click', () => {

Please check it and let me know if you like the result :wink: