Scroll into view starts at the end - until you start scrolling

Design help Animations & Interactions
1

Hi all, I’m almost finished with my revamped portfolio. I copied a scroll into view animation from another portfolio, and added my own custom animations. The starting state should be my picture with text on the left, which I set as the 0% state (so text 100% opacity etc). When you start scrolling, some elements should appear and disappear (like text 0% opacity).
However, when I preview/publish the starting state is the ending state of my animation.. As soon as I start scrolling, it suddenly jumps to the correct starting state..

Any ideas?

(The site is quite slow, so I’m also considering removing a lot of the fancy animations..)

Thanks in advance!

Here is my public share link:
Webflow - My portfolio**

2

Hi there,

When working with scroll into view animations, it’s important to properly set up your initial element states. Navigate to the Interactions panel and locate the “Set as initial state” checkbox under the Timing section. Enabling this option ensures your starting opacity and position values are correctly applied before any scroll triggers activate, preventing any unwanted flashing or jumping of elements when the page loads.

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