The way you did the animation is all good, maybe it’s not what you wanted but it is working exactly how you did it.
- This is scroll scene interaction so ya it will only animate when you scroll. But this depends on the trigger positions, you can define when the scroll interaction can start and end. Please check the start/end settings.
Another useful thing you can do here is that, at certain point, animation can play without the scroll. For that check the Advanced options > on Play select Independently
- As I already said that is depending on the start/end position
- This is because you’ve applied X 400% and -400% position on those elements. Now those elements are out of the browsers viewport, so it is best to apply overflow-x: hidden on the main block
You’ve to understand the Wow.js is a library/plugin that does one specific thing and tries to make it easy for user with the use of very less code. But even if you need more customization, you have to tweak few things on it.
Where as Pinegrow with Pinegrow Interactions is like a code editor which provides tools for you to create web pages as you need, giving you the full editing control. It does have some pre-built libraries but those are additional features, which can help us even more. I mean, the difference is like hand made and machine made.
Building pages and adding simple animations are pretty easy on Pinegrow. But if you need advanced interactions/animations you’ll have take care for related things as well. Pushing elements here and there can cause issues like overlapping, hiding or viewport issues. So these are expected of how HTML/browser works, for these we’ve to work more on the elements and CSS.
And the main thing, it is best to go through the documentation Scroll Scene | Pinegrow Web Editor this will be very helpful to understand all the settings and make your base strong. You might also encounter some useful features, I missed some feature at first and went through the doc. With that feature I’ve made one good interaction page, might take a little time to make it public.