Community forum for knowledge and support

Updated 9 months ago

Troubleshooting the layout484 component and split-text feature

At a glance

A community member is having issues with the Layout484 component in Webflow. When they duplicate the component and change the class name(s), the script stops working for the second paragraph. They have two sections that they would like to use the split-text feature, but are unsure of the best way to make it work.

The community members discuss the issue and share updates. They mention that the developers are working on a fix, and provide a new code snippet to try. However, the new code does not work for some community members. Eventually, one community member is able to get the code working by applying a specific combo class to the layout484_text elements and ensuring the embed is placed after the layout484_component. They provide a read-only link to a working example.

Another community member reports that while they were able to get the code working using the instructions, they are experiencing an issue where the interaction on the last instance of the component seems to happen quicker or start sooner, and they often don't even see the fade happen in the last instance. They ask for suggestions on how to fix this.

Useful resources

I'm having issues with the Layout484 component. When I duplicate the component and change the class name(s) the script stops working for the second paragraph. I have two sections that I would like to use the split-text feature. What's the best way to make this work?

1
M
A
M
16 comments

yeah we're a few days ahead of you and still working out the kinks on it. I've got a request out to our developers to take another stab at it as its still not working the way we'd expect.

https://relumecommunity.slack.com/archives/C02MK7D364W/p1712198336432109

no worries! Thank you for the update! Look forward to hearing more. I’m currently using a similar custom code that couldn’t be added to a section, but to the page settings. Idk if something like that would work for this component.

yeah that was a good idea - just tried it and it didn't seem to help.

🤔 it was worth a shot. I wonder what it could be? I’ll continue researching/testing on my end as well.

appreciate you all looking into this! i was banging my head against the wall thinking i broke it but when i went to the component library on the relume website i noticed it also stopped working there. look forward to the fix!

FYI working for me now!

how’d you get it to work?

re-reading your original post i'm realizing we were having different issues. Mine was that the split-text gsap plugin wasn't working on a single instance. i've since resolved that through recloning the component (perhaps I broke it?). The part that was confusing to me was that the component demo doesn't work on the relume page (again, at least for me): https://www.relume.io/preview?cid=uncommon-components-2/section_layout484

oh.. that’s strange. I haven’t noticed the plugin completely not working. Just when I duplicate the component. I just opened that link and it doesn’t appear to work on the relume page (mobile anyways). That was working for me a couple days ago.

Yeah we're still actively working on it and it takes a bit to deploy new changes. I think the new code may have broke certain cases of this component, our developers have a new fix that will deploy to the master component soon.

Here is the latest code you can paste into your embed. If this doesn't work, I would try having a single instance of the code embed, after your components. Or simply put - if you have two or three instances of this component, copy/paste this code into the last embed and delete the other 2 embeds.

thank you! I’ll add this morning and let you know if it works. I really appreciate your help.

I have tried different options and the new code isn't working after publishing. I tried deleting all but one code embed, with just a single component on the page, a completely different code embed and added the code to the page settings. I don't know if I am missing something or if it's working on your end?

I was finally able to fully test out the new code and I was able to get it to work. You need to apply a combo class to layout484_text which is split-text so the full combo class should be layout484_text split-text and you'll want to apply that to all instances on the page. And then you'll want to delete all of the embeds except for the last one, and make sure that the embed is AFTER layout484_component - if none of these things are true, it won't run.

Here is a read-only link to project where I have two instances of this component working on the page.
https://preview.webflow.com/preview/matts-amazing-site-613413?utm_medium=preview_link&[…]3&preview=78560ae07669e7d31af987bf0b80ea8c&workflow=preview
https://matts-amazing-site-613413.webflow.io/

cc

Awesome!! Great job on getting the code to work! Thanks for the detailed instructions and the links. I also was able to get this to work. Thanks again!

Thank you! I was able to get it to work using your instructions. However, I find that the interaction on the last instance of the component seems to happen quicker (or start sooner) and is almost done once the component is actually in view. Often, I don’t even see the fade happen in the last instance. Do you have any suggestions for fixing this?

Add a reply
Sign up and join the conversation on Slack