Conflict between hover state and scroll into view animation

I am practicing some animation here.


When the section is scrolled into view, the clay phone mockup has the intro-animation of scale + opacity + move. After that, it still has a hover state for a different perspective.

I am trying to do the same for one particular section on my page. The yellow section called Lookbooker.
However, when the page first loads, the scroll-into-view animation doesn’t work. I have to scroll past this section and scroll up/back, the scroll-into-view animation starts working. The hover state of the yellow phone is working regardless.
if the animation doesn’t work in the read-only mode, please switch the preview toggle.

Is there a conflict between them? Somebody would help?

Kind regards,

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

1 Like