Streaming live at 10am (PST)

Scroll animations not working on my site. Text is also unresponsive

Hey everyone, I have been building this site with a parallax hero section and have ran into a host of issues when animating.

The hero section has 3 images (sky (Position: fixed), mid (position: fixed) and foreground(absolute)) I have set a scroll animation that; scales the sky, moves the mid image up and the hero text down along the y axis on scroll. All these are unresponsive both on the previewer and on the live site.

I have also used EM as my units on text and they do not respond to changes in screen width. I have set different sizes at the different breakpoints but the visual size remains the same in-between.

This project so far has had a lot of issues especially with animations and I started over thinking I had messed up somewhere but the issues till persist.

I have attached images and links below. Send help :frowning:

Thanks.


Here is my public share link: [Webflow - Magical Kenya][1]

HI @Sam_Baraka there are a few thing you should pay attention to

  1. units assigned in your animations are not equal. Yo should check these unit as your animation initial value is set in px and end of animation in em thats why you have yellow warning triangle on these elements.

  2. You can consider set trigger element with height eg. 150vh as trigger and use “while scrolling in view”

I have done short video to make it more clear but I will delete video soon as my Clod storage is getting full.