Animation not working on top of hero section (mobile only)

Design help Animations & Interactions
1

Hi all,

I have a client site that has lots of animations (aka interactions on element triggers). But just the very top-most trigger is not working. I am guessing that this is because it is too high up on the page. I tried changing this from a scroll-down (into or out) into a page load trigger, but was not sure how to do that. The options were not the same. I also try JS. But no scripts that I found either triggered that or triggered just a scroll up on loading.

What the page looks like only after scrolling…

IMG_2836
IMG_2836386Ă—834 67.9 KB

What the page looks like before scrolling…

IMG_2835
IMG_2835386Ă—834 64.4 KB

That word CREATE just does not slide in until AFTER scrolling way down on the page by about the length of the fold, then scrolling back up. Or, if I pull down on the page in mobile. This issue, let me add, is only affecting mobile. All other views on laptop/desktop work just fine for that animation.

Cheers,
Erik

2

We need a read-only so people can help you:

1 Like
3

https://preview.webflow.com/preview/sticky-io?utm_medium=preview_link&utm_source=designer&utm_content=sticky-io&preview=2203a416edca23b9be835e52894303d3&pageId=607723eec5421ec5b174484b&mode=preview

4

Also, this is the page: https://sticky-io.webflow.io/platform-features

The issue is only on mobile. It works in Inspect Mode in Chrome just fine.

5

Ok, I don’t have the time to dig deep into this, but from what it seems, I would guess you have 2 different animations targeting the same element.

Make sure to double check your animations to see if there’s an animation affecting that element opacity setting

6

Turns out that the Offset value, which was “30” was an issue. When I removed Offset and Delay, then it started working on mobile. I removed Delay first, and that did nothing. But Offsetting seemed to cause this. Thanks.

offset-issue