AnimationCard works on emulator but not on Messenger - bots

Question

I am trying to display an Animation Card using the Bot Framework with a text, GIF and buttons. It works perfectly on the bot emulator but does not show up on Messenger. Any ideas?
Code
/**Send the question with the level information if available, the index and the Math expression along with a countdown timer as GIF attachment */
let message = new builder.Message(session)
.text(level ? level + ' \n' + strings.question : strings.question, dialogData.index + 1, question.expression)
.addAttachment(
new builder.AnimationCard(session)
.media([{
profile: "image/gif",
url: "https://media.giphy.com/media/l3q2silev6exF53pu/200w.gif"
}])
.buttons(buttons)
// .toAttachment()
)
session.send(message)
On Emulator
On Messenger
Any ideas what might be off? Thank you in advance for your suggestions
UPDATE 1
This s the error on my console
{"error":{"message":"(#100) Param [elements][0][title] must be a non-empty UTF-8 encoded string","type":"OAuthException","code":100,"fbtrace_id":"CLEcx63w+4N"}}

Answer 1

You need to include a title with your animation card, Messenger requires all cards to include a title. Also, animation cards work a little differently in messenger in that they send a message with the .gif followed by a card with the title and the buttons, rather than having them all together in a nice card like in the emulator.
In your use case, I would use first line saying what level it is as the title, and the question as the subtitle. This text will appear below the gif instead of above it, though, so it's a little different layout than what you have now.
let message = new builder.Message(session)
.addAttachment(
new builder.AnimationCard(session)
.title(level ? level : 'Level 0')
.subtitle(strings.question)
.media([{
profile: "image/gif",
url: "https://media.giphy.com/media/l3q2silev6exF53pu/200w.gif"
}])
.buttons(buttons)
)
session.send(message)