Animation bug, or am I missing something?

Design help Animations & Interactions
1

I am having a bit of an issue with a basic interaction. I would like an element to animate once scrolled into view. My animation appears to be working correctly (it works on mobile and previews correctly on desktop), except for when I load the desktop site, then the animation does not trigger. I assume I am missing something stupid, but I’ve recreated the animation again from scratch and still have the same issue.

Any ideas where I am going wrong?

Edit: Apologies, forgot to mention the element I am referring to, I trying to animate the div containing the first image on the page.

Edit 2: A related issue (I believe) is when I load this preview link below the content in the div loads (it does not play the animation but the image loads). However, just toggling the preview button makes the content disappear.

Here is my public share link: Webflow - MIES

2

That’s a tough one isn’t it.
But I fixed it, yep I am the best.
Ow you want to know what I did, tut, ok then.

Ok I am jubilant as I was going to chuck the towel in but I persevered.
Problem you are having is that the item you have selected and your 1st edit should have read Section Parent Loc, main loc

Your issue is “main loc” element is never seen so it can’t be scrolled into view.
Move the animation trigger to Parent loc SO when that is scrolled into view it moves Main loc

If this work, tick you loves me and solution so we can keep the forum tidy.

1 Like
3

Thank you very much for taking the time to help me kind sir.

4

You are very welcome. Still got a buzz from fixing, helps build my own confidence up.

5

Thank you for helping me, the animation works now. As a matter of interest, do you know why it was working on mobile? Why was mainloc able to trigger there even though it was never “scrolled into view” as such?

6

My guess is that it was not outside of display so it was registering as being scrolled.

7

That would be strange as the reason it was not in view was the initial state set at -100 vw. This was the case for both mobile and desktop. Maybe desktop and mobile have different meanings of “into view”? Regardless, this is rather unimportant now, I was just curious.

8

Hey if you don’t ask questions how do we move with better understanding.
Things move around a lot when you change to mobile, so even though you set -vw it other items move it after if that makes sense.
Again its a theory.