I’ve been building a website with some pretty simple animations at the top of my page. The animation plays while in general desktop sizes, all the way down to phone size. But in the top two desktop window sizes, it doesn’t play - and is basically stuck on the beginning of the animation.
I’ve been searching for any item/element that might be getting in the way, but I haven’t been able to find anything. Would any of you out there be able to help me here?
Hello @TrevorSoh, your site looks pretty cool man, good job. The problem with your higher breakpoints is that the position of your Line-Reveal-Anime is not triggering your animation because it is outside the screen. One way to fix it is by changing the position of that element and modifying its width. I did the following and it worked on the designer
On you second to last big breakpoint, on the Line-Reveal-Anime, get rid of the position offset, bring it back to 0vw on the left side, and then give it a width of 56%. I hope this helps.
That was the solution to the problem. I inputed the new settings and yes, it worked just perfectly. (although I keep that left side offset to something small like 2vw) just so block extends beyond the boundary.
So the lesson is that I shouldn’t have something too far off the screen if I want to trigger an animation.
