Hero is disappearing after publishing site

Design help Animations & Interactions
1

So I am working on a image interaction where the mobile screen scales up after reaching its position, thing is the animation is working but after publishing the site, but the hero section is disappearing, even tho there is no hidden is applied, and only the animation is working after publishing the site.

There is also an animation I am trying to achieve where after mock-up reaches to top of the browser, section stays there and the elements(like words) are scrolled up or comes left & right direction, for example jeton.com their 2nd section(kinda) if there is any tutorial is there would be helpful

Preview link: https://preview.webflow.com/preview/landeed-2-0?utm_medium=preview_link&utm_source=designer&utm_content=landeed-2-0&preview=6767d32d23cadb41f1bc38d1ecfd82b0&workflow=preview

2

Hi there,

To fix the disappearing hero section, you’ll need to adjust the overflow settings in your container hierarchy:

  1. Select the parent element (Hero container Div block)
  2. Set its Overflow to “visible”
  3. Select the next parent element up (Hero Section)
  4. Set its Overflow to “hidden”

For creating a horizontal scrolling animation, you can set this up in the Interactions panel:

  1. Open the Interactions panel
  2. Select “While Page is Scrolling” from the On Current Page menu
  3. Add Move actions and set x-axis values (e.g., -900 pixels for left movement)
  4. Combine with Opacity actions (100% to 0%) to create smooth fade effects during scroll

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Issue still exist, need different solution

4

Check if your hero wrapper has a transform/scale finishing at 0% opacity , I’ve seen that trigger the section vanishing on publish. For the Jeton-style scroll effect, use a pinned section with “while scrolling in view” + move/opacity on child elements instead of the section itself.

5

Went through the editor again, I have not applied any transform or scale here at all. On the 2nd section

what do you mean by pin here? Is to make the child-parent div class into sticky and add scroll into view effect? is there a reference yt vid you could refer if you have any?

6

Hey @AmitKM ,

Are you still facing the Hero section disappearing issue? I was checking the live site and I can see the hero section when I scroll up after the animation has played out as well and it is not hidden on page load either.

image
image1670Ă—857 27.4 KB

If you are still facing the issue, do you mean some other section that gets hidden in the published site?

7

Hello AJ, thanks for taking your time and reviewing it. I back tracked what I did on the hero section and it was causing because of a simple code - basically shows one word after the another - search, share and store - Removed that code and it was fixed :sweat_smile: . Again thank you for going through it :raising_hands: !

1 Like