Hey, I ran into some issues with animating divs on both the mobile and desktop versions of my website.
I have made two variants of animated sections - one for desktop devices, and one for smaller devices - mainly because of grid alignment and pure aesthetics.
Let’s now focus on the problem - but quick briefing first.
On the desktop I have one div named “Test-Div-Homepage”
On the mobile version of the website, I named the div differently so that It won’t interfere with main interaction. I must admit, that I must have done something wrong, as naming classes properly and reusing them is giving me a headache.
Problem: On the desktop, and the mobile, ANIMATION GLITCHES - jumps around 20px to the left when it ends animating, currently interactions have been set to start at 0% scroll - so that they are outside of the screen, and they end at around 20%-25% of the web height. Any help would be really appreciated because I’m not sure what I have done wrong.
The last thing - interaction is set to happen on each of the selected elements, it’s not an interaction or anything different.
EDIT: The funniest thing is that I checked each div and didn’t find out anything different in each of them - but the last one - in “what do I do section” works properly on mobile and desktop.
Here is my public share link: (https://preview.webflow.com/preview/digitalcreator?utm_medium=preview_link&utm_source=designer&utm_content=digitalcreator&preview=60f64fca81b199bd077b6d0950583e8d&workflow=preview)