Interaction and Scroll Transform effects

[VRANKOVINA]

Hello guys
can this be related to my case as well?

Effect applied and sticky behaviour and more

Hello guys this is a follow up to this: any news? when I talk to my team here, the answer and especially the looks are “Huh? What? Why so long?”. The prob is, I want to keep the custom coding as less as possible, so the editor can edit the content using just cornerstone. The minor css attempts to achieve at least the sticky behaviour were not so successful. The developers do not maintain the content here. Eh, what, stating the obvious? Sure.

[christian]

Hey @VRANKOVINA,

It is not the same.

[JvP]

How important is it that the units in the entrance and exit states match? For example when I change both units of the entrance state to px and keep the unit in the exit state rem then the transform doesn’t work on the frond-end. It seems that some combinations of em, rem and px break the transform effect on the front-end. Just something I noticed. Can you replicate that?

[christian]

Hey @JvP,

The units doesn’t matter. What matters is understanding the Transforms you are applying to the element making sure they are not conflicting with each other. To demonstrate, I have tweaked the Interaction and Scroll Transforms and they work. In the video below, you can see that the Interaction and Scroll work if Transforms don’t have conflicts.

https://youtu.be/uDmZZWg7vi0

[JvP]

Hey @christian, I’ve updated the secure note with staging site credentials.

[christian]

Hey @JvP,

Your staging is down. Once it’s up, please deactivate all 3rd party plugins in there and activate the parent theme. If the issue persists, it is a conflict with transform values (not the units) as mentioned previously. For example, you set the Scroll to pull down the element while your Interaction is pulling up.

[JvP]

Ok, can you try again? It should be online.

[christian]

It’s still down. Please review my previous message. I have mentioned that the Interaction and Scroll effects work if there’s no conflict with their transforms as you can see in my video. Please check the settings that I left in your live site page.

[JvP]

I understand there’s some kind of conflict since it doesn’t work.

In the meantime I have disabled the Interaction effect and instead applied Element CSS on the card to handle the transform on hover. This seems to hold up nicely so far. Now both the Scroll effect (applied with the Effects module) and the Element CSS hover transform work consistently.

Could it be some kind of race condition or stacking context issue? Especially taking into account that some transform effects on elements inside the modal were also affected, and changes to those sometimes affected the transform effects on the card itself?

[christian]

Hey @JvP,

@JvP

Could it be some kind of race condition or stacking context issue?

It is unlikely because if that’s the case, all the test changes I did won’t work also.