New tutorial on webflow blog (animated text overlay)

Design help Animations & Interactions
1

not sure if this is where i should ask this…

i noticed this new tutorial on the webflow blog:

Create an animated text overlay on an image on hover

the tutorial does not go over whether this interaction works on mobile.
does it work on mobile?
and if not…can the tutorial be extended to include steps on how to implement on mobile?

thanks!

Here is my public share link: LINK
(how to access public share link)

2

Sort of… There is no Hover eventson mobile. instead, you have to tap. When you have a link with a Hover event, you need to tap once for the hover effect, once for the link.

So you shouldn’t design hover for mobile.

As you can’t activate interactions depending on the breakpoint, you can duplicate the element and use a scroll interaction for mobile instead (you ide the first element for mobile and show the duplicate only for mobile). for example, when the element enters the screen, the effect appears.

3

This is a great question!

Vincent is exactly right in that a hover interaction wouldn’t work on mobile, simply because there is no way to hover on a touch device.

This is what I recommend doing:

Keep it so the overlay is always visible. Yes it will cover the image, but I’m most cases the text is more important, and should be shown over the image. This is also a reason to instead of doing the initial appearance in the Interaction panel, to simply change the way the item appears on the Style tab (in this case, instead of adding an initial appearance of 0% opacity within the interaction, simply change the opacity on the element itself in the style panel). The reason for this is that currently Interactions doesn’t let you change the initial appearance for different devices, so if the initial appearance is set as 0% in the Interaction, it would be that way on all devices - and since mobile doesn’t have hover, there isn’t a way for the viewer to see the content.

Im going to update the blog post to talk about this as well!

Thanks for the feedback!

Mat

4

awesome … thanks @vincent and @Mat… you guys rock!

btw this tutorial is right on time :smile:
i am actually working on a site today that i am going to use this for…so thanks!!!

1 Like
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.