Beta 2 - effects... some weird sh*t going on here

[scotbaston]

Watch and enjoy… also fix please

[kory]

@scotbaston,

Can you please provide some more context on what is happening here? I think I’m seeing what’s going on, but without any real details on the setup it’s hard to reproduce to test.

Also, please see my reply on your other thread to hopefully give you some context on Effects:

Beta 2 - Effects not stacking

Hi guys, this may well be user error as trying to figure out the effects, also this is within a global block I have a starting opacity of 0.5 and an x location of -100px on scroll, I was the opacity to go 1 and the x location to be the default 0 what happens is the x locations works, (although I’ve not been able to get the delay to work) but the opacity stays at 0.5 [image]

Thanks.

[scotbaston]

Hey Kory,

This was a global block with a title (in a classic row) and 8 columns in 4 column row.
each button had a starting x translate of -100px and an on-scroll translate bringing it back to a neutral position

the effects work well but in the global block editor, it was possible to drag the buttons outside of the columns (probably linked to the -100ps translate). once the buttons were dragged outside of the column it was impossible to interact with them until a refresh of the page was done

I suspect the drag and drop is picking up the translate values??

Let me know if you need access to my staging site… I have changed the effects now but can easily put it back for you to see the problem

Best wishes

Scot

[kory]

So there is some nuance here, but I think that I know what might be going on. First, the scroll transitions for the elements have 3 states (technically 4, but we don’t really do anything based on the 4th):

• Exit: The element is full in the “out” position specified in the module (denoted by the presence of x-effect-exit on the Element).
• Entering: The element is transitioning from the “out” position to the “in” position (denoted by the presence of x-effect-entering on the Element).
• Exiting: The element is transitioning from the “in” position to the “out” position (denoted by the presence of x-effect-exiting on the Element).
• Enter: This is the 4th “state” mentioned above, which is just when the Element is fully in the “in” position. There is no class added to this state.

When an Element is in any of the Exit, Entering, or Exiting states, that Element receives the pointer-events: none !important; style in the stylesheet based on those classes mentioned above. pointer-events: none; effectively disables the ability for the mouse to interact with the Element. This is important in these states, because if you didn’t have it you could run into situations where you have a faded out button off to the left that isn’t triggered to be “in” yet, but a user’s mouse could roll over it and trigger the “interaction” style, and all of the sudden you’ve got Element’s randomly popping in and out on your screen (not good).

What is happening in your video could be a combination of multiple things, but when working on scroll based events, you have to always keep in mind where your “in” state is being triggered. as well as the general settings of everything. Your Offset value seems to be fine. You’re only firing Once, which means that the Element should trigger based off the Bottom Offset. Since you have this set to 10%, and your buttons are well above the lower 10th percentile of the screen, these should trigger. You can see I achieved something similar here trying to recreate with your settings as much as possible:

The one difference I’m seeing in your example from mine (which I mentioned in your other Effects thread) was to ensure that if you’re using a transform style on scroll, make sure to set both the “in” and “out” style for this. You have a Base transform, which shouldn’t be interfering with the Scroll if it’s on as I’ve set it up this way. I recreated your setup using a Base style, but I have both my “in” and “out” transform in the Scroll styles as well, and I can’t recreate it.

All that to say, what is happening in your particular situation is that somehow your button appears to be “stuck” in the “exit” state. What I would try first is ensuring that you use the proper “in” and “out” controls for your transform. Remove the Base one (even though it shouldn’t affect it), or at least set your “out” transform there so it’s all working properly.

This has all given me some ideas as well when working with effects. Alex and I are considering two possible tools to add for working with effects:

1. A toggle somewhere to Set Scroll Effects to ‘In’ / Set Scroll Effects to ‘Out’, which would allow you to hard set all Elements with effects to either one of these states. This would be helpful for situations like this if an Element were to become “stuck,” or if you simply wanted to focus on styling either state of a scroll effect without having to worry about it needing to be retriggered to see how it works.
2. A “retrigger” button somewhere, which would allow you to retrigger any Elements that are already “in” to see them transition again without needing to scroll up and down or change a setting.

Both of these will aid in the Effects building process, I believe. Let me know how all of this helps you out and what you think of anything when you have some time. Hopefully it helps to shed some more light on things.