Hello out there. I’m new to Webflow and trying to create an interaction whereby I have a photo in a div block and a mask in a div over top of it, this mask has shapes cut out of it so the photo is seen through the shapes. I’m trying to use interactions to create a parallax with the mask following the photo but at a slightly different speed. I’ve been playing around with interactions and I’m stumped as I see the two interactions I have created seem to have radio buttons whereby I can select one or the other. These animations I’ve created do not both work together, it seems that based on which radio box I select I get different results. But my understanding is this is a place to stack up MULTIPLE animations that can all happen simultaneously…rather than a list of options of which I can only ultimately select ONE to take affect. Why are there radio buttons here and why can’t I have my animations both happening together?
UPDATE: I’ve figured out how to get both to apply by creating a second element trigger, which then gave me the option to select the other animation I had already created. So in the first element trigger I have the mask radio button selected and in the second I have the img back radio button selected. This seems redundant rather than just being able to create multiple animations under one element trigger (given that I’m using the same element trigger for to move each element. 
I am curious if I’m doing that correctly, but in either case it’s at least functioning…applying both animations simultaneously…which leads me to another conundrum. 1.) This would be the header banner for the page, when it loads however it loads offset. As soon as I scroll slightly it aligns itself, but on reload it’s always shoved up. Why isn’t it loading to the correct starting point? 2.) As I scroll up the mask eventually reveals the bottom of the photo beneath it, since it’s moving at a faster rate, how to I cover or clip so that this isn’t visible?
https://webflow.com/design/testing-grounds-a92878
Thank you!
