Animation not working on mobile

I have a scroll animation that won’t work on mobile. It stays stuck on the initial state and never animates. I’m really confused as to why it’s not working. I have the same exact animation higher on the page and it works fine. Been trying everything and I can’t seem to get it to work.

https://preview.webflow.com/preview/volcanic?utm_medium=preview_link&utm_source=designer&utm_content=volcanic&preview=0484f87b37af9906ccf0ad483cb14971&workflow=preview

It’s the spoon and red banner on the bottom.


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

Hey @Gmar07 , the reason why the interaction is not working on mobile breakpoints is because you chose the spoon-div as the interaction trigger and on small devices, since it is moved -200px, it is moved off-screen and therefore is never triggered.

The fix is simply changing the target of your interaction to break-2-container and set your banner-left-scroll animation as such:

Notice how I changed the spoon-div to Affect Class and not Affect Interaction Trigger

Your Navigator should look as such:
Screen Shot 2021-08-05 at 2.06.20 PM

1 Like

Thank you! I’m still getting the hang of Webflow so thanks for teaching me that.

Of course, we all start somewhere. I hope I was able to help you, happy designing! :grin: :+1:

1 Like