Grid Layout

The header is created using the CSS Grid Layout Module. The grid has 8 columns with the text block occupying the first four and the background image the rest. The slide in image is floated over the header by placing it in column 3 to span four columns and aligning it vertically in the center.
The optional logo can be placed at the top or bottom left and its distance in can be adjusted in the widget settings. In this demo, the logo is positioned at the bottom of the header because the RGL Overlay Navigation widget is positioned at the top.
Animation
The slide in animations are created by allowing the items to transition in on the x-axis from a position offset to the left or right. There are controls for setting the animation time and delay in seconds for each item.
The speed at which the items enter can be adjusted by changing the distance they have to travel. The longer the distance - the faster they go.
In the example, the text is offset by 200px and the image by 500px. If high speed is your thing, set these to about 2000px.
Text Block
The h1 heading and the text can be aligned left, center or right as can the optional CTA style link. The link is configured to open an internal page.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. If an Apple font that is not available for Windows users is inserted, make sure the fallback font has the same characteristics as the first choice font.
Images
The header is much more efficient in terms of download speed than a full width hero item since the background image only needs to be cropped to about 800px wide and the slide in image to about 600px.
The animated image is inserted with alt text and has options to add an overlay caption, a border and/or a box shadow. The image has a maximum width setting. The lower the aspect ratio of the image - the lower the maximum width should be.