the designer has handed me this and asked me to use my imagination. How would you animate the text and colour overlay on hover? fade? translate?
Also how would you create the shape? Using an svg or clip path?
This is what I have so far (ignore the horrible code, i've quickly extracted it from a sandbox) and I know it looks pants but looking for ideas before I spend ages creating something that looks bad
I would use a rotation and movement animation on the background triangular shape and a fade in for the text and icon.
I bit like you already did (maybe make the animation on the triangular shape slower) but with a slight rotation for added dynamics.
OP if you want to massively over-complicate this you could have the mouse enter position determine the angle and position of the shape, something like this
haha yeah I looked into this kind of effect but I think it might be a bit overkill in this instance.
It's actually quite simple and doesn't require much JS, check out my example:
https://codepen.io/samjsharples/pen/RNavyZm
Quick mock-up: https://codepen.io/NeilSchulz/pen/gbrqxeb
My first instinct would be a pseudo element with width and height greater than 200% (
overflow: clip;on the parent so the excess is hidden) then give it a conic-gradient with colour / transparent breaks to get the shape. For animation just rotate the gradient so the coloured part moves from outside the element to within. And maybe a little tweak to text opacity or colour so it looks like it's under a spotlight.Thank you kind sir. I like the animation of the shapes but not the text too much. I will replicate this kind of effect and amend to suit. Thank you very much šš»
Yeah I didn't like the text either, initially I just had in place at 0.75 opacity and 1.0 opacity when the shape hit it, which was better.
But then I got carried away pissing about just trying to animate everything.
Do we get your paycheck, too?
Iād never expect anyone to do my work for free, I was simply asking for suggestions. Do you usually ask people to share part of their wage when you offer help in situations like this?
Use clip-path and rotate the shapes as u/jonassalen stated.
Example: https://codepen.io/crpl1/pen/LENqemq
I quite like the subtle movement in your example. Thank you very much for your time šš»
No problem!
What's the starting state? Just image+ text?
I'd opt at least for a simple translateY with a nice relaxed easing on the text e.g.
For the fast , let the text slide in fast from the side to its position
For the scale, make a border square grow around the text until it matches the border of the whole element.
Those would be at least my initial thoughts to emphasize the meaning and I'd work from there.
Of course just use css animations for this simple stuff.
I would do subtle animations first..
on the card wrapper throw an
overflow: hidden;then on the cardimg:hover {scale: 1.1;}bump the scale up to 1.1.. you can also do afilter: blur(2px);on the image hover too. Make sure you transition the scale too.As far as the shape you could use a clip-path but you can also use
shape()but I haven't checked https://caniuse.com for the browser supportok animations are created in ui steps and the designer is responsible for this. if is not like this, use libraries like framer motion... and use the standard normal animation from that.
Libraries are really overkill for such a simple element. CSS animations can do this out of the box.