Clarification Needed on Layout 484 Behavior and Potential Bug | Relume Community

Clarification Needed on Layout 484 Behavior and Potential Bug

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? Adam M. Dan Daniel S. Thanks

63 comments

Dan
·
cc Maria M. Kaleb J.
Matt J.
·
GMA 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.
Kaleb J.
·
Thanks Matt J.! Yes GMA 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 😎
GMA
·
Thanks, Matt J. and Kaleb J.
Caleb P.
·
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??
Caleb P.
·
I imported this component from the new Webflow App and it doesn't seem to have any interaction of any kind...
Matt J.
·
Caleb P. did you publish?
Caleb P.
·
yessir! https://heather-preston.webflow.io/
Matt J.
·
Caleb P.Would you mind sending a read-only link?
Caleb P.
·
Sure thing
Caleb P.
·
DM'd it to you to keep it private
💪1
Matt J.
·
Caleb P. 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.
Caleb P.
·
Aaaahhh interesting!
Matt J.
·
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
Caleb P.
·
Could this also be why I'm having similar issues with other animated components like the Timeline?
Matt J.
·
yep
Matt J.
·
I think we should make it an option for site builder to rename classes, I'll pass this onto the team
🙌1
Matt J.
·
right now it just happens, without any say or even realizing that it does it, and its definitely not always perfect in it either.
👀1
Caleb P.
·
Maybe best path forward is to remove those components from my site, clean my Webflow classes, then manually copy/paste from Relume?
Matt J.
·
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
Matt J.
·
but yeah if you have like 4 or 5 components, then I would suppose yeah
Caleb P.
·
Ok cool. I'll see what I can do with it all
Caleb P.
·
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 then use the Webflow app to bring over my wireframe
Caleb P.
·
Idk if the Webflow app negates the need for the template or not, but that was the exact flow I used
Matt J.
·
home_5_feature_text section_home_5_feature these two classes here need to be replacing the ones in the screenshot
Matt J.
·
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.
Caleb P.
·
OH yeah for sure! It was fantastic to use!
Caleb P.
·
let me try this out now while I have you real quick
Matt J.
·
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.
😂1
Matt J.
·
but here we are
Caleb P.
·
WORKED!! That's brilliant. Thanks so much
Matt J.
·
yep I see it working now
Caleb P.
·
So if I needed to do a similar debug for the timeline component, what would my debug steps be?
Matt J.
·
so yeah, same process for any other components that might have custom code
Matt J.
·
well I would look through the structure to see if it has a custom embed code
Caleb P.
·
You should be able to see the bug when you look at it, now
Matt J.
·
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.
🙌1
Matt J.
·
so thats another thing we should probably do - is still paste in the instructions, regardless if it comes in from webflow app/site builder
❤️1
🔥1
Matt J.
·
and that way the user can delete the instructions
💪1
Caleb P.
·
So that timeline feature doesn't seem to have that same code embed in it...
Caleb P.
·
It was a Timeline 1 section
Matt J.
·
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)
🙌1
Matt J.
·
so ultimately we have some improvements to make to this but yeah.
Caleb P.
·
Super helpful to know! This is awesome
Matt J.
·
yeah so I see that the timeline is working
Matt J.
·
but its not finishing all the way - is that the bug you are seeing or?
Caleb P.
·
So this element that's cutting into the upper sections is defined as a part of the timeline
Matt J.
·
ah so this is different actually - completely. Did you add this overflow none to that benefits section or?
Caleb P.
·
Tried z-index overflow and background properties on each element, but that didn't seem to work
Matt J.
·
yeah naw
Caleb P.
·
Yeah, doing that makes the entire timeline "black" and you don't get the effect anymore
Matt J.
·
I would undo that overflow none style I'm showing in my screenshot - reset that
Caleb P.
·
Done
Matt J.
·
overflow none messes with any positioned fixed elements
🔥1
Matt J.
·
Change that features section position:relative; and it should snap to a z-index of 2.
Caleb P.
·
Oh nice!
Caleb P.
·
It's possible that could also be an issue with the import from the Webflow app. I don't remember setting that explicitly
Matt J.
·
okay
Matt J.
·
I can do some testing at some point too
Caleb P.
·
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!!
Matt J.
·
Caleb P. feel free to jump in sooner - we're here! And always always always open to feedback on anything we do. Door is wide open!
❤️1
Kaleb J.
·
Caleb P. Matt J. 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!
💯1
🤣3
🔥2
Caleb P.
·
Wow! I'm so honored! Hahah
😆1