[typhoon] Hero Title with Animated Text

[Mikfr83]

Hi,

I'd like to use the Shortcode UI plugin to add animated text to my hero title.
In the file hero.html.twig I modified this :
{{ hero.title.text|markdown(true)|shortcodes|raw }}

The animation works well, but I've lost all control over the text appearance.
The animated text size is too small, and the color isn't what I set.
The shortcode [size=50] or the element="h1" parameter has no effect.

This is my last issue to finalize our website, could you light me ?

Thanks,
Michael

[Mikfr83]

I know, it's not really an issue of the Typhoon theme.
But I'd be interested in any part of the solution.

Thanks,
Michael

[rhukster]

The problem is that when you use the |shortcodes filter in your Twig, the logic that adds the appropriate JS and CSS wion't work. You would need to add the folllowing in your partials/base.html.twig or perhaps in the partials/hero.html.twig but you would need to make sure you had never_cache_twig: true set in the hero page in the case of the latter option.

Then add the CSS and JS manually there:

{% do assets.addCss('plugin://shortcode-ui/css/ui-atext.css') %}
{% do assets.addJs('plugin://shortcode-ui/js/ui-atext.js') %}

This will then at least get you the animation working. However, you will have to tweak the CSS and override the styling to ensure the font is the right size/color etc.