Intended Behavior for Layout 484

cc

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...

did you publish?

yessir! https://heather-preston.webflow.io/

Would you mind sending a read-only link?

Sure thing

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?

yep

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.

but here we are

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 naw

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

Done

overflow none messes with any positioned fixed elements

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

Oh nice!

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

okay

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