Research around advanced UI/UX functionality in Email Templates

Support for horizontal scroll

Mostly Support for the overflow CSS property, we can apply for these email clients(representative):

Apple mail

Outlook web

Gmail web

Support for flip of a div on hover

Hover is works fine in some email clients, but transform, transition only works for specific email(Apple mail, IOS, Outlook on macOS)

• Hover
• Transition, Transform

Apple mail +

Outlook web -

Gmail web -

Rendering a sentence with animation by displaying one character at a time.

Overview CSS animation is supported in webkit clients, such as Apple Mail, iOS mail apps, Outlook on Mac, and when viewing emails in a browser.

Apple mail +

Outlook web -

Gmail web -

Notes I try to find docs and do a lot of examples, but I can't do the animation works fine to support multiple email clients, which seems like a challenge to me.

Questions

• Have you any documents or examples for the section second and third of the research list?

Send email

• Clone source code, then cd your/source/path and npm i
• Change the email to on server.js

and copy the template that you want to send into email.handlebars:

• run node server.js

Resource Refer

• https://www.campaignmonitor.com/css/
• http://freshinbox.com/resources/css.php