Issue with Component 484: Missing Bold Text Animation in Webflow | Relume Community

Issue with Component 484: Missing Bold Text Animation in Webflow

Hello, I Have an issue with component 484.. How come in webflow there is none of the text bolding animation, does it not come out of the box? There is also no instructions when pasting into webflow...

19 comments

Matt J.
·
you have to publish to see the interaction - it has custom code.
Tesfa H.
·
What do you mean, I've published the site in webflow and don't see any interaction..
Matt J.
·
you have to publish your webflow site and view it on either webflow.io or your custom domain. Not within the webflow designer preview.
Matt J.
·
if you've done this - send the read-only and the published url
Tesfa H.
·
https://pinnaclerockv2.webflow.io/
Matt J.
·
Would you mind sending a read-only link?
Matt J.
·
most likely the classes in the custom code embed need to be changed to match your actual markup
Tesfa H.
·
https://preview.webflow.com/preview/pinnaclerockv2?utm_medium=preview_link&utm_source=[…]2&preview=c0c7c6612e8d422b70208048de9462b5&workflow=preview
Matt J.
·
yeah your custom code classes should look like this
🙏1
Tesfa H.
·
Where is the documentation for this?
Matt J.
·
im writing it as we speak
Matt J.
·
its a byproduct of other product decisions, wasn't always like that
Tesfa H.
·
But where is this code... How do I access this in webflow?
Matt J.
·
definitely some room for improvement to make this more intuitive - I'll pass this on to the team.
Emma S.
·
Hi Matt J., I'm glad to hear that some instructions will come with this component. Can you also please include info related to the trigger? This code references 'startValue', 'endValue' and 'scrub' but what the heck is that?
scrollTrigger: { trigger: ".section_layout484", // Trigger animation when .section_layout484 reaches certain part of the viewport start: startValue, // End animation when .section_layout484 reaches certain part of the viewport end: endValue, // Smooth transition based on scroll position scrub: 2
Above that bit of code we see this code referencing the start and end values, but it seems, only for the mobile. (?)
// Define different start and end values for mobile devices let startValue = isMobile() ? "top 20%" : "top center"; let endValue = isMobile() ? "bottom 40%" : "bottom center";
I've been fiddling with these percentage values for a good half hour and I am not seeing what I want to see. (Is it when the .section_layout484 arrives to 20% away from the top of the screen? Adjusting these values doesn't seem to do anything.) Some instructions on how to adjust those settings (and what 'scrub' means) would be extremely helpful. Thank you.
Matt J.
·
Emma S. Hey there - what are you trying to do?
Emma S.
·
Hi Matt J., I'm trying to adjust where on the screen the script is highlighted as I scroll down it. https://portfolio-sottardi.webflow.io/olapay Like, is the percentage how close or far away from the top/bottom it begins/ends?
Emma S.
·
Hi again, Matt J.. Women from the Floxies Community (of Women who Webflow) helped me understand how to get this animation looking the way I want. One of reasons it wasn't working as I wanted is because the code that speaks to the desktop breakpoint is missing. There are two pieces missing. This:
// Function to check if the viewport width is 1024px or more (Desktop) function isDesktop() { return window.innerWidth >= 1024; }

Emma S.

and this:

 
// Define different start and end values based on breakpoints for mobile and desktop
  let startValue = isMobile() ? "top 70%" : (isDesktop() ? "top 40%" : "top center"); // Adjusted for desktop
  let endValue = isMobile() ? "bottom 30%" : (isDesktop() ? "bottom 20%" : "bottom center"); // Adjusted for desktop