Need help: Animations not working properly

Design help Animations & Interactions
1

Hi! I have two problems with my project.

Problem 1:
I’ve set my logo to mix-blend-mode difference when you’ve scrolled past the first viewport. This works in the code, however i don’t see the effect happening.

Problem 2:
When you scroll down a little bit - the menu button appears. I’ve created an animation for the opening and closing of the white background from that menu. However - the first time you open the menu, the hide/show appears before the animation (even when it should do the hide/show when it’s still of the screen, so it’s a harsh transition. After this first click it works fine. I’ve tried to do it with display:none/flex and now i tried to fix it with opacity and pointer-events done. But both options give me the same problem..

1 Like
2

Hi there,

For blend mode issues, you can adjust these settings in the Style panel under Effects > Blend Mode. If you’re experiencing unexpected results, ensure that both the element and its parent container have the correct blend mode settings and opacity values.

For menu animation timing, you can fine-tune this in the Interactions panel:

  1. Select your menu element
  2. Open the Interactions panel
  3. Adjust the timing settings under the Initial or Trigger states
  4. For smoother animations, try keeping transitions between 200-400 milliseconds
  5. If animations feel sluggish, reduce the number of animated properties to just the essential ones

You can also check the Transform settings in the Style panel to ensure they’re not conflicting with your intended animations.

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

3

This isn’t a answer to my exact question :stuck_out_tongue:

4

Fixed it!! No need to help anymore

1 Like