When my website loads I have all of the elements in the hero animate in. My issue is with the ‘Page Load’ animations, specifically with the scroll indicator at the bottom. I have two current ‘Page Loads’:
Page Load 1: All the elements animate in as the page loads (this includes the scroll animator at the bottom being drawn in).
Page Load 2: This is a small animation on the scroll indicator mimicking a scroll action to encourage users to engage and scroll further down the page. This is a looping animation.
My issue is that Page Load 2 starts before Page Load 1 has animated everything in. How do I delay Page Load 2 by 1.5 seconds to avoid the clash?
Thanks for this. I did try this before but the problem is this extends the animation to 3.75s. What I am aiming for is to keep the scroll icon animating around 2 seconds. I would only like to delay the looping animation for 1.5 seconds at the very beginning whilst all other elements animate in and keep the scroll icon animating every 2 seconds after that. 4 seconds between scroll indicator animation is too long and can go unnoticed
As WF offer only very simple tools you need to use custom javaScript to set event listener when DOMContentLoeded and set setTimeout() to trigger after 2000ms adding class to classList that will contain animation to move your element in certain intervals. Or use setInterval() all depend on your needs and skills. You can go to eg. Codepen and search “scroll down button” to get an idea how to
