the issue with component 484 in webflow

you have to publish to see the interaction - it has custom code.

What do you mean, I've published the site in webflow and don't see any interaction..

you have to publish your webflow site and view it on either webflow.io or your custom domain. Not within the webflow designer preview.

if you've done this - send the read-only and the published url

https://pinnaclerockv2.webflow.io/

Would you mind sending a read-only link?

most likely the classes in the custom code embed need to be changed to match your actual markup

https://preview.webflow.com/preview/pinnaclerockv2?utm_medium=preview_link&utm_source=[…]2&preview=c0c7c6612e8d422b70208048de9462b5&workflow=preview

yeah your custom code classes should look like this

Where is the documentation for this?

im writing it as we speak

its a byproduct of other product decisions, wasn't always like that

But where is this code... How do I access this in webflow?

definitely some room for improvement to make this more intuitive - I'll pass this on to the team.

Hi , 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

// Define different start and end values for mobile devices
let startValue = isMobile() ? "top 20%" : "top center";
let endValue = isMobile() ? "bottom 40%" : "bottom center";

Hey there - what are you trying to do?

Hi , 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?

Hi again, . 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;
  }

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