WAIT: Section Template reappears after Slide Out

Browser: Tested in:
Chrome Version 113.0.5672.93 (Official Build) (64-bit)
Firefox 113.0 (64bit)
Avast Version 113.0.21147.93 (Official Build) (64-bit)

OS:Windows

I have set up a section template (grey bar with star icon in screenshots) and set it to conditionally appear on a page. When I set an interaction to hide the template element on click of an icon this interaction works no problem. When I set the same interaction to slideoutright on click the template slides out successfully but then immediately reappears. These screenshots show the backend of the template and the page it is conditionally applied to.

The Section Template:

The Page:

I don’t know if this is enough info for you do go on. Unfortunately the URL is a private staging area only viewable when logged into my hosting co and I have not used the screen recording tools because of security concerns. Let me know if I can answer any questions though.

Hi,
Thanks so much for your report!

Basically, this is expectable. If you use show or hide, the element gets hidden with display: none; and shown with display: block or flex.

The animation uses opacity and transform to fade and move the element. Since the default animation fill mode is both, the animation resets after reaching 100% which results in the container showing again.

I tried to change the animation fill mode to forwards which should solve the issue, but unfortunately, it doesn’t. I need to take a closer look when I get a chance.

What you could do in the meantime, is to apply a custom animation with the correct fill mode:

.myAnim {
  animation: fadeRight 1s forwards;
}

@keyframes fadeRight {
  0% { opacity: 1; transform: translate3d(0,0,0);}
  100% { opacity: 0; transform: translate3d(100%,0,0); }
}

However, I am not sure if this is the result you want.

Best regards,
timmse

Thank you very much! I managed to solve this for now by switching to a popup template in 1.8 beta rather than a section template and then targeting the interaction to apply to the popup. Initially I’d been using section templates to avoid the close-on-click-anywhere behavior of the popups in 1.73 but you’ve added the easy way to switch this off in the 1.8 beta. However, for anyone working with a live site and bound to 1.73 for now hopefully your custom solution will suffice in the meantime. Many thanks.

Ok, I’m glad you found an alternative solution. I’ll bookmark the post and look at it again when I get a chance. Normally the animation fill mode should be overridable - why it is not, we have to find out.

Many thanks! Dropped an update in here which I imagine you’ll check first. WIP: Animated Type in popup begins on pageload not popup load

In the meantime I tested this out and it’s exactly the effect I want, but I can’t get the slide to go up or down, only right and left. However, I’m also not in a rush, so I’ll just keep my eye on things here and see how you make out with it when you have a chance. I can only imagine your days are rather full at the moment!