I have an SVG animation done with anime.js on scroll event, the SVG is fixed at the bottom of the page, the idea is that when the animation finishes, I show new content that will be basically a continuation of the SVG.
The problem is that I don't know when to show the new content.
Things I am struggling with is that I can't animate the animation on scroll if I don't have content to scroll to, but then If I have content, I don't know how much a user has scrolled and when to show the new content.
Also, I have a problem where I have an animation duration of 1000ms, but the animation is laggier if I have more content on the page, so the more space I have for scrolling, the laggier the animation, and I think that this will affect the appearance of the new content also as the user can scroll way too far.
Related
I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
I'm trying to have a div slide in at the same time as another one slides out, but when sliding in the div is completely invisible at the target location until the slide animation is complete. I'm not sure why this is happening. Does it have something to do with the iframe that is in the location at the time of the slide?
Here is an example of the issue. jsfiddle.net/eqck8vn2/1/ when you click the Twitter tab on the left, instead of smoothly sliding in, it scrolls in at a position right below the currently visible element (the iframe) before just appearing at the final position (even though there is a sliding animation applied to it without any specified positioning).
Thanks in advance for any help.
I am building an infinite scroll component for a web page that needs to work on iPad.
So - when the user scrolls to the bottom of a list, we load more content and display an animated ajax loader image while it's loading.
I have managed to get this to work to a point by using the touchmove event to measure page scroll position and load content when required. But - when we are scrolling the page, any animated gifs (or css animated icons) stop animating (presumably to reduce load on the gpu).
I have however found a way around this - if I create an element with overflow:scroll on it, I can put all my contents in that and emply the same method of measuring position on touchmove but the animated gifs still continue to animate and I can run javascript functions in the background as well.
But - I also want the scrolling region to have the standard iOS momentum/inertia slow down after scrolling. I have managed to achieve this by applying -webkit-overflow-scrolling: touch to the scroll region.
So - to my question - when I release the scroll element and it gradually slows down, I would like to measure the position of the scrolled element as it auto slows down (if that makes sense). I can measure it as I scroll through the use of the "touchmove" event and I can measure it when the momentum comes to a halt but not during the momentum/slow-down bit.
I can run javascript loops/intervals while it is happening but it seems impossible to acually measure the scroll position of the element as it gradually slows down.
Any ideas?
Thanks
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you