Creating a circular reveal animation with JavaScript and CSS!
HTML-код
- Опубликовано: 10 сен 2024
- I'm going to take a little JavaScript and combine it with some CSS to make a nice circular masking reveal. No need to mess with clipping, we can do it all with scale transforms!
![Chlöe - Shake (Feat. Jeremih) [Official Visualizer]](http://i.ytimg.com/vi/aDs_1ufpfv8/mqdefault.jpg)
10/10 ⚡️Supercharged shout-out
❤️
Paul, your videos are pure Gold.
Love it. Your videos are so fun to watch. Thanks a lot.
Thank YOU for watching
I'm pretty pumped to see MPJ here next time!
Yeah I just edited that video. Next Wednesday it is!
I did not know that I needed 'cirular masking reveal' until I watched this video. Now I find myself wanting to apply this "circular masking reveal" to all sorts of things in my projects.
Protip: no need to duplicate transition rules. Just define it like this:
transition: .2s ease-in-out;
transition-property: color, transform;
Yeah I often time my props separately (whole other video) for overlapping motion etc, so by default I dupe
Looking for this circular animation long time.....today going to learn..thanks Paul...
Yet another fascinating video! Thank you.
Coincidently watching this (again) exactly 1 year on - Thanks for another great video 👍
Well this video sure is telling me that I don't know a lot about animations. Thanks a lot
Amazing Paul Thanks you so much for sharing you knowledge :D
Thanks Paul, very informative video for me. Keep on sharing your huge knowlege.
animations always seem like a magic to me! Great video! 👏
invaluable info, thank you
sick! love your way of explaining
Thank you so much! That's brilliant. 🔥
i simply love your videos!
Loving each video !!
Hi Paul Lewis, i like this video but I wonder how you can do the same effect with two or three elements, how to pass the event.target to the function update (), and how to cancel update cycle, when animation is finished, uhmmmm.
Thanks for video! How to cancel RAF update cycle, when animation is finished?
Oh yeah I need to do that with the code I pushed. Oops. Basically check if the delta between target and actual is less than a given threshold.
@@aerotwist ok, thanks
I was wondering about this, too. Thanks for clarifying!
Nice One! Thanks Paul . . .
Always a pleasures
Hey Paul, great video (as always). I had a bit of trouble implementing this animation as a React component, so I gave up and did it only with CSS, here it is for those interested jsbin.com/qimodesiro/edit?html,css,output
Here's one this kinda feels you could achieve this effect just with CSS transitions. Any reason you went with JS over CSS?
Yes the counter scale in CSS is nearly impossible to get right without wobbling / jitter
YES! THIS!
Paul, is this reveal effect achievable with simply using transitions in css? If so, could you please comment on the performance benefits of using either of this approaches? I suppose using masks could also be a good idea here. Any thoughts on that? Hope to hear from you soon!
I have some questions:
>>> Why css mouseover is preferred over pointerover any reason?
>>> Is there any way to use slidein/slideout using transforms without touching the height?
>>> why the height:100% to body and html?
>>> Could you explain this inverse animation cancels out normal animation?
Great questions!
1. Because we want to hand the browser as much control over animation as we can. I wanted to minimize the JS where possible.
2. ScaleY plus 1/scaleY
3. Just to put it in the middle of the viewport. HTML and body aren't the same size as the viewport initially.
4. If the outer element is scale(2), and the inner element is scale(1/2) they cancel out. Scales are multiplicative, so 2 * 1/2 = 1
The height:100% enables the flex property work well. since the body element will have the height of the viewport. You could use the transform: translateX or translateY for a slide in and out
@@aerotwist Thanks for answering the question...so nice Paul as ur videos...I am big fan of you since ur supercharged days...My concern is putting height:100% to body or html prevent position:sticky to work and basically html element will overflow with scroll without overflow..correct me If I am wrong
I did exactly what you've done but as soon as i put top: 0 in the css @11:42 my pointerout event stop working (i tried to console out a msg in it that didnt even work). Till 11:42 everything works fine. Can you help me with this?
same issue here. Funny thing is that when I remove the width property or lower the width value of the psuedo element .circular-reveal::after, the pointerout event works fine. But obviously, now the background is cut.
When the width is set to 90%, the event fires if the pointer/mouse exits the element to the right.
/**edit**/
changing the target of my pointerleave event lister to the parent element worked.
jsfiddle.net/rollinglex/juac8xvh/
@@alexthomas9779 Thank you so much it worked! You are awesome :D
Would you please do a video about rendering in which you will discuss things like paint and composite and different phases of it?
Nice shirt!
Sweet as!! Your collaborating with FunFunFunction??
Yes. On his channel, and on here a chat
Ohhhh exciting!!! Get ready to take some flack for those semicolons though ;) lol
a small suggestion: why not use `will-change` for better animation performance?
Yeah you could 100% add that here, would be a good addition
The first 15 seconds really brightened up my morning! 🤣
Great video, Paul! Nice little effect there. I guess also masking would trigger a repaint on each frame.
I also tried to recreate the effect using CSS only: codepen.io/MaxArt2501/pen/xQwNrb
The trick here is that you don't apply the transformation to the _content_... just to some masking covering pseudo-element.
I'll try a Houdini approach later. Stay tuned! 😉
Nope it shouldn't repaint during the animation due to scale transforms. Though it probably needs a will-change or whatever to guarantee that.
Someone else also dropped the 'occlusion' version earlier. It works in some contexts, for sure, but like anything it's all trades :)
@@aerotwist I meant 'masking' as in CSS Masking (i.e. mask-image property and such).
And yes, that would trigger a repaint. Confirmed this in this Houdini version: codepen.io/MaxArt2501/pen/VVvJEG
Used a paint worklet, and also a declaration from Houdini's Values and Properties module so I could actually animate a custom property 😉
A little overkill but, eh, it works and allows non-solid backgrounds behind the image.
I mean, it might be good enough for your use-case? Always test... This whole thing is about having multiple strategies on hand
Well done Paul!
I've been working on a 7 segment display real-time reader using opencvjs, I thought you'd recommend me something helpful.
Thanks!
Another great video! Thanks Paul!
You always give me important tips about performance related to animation. Do you have any video or article to recommend on that subject?
This: developers.google.com/web/fundamentals/performance/rendering/ and in there the link to the Udacity course :)
@@aerotwist Thank you!
the best
2:17 did you have to include html in the first CSS rule? I think body would suffice.
Well its a CSS reset its kinda the point. So yes you would either include body or not bother doing it.
Been using this great technique ever since you introduced it in this article! developers.google.com/web/updates/2017/03/performant-expand-and-collapse
I use it heavily in react-native-dom for its layout animations though I took the approach of pre-calculating the keyframes and passing them to the web animations api.
Yeah they're all subtle variants. I think it's mostly about having choice so you can adapt to constraints.
great video, can someone pls tell what's the BGM playing at 44s onwards, thanks
All my music comes from Epidemic Sound. I can't tell you exactly which track it is as I'm not at my editor, but I'll try and remember to check.
@@aerotwist hey thanx, btw your teaching style is great, do you plan to cover some more beginner level CSS stuff for people like me who have more experience with JS but not so much with CSS
I'm up for whatever. Mostly it's whatever comes to mind. If folks have particular requests I can try and incorporate them :)
you should consider getting a more stable place to place your camera. watching you is fun and all but every-time you touch the camera everything starts to shake. Cheers
hit the intro!
You have a RUclips channel now? ❤️❤️
I do!
Can you share with us a folder ( repo) of yours incredible thing on GitHub 😊?
The code for this? It's on aerotwist.com/tutorials
@@aerotwist Lovely 😀
protip: to change both 'translateY' to 'rotate' you could press ctrl/cmd + D after select the first 'translateY' to select the second one and 'rename' both at the same time
You know I'm sure my brain freezes when the camera rolls.
Happens to us all