Hello Webflow Community,
I’m experiencing a challenge with my website where the animations for BG Color (from transparent to blue and reverse) are not syncing properly between a parent and a child element, even though both are set to animate at the same time with identical easing and duration settings. Additionally, both elements have a backdrop blur filter applied.
The parent is the navbar_container and its child is navbar_menu (in tablet and below it becomes the dropdown menu)
Here’s what I’ve confirmed so far:
- Both elements are set to start animating at the same time and triggered by the same scroll actions.
- All animation settings (easing, duration, etc.) have been double-checked and are identical.
- The issue persists across different browsers and devices, indicating it’s not specific to one environment.
- I have removed the backdrop but the issues persist.
Despite these settings, the child element’s animation appears to start and end slightly faster than the parent’s. This discrepancy occurs even though the animations and settings are identical on both elements. I’ve tried separating the animations and experimenting with different techniques, but the issue remains.
I’m wondering if anyone else has faced a similar issue or if there’s something I might be overlooking.
Thank you in advance for your assistance!