So what I am trying to achieve is to have the SVG element slide into the viewport as the user scrolls within the selected div. The effect is partially working since on the initial load, it doesn't position the element as I defined in CSS, in this case: right: -150px to hide it outside of the viewport, but it immediately sets it to the value assigned in the AnimeJS timeline.
If you scroll slowly, you are going to see the element in the position right: 0 which is the final location, and when it triggers, it pushes the element to -150 and starts the correct animation.
Is there any way to keep the SVG outside before the actual animation is triggered?
This is a codepen:
https://codepen.io/lukagurovic/pen/OJbvKGK
Update: I just tried to add duration to the animation and it seems like the animation plays as soon as the page loads
Found the answer. The autoplay is not supposed to be set in the animation object, but rather in the timeline itself. const timeline = anime.timeline({autoplay: false});