Hi there, firstoff: apologies if this is a dupe - I’m a newb and my search didn’t yield an obvious answer.
I was really inspired by the History of Animation site (http://history-of-animation.webflow.io/) featured in the Animations and Interactions Webinar. I wanted to recreate the specific effect where Bugs Bunny fills with colour as you scroll down the page.
What I came up with works in the Webflow Designer/Preview for all views (desktop/tablet/landscape/portrait) and for all breakpoints. The scrolling effect does not work on my mobile phone - the background images come into view one after the other and the desired effect, which is to have the ladybug fill with colour, doesn’t work.
It’s a long story. Safari used to not support them, some say it was a bug… Android ans iOS are supposed to show them now but it’s such a mess sometimes, and so demanding on mobile devices that Webflow probably still deactivate it.
Took me an hour to find code for a fixed bg working in Safari iOS… and it works damn well.
I’ve applied the codepen to my custom code head area, replacing the original url with the link to my first image - - not exactly sure how to apply it to the second one (http://uploads.webflow.com/5706d4d62eade0f163157deb/57f078b16ceee4687293a11f_ladybug-1472604.jpg). Should I duplicate all the code for the second image? I’m just a beginner where the coding is concerned, so I could really use the guidance