Elements appear before scroll into view animation

Design help Animations & Interactions
1

I implemented a scroll intro view animation to nav bar, but some elements are appearing before animation. Please, help me to handle this problem.

Here is my public share link: [LINK][1]

2

Hi there,

To set up scroll animations with your navbar, here’s what you need to do:

First, ensure your navbar has its position set to “Fixed” in the Style panel. This keeps it attached to the viewport as users scroll.

For the scroll animations:

  1. Select the elements you want to animate in your navbar
  2. Open the Interactions panel
  3. Create a new scroll animation
  4. Set up your desired animation properties (opacity, movement, etc.)
  5. Click “Set as initial state” to define the starting position/state
  6. Adjust the scroll trigger settings to determine when the animation begins and ends

Remember that initial states are crucial - they determine how your elements appear before the animation triggers. For example, if you want an element to fade in while scrolling, set its initial state to 0% opacity.

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

3

I have already did all 6 steps you have mentioned, but did not work, you can see it from my project link. But I do not need to make navbar fixed.

So any other solutions?

4

You may need to give more info, to understand which elements are not working for you.

In general, if you’d like things to appear at a specific moment in the scroll, you can add an ‘offset’ or ‘delay’ to stagger the timing. For example, a 20% offset means the trigger waits until the element is 20% into the page before it appears.

scroll1
scroll11500×753 125 KB