electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

An issue in animation execution only during window resize #58

Closed kylebaskin closed 4 years ago

kylebaskin commented 4 years ago

Hey there,

First off, let me say that this library is amazing. I've had no problems using it with my own code, and it's given me the opportunity to do some pretty cool things.

However, I've unfortunately inherited some raunchy code from a new project of mine in updating an older web page. For reasons which are out of your control, my animations only work while I resize the browser window (check rotation_bug.mp4 in attached zip file).

I'm assuming something is wrong with the code I've inherited, because I've gotten each animation to work on the same domain and browser, just without the extra code around it.

Here is a zip file with all html, css, and js files, as well as an mp4 file to clearly illustrate the problem I'm having (in the mp4 video, I'm attempting to rotate the "our solutions" header in bold). If you'd like to try it for yourself, the link is here

I'm unsure if this is the place to ask about this problem I'm having, so ignore this if it's not relevant.

Thanks!

electerious commented 4 years ago

Glad you like basicScroll!

Not 100% sure what's the problem, but here're things you can try:

a) It could be because of the from and to values. The element isn't big and the animation starts when the top of the element is in the middle of the viewport and ends when the top of the element is at the top of the viewport. I might try some other values that might work better.

b) There could be an image on the page that shifts the scroll position once loaded. You could try to run instance.calculate(); instance.update() after a delay or when the images are ready just to check if that's the problem.

electerious commented 4 years ago

I will close the issue as I don't think it's a bug, but you can keep commenting :)