Community forum for knowledge and support

Updated 9 months ago

Intended Behavior for Layout 484

At a glance

The community members are discussing an issue with a Webflow component called Layout 484. The component is supposed to have a scrolling interaction where the text transitions from grey to black, but it appears to be completely static when previewed. The community members suggest that the component is powered by custom code, so it needs to be published to see the intended behavior. They also mention that the component may be dependent on having something above it to trigger the "scroll into view" interaction.

One community member tried pasting the component into a Webflow project and publishing it, which seemed to work as expected. However, another community member had issues with the component after importing it from the Webflow App, as the App automatically renamed the classes, breaking the custom code. The solution suggested is to update the embed code to reflect the new class names.

The community members also discuss similar issues with other animated components like the Timeline, and suggest that the Webflow App's automatic class renaming may be the cause. They recommend removing the problematic components, cleaning the Webflow classes, and manually copying and pasting the components from the Relume library as a potential solution.

Useful resources

Does anyone know what the intended behavior for Layout 484 is? Based on the component preview, it appears that the text should transition from grey to black upon scrolling.

However when I preview the component in Relume workspace or in Webflow, the component is completely static.

Since this component is categorized as “Uncommon” and has “Interaction,” I’m wondering if there may be a bug with this component.

Any ideas on what’s going on?

Thanks

2
D
M
K
63 comments

its mostly powered by custom code so in order to see it properly you'll need to publish. This component is also dependent on having something above it as it has a "scroll into view" interaction. So there has to be some scrolling to trigger that. Below is a completely vanilla paste of the component with a couple of layout 1's pasted above and below - seemed to work as expected for me.

https://matts-superb-site-d58a84.webflow.io/

If this is still not the case for you - we'll need a read-only link to dig into it more.

Thanks ! Yes you are correct 🙂 We're having an issue with the preview but in the meantime, if you paste it into a Webflow project + publish and view on staging, it should work a treat 😎

Thanks, and

Hey jumping in here cause I'm having some issues with it, too. So just to clarify, you need to add some additional configuration to the sections above??

I imported this component from the new Webflow App and it doesn't seem to have any interaction of any kind...

Would you mind sending a read-only link?

DM'd it to you to keep it private

and you imported from site builder, using the webflow app yeah? If so, its because when the import happened, it renamed the classes automatically - thus breaking the custom code. So you just need to update the embed code to reflect the new class names.....which I'm sure will not be all that easy to do. We clearly still have some things to consider now that we've introduced the Webflow App and this idea of site builder renaming classes.

Aaaahhh interesting!

ah but the _text etc is still the same actually so it shouldn't be too hard to match up what needs to change here

Could this also be why I'm having similar issues with other animated components like the Timeline?

I think we should make it an option for site builder to rename classes, I'll pass this onto the team

right now it just happens, without any say or even realizing that it does it, and its definitely not always perfect in it either.

Maybe best path forward is to remove those components from my site, clean my Webflow classes, then manually copy/paste from Relume?

yeah, I suppose so - that would be one way. There are only two classes to update in the custom code embed for this component - likely the same for timeline

but yeah if you have like 4 or 5 components, then I would suppose yeah

Ok cool. I'll see what I can do with it all

So the way that I set this site up (just for reference for the team) was to use the Relume Webflow template for the site and <i>then</i> use the Webflow app to bring over my wireframe

Idk if the Webflow app negates the need for the template or not, but that was the exact flow I used

home_5_feature_text
section_home_5_feature

these two classes here need to be replacing the ones in the screenshot

The webflow app helps with a lot of things though - like global sections in site builder now become global components in webflow - which is huge - and a lot less clicks/back and forth for sure.

OH yeah for sure! It was fantastic to use!

let me try this out now while I have you real quick

and maybe it can do something about this too - who knows - our CTO was awarded Developer of the Year by Webflow - hes a fucking wizard man....WHO knows. I didn't even think this Webflow App could do what they were saying it could do.

WORKED!! That's brilliant. Thanks so much

yep I see it working now

So if I needed to do a similar debug for the timeline component, what would my debug steps be?

so yeah, same process for any other components that might have custom code

well I would look through the structure to see if it has a custom embed code

You should be able to see the bug when you look at it, now

One of the benefits of pasting from the library is that we include instructions with the paste - so thats why it you didn't know to do that.

so thats another thing we should probably do - is still paste in the instructions, regardless if it comes in from webflow app/site builder

and that way the user can delete the instructions

So that timeline feature doesn't seem to have that same code embed in it...

It was a Timeline 1 section

another debug tip could be to go to the library and grab the same component, and see if it has instructions like renaming custom code - and if not, then delete or undo (undo will erase the classes it came with, so its faster)

so ultimately we have some improvements to make to this but yeah.

Super helpful to know! This is awesome

yeah so I see that the timeline is working

but its not finishing all the way - is that the bug you are seeing or?

So this element that's cutting into the upper sections is defined as a part of the timeline

ah so this is different actually - completely. Did you add this overflow none to that benefits section or?

Tried z-index overflow and background properties on each element, but that didn't seem to work

Yeah, doing that makes the entire timeline "black" and you don't get the effect anymore

I would undo that overflow none style I'm showing in my screenshot - reset that

overflow none messes with any positioned fixed elements

Change that features section position:relative; and it should snap to a z-index of 2.

It's possible that could also be an issue with the import from the Webflow app. I don't <i>remember</i> setting that explicitly

I can do some testing at some point too

Dang man! hours of debugging resolved in less than 10 minutes! Thanks so much for your help. If you guys are looking for people to help with Webflow App feedback/testing, I'm more than happy to contribute! Gearing up to put a playbook together for our agency that really highly utilizes it. It's a GREAT tool!!

feel free to jump in sooner - we're here! And always always always open to feedback on anything we do. Door is wide open!



I'd officially like to present to you both with this months Most Epic Thread award on behalf of the Relume component team 🏆 😁

Way to go!

Wow! I'm so honored! Hahah

Add a reply
Sign up and join the conversation on Slack