Animate H1 span won't work

Design help Animations & Interactions
1

Hi,

I created an H1, which contains a group of H1 spans because I styled them differently.
Now I’m trying to animate each “H1 span” by moving them on the Y axis right or left but the h1 span elements won’t move.

I went to the Interactions panel, Created a new animation on page load to have them move in when the page loads.
I noticed that I can only move the entire H1 group for some reason, not each H1 span individually.

My goal: is the following:
Text: UI/UX designer → to move to the right
and text: & Web developer → to the left
and have them come to their initial position when the page loads

Can you please advise how to make this work.
Thanks in advance!

2

By default, SPAN elements are laid out by browsers as text content, which means that the browser has no idea what to do with your positioning changes. You need to change them to positionable elements first, like an inline block.

image

Let me know you what I mean;

2 Likes
3

Thank you so much @memetican !!

Yes I understand and I changed it to in-line block and now it works.
I was so discouraged yesterday but now it all makes sense!

Have a great day!