Changing transform-origin for hover effect (enter left, exit right)
Hi. One thing I've always struggled to understand is how to change
transform-origin so that an animation smoothly enters from one side on hover and exits on the other when it loses the hover state. Here's what I have: https://jsfiddle.net/Matthais/epnky1o8/
Pretty sure Kevin did a video where he covered this a couple of years ago but would be a needle in a haystack to find.
Would be grateful if anybody can please point out where I'm going wrongEdit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
3 Replies
set the default origin on normal state, and change it in the hover state
simple example
https://codepen.io/MarkBoots/pen/ZERYmaW
I think this is the video? https://www.youtube.com/watch?v=ceNMP-aQkQ4
I was already doing this in my example, just with percentage values rather than the strings.
After further playing around the issue was my lack of specificity (
all) on my transition, rather than targeting scale specifically. It seems like transform-origin is effected by the transition property otherwise.
https://jsfiddle.net/Matthais/epnky1o8/