Streaming live at 10am (PST)

Creating multiple interaction on an element

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. Screen Shot 2020-11-07 at 5.17.29 PM

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://preview.webflow.com/preview/testing-grounds-a92878?utm_medium=preview_link&utm_source=designer&utm_content=testing-grounds-a92878&preview=33039137ab89c56b64bc356c195f21e6&mode=preview

Thank you!

hi @Kaelum and welcome, it is always better to share project public link to be able access project from Designer for people who may help. :wink:

Thank you Stan. You just mean the link to the published site? I did above but it looks like an ad for Webflow, just above my video. Is that what you mean?

hi @Kaelum your link gives 404
You can add this link
CleanShot 2020-11-07 at 17.44.09

Thank you Stan!

Hi @Kaelum I have just look into it and I had to restructure (simplify) the section. Firs your product image doesn’t have much space to be moved up as under hand is not much space but it can be partially solved by increasing image height. Second and most importantly your animation have set wrong point where to animate, you have animated wrong elements (you should animate only background as foreground is already moving ). It will be long article to write. I can create an example or meet you over the net if you PM me. Your choice :wink:

Hi Stan thank you so much for looking at this! I’d love to ‘meet’ that would be amazing. Where do I PM you? Is there an option for that on here or you mean through FB or something?

Hi @Kaelum All you need is to click on my name and send a message.