Scroll to Animating Div
Hi,
I have 'a' tags in my header with href pointing to a div that has animation. The animation applied to the div translates it along Y axis. I have used animation-timeline: scroll() on the div. So, as I scroll the page, the div translates (parallax effect (I have so many moving divs)). But the main issue is, due to this animation, when I click on the 'a' tag it is not taking me to the expected position because the div is translating. I thought of using offset, but since the animation speed depends on height of the total page (scroll-length), its very dynamic and I have no idea what to do. Any idea how to fix this without changing much structure?
6 Replies
Searching for the codepen link hmm
shit mb...here is the link:
https://codepen.io/Xeno-Reaper/pen/wvNRBbw
Note: Please open in chrome. animation-timeline currently not supported by many browsers
@iDropPantiesYou can try use the
scroll-padding property
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-paddingMDN Web Docs
scroll-padding - CSS: Cascading Style Sheets | MDN
The scroll-padding shorthand property sets scroll padding on all sides of an element at once, much like the padding property does for padding on an element.
but the more i scroll, the more the animating element translates rigjt
how can a fixed padding help this
help pls:(