Interaction on Success Message Div after form submission

Hi everyone,

@cyberdave Bringing this wish list post back up that you helped on as it has been 3+ years since no solution was found.

Here’s the share link to the project I am referencing. Specifically, I am referencing the /success page.

I want to perform an animation within the “success message” div after a form is submitted. Please see this screen share video where it is working in design mode. I currently have it set to animate when the success message div is scrolled into view. However, the animation does not behave correctly once published and the form is submitted.

Does anyone have a suggestion to accomplish this or see something I am doing wrong?

Thanks a ton!

The success message is there in the viewport all the time, it’s only hidden, and shown upon success. So I don’t know if the trigger works at all, but if it works, it happens as soon as the page is loaded, while being invisible.

I’ve done a success animation once and I think I simply binded the interaction to the Submit button of the form. I added a delay at the beginning of the animation to address the form’s processing time. My animation was a rocket being launched, and there was an idle animation before take-off, so I could have a long and safe delay without having the interaction to feel broken or delayed.

Thanks for the explanation @vincent. Perhaps there is a way to trigger the animation on show/hide using custom code? If so, any suggestions?

Thanks!

Is this what you’re looking for?

2 Likes

Hey @Cyan, this is exactly what I ended up doing about a year ago. I’ll mark as the solution!

1 Like