Animation easing does not work on first use

Hi all.

I have noticed this issue on several builds, I am beginning to think I am setting up my animations incorrectly. If you go the the Home page (Work) and hover over the image, I have a small animation set up, animating several different elements. The animation always works but on the first instance, the easing is always missing, the animation happens instantly.

Then on following hovers the easing kicks in. You can see this for each instance on the 6 previews shown on the page, instant first time, smooth then onwards.

Is this to do with the way it is set-up, or is it to do with Webflow not serving up the script at the correct time on the first instance?

As I have said, I have noticed this on multiple builds.

Here is the live Webflow version if needed…

Thanks Graham

Here is my public share link: LINK
(how to access public share link)

Impressive site - I would try Opacity interaction instead of Show/Hide

Hey Graham,
agree… very impressive portfolio.

I found this on anther thread and it worked for me :partying_face: … Basically don’t use “Set as initial state”

For me, this is fixed when you separate the Opacity from the previous Hide/Show (initial state) action so the Opacity action has ‘After Previous Action’, NOT ‘with Previous Action’ as it’s Start.

Like this:

0.00 — Hide/Show (initial state)

0.00 — Opacity: 0% (Start: After Previous Action), Easing (Linear(None), Duration (0.01s)

0.50 — Hide/Show (Start: After Previous Action)

0.50 — Opacity: 100% (Start: After Previous Action)


Hope that helps,