Guide: How to create Fan-Out and Bounce Effect with Bezier Curve
Did you know geometric transformations added to HTML elements with the transformCSS property, such as scale, skew, and rotate, can be animatedThey can be animated using the transition property and @keyframes animations, but what’s even cooler is that animated transformations can be created up up a notch with a little bounce effect, using the cubic-bezier () timing function. In a nutshell, cubic-bezier () (in CSS) is one timing function for transitionsIt specifies the speed of the transition and can be used on it, among other things create a bouncing effect in animations In this post, we’ll first go to create a simple transformation animation to which we later add a cubic bezier () timing functionAt the end of this tutorialyou will understand how to create an animation that uses both a fan-out and a bounce effectHere is the final result (click to see effect). See the Pen CSS fan-out rotation with bounce by Preethi (@rpsthecoder) on CodePen. The demo is inspired by this beautiful Dribbble recording by Christopher Jones over an animated location marker. IMAGE: Dribbling The shape of the location marker has been created up of five (let’s call them) leaves. To Oval shape of a sheet, let’s use the CSS property border-radius. The boundary radius of a single corner is made up of two rays, horizontally and vertically, as shown below. IMAGE: W3C The border-radius property has many different syntax. We’ll use a more complicated one for the shape of the marker: boundary radius: htl htr hbr hbl / vtl vtr vbr vbl; In this syntax, horizontal and vertical rays are grouped together; h & v stand for horizontal and vertical rays, and t, l, b & r stand for top, left, bottom, and right angles. For example, Vbl represents the vertical radius of the lower left corner. If you give only one value for the horizontal or vertical side, the browser copies that value to all other horizontal or vertical rays. To create a vertical oval shape, keep the horizontal rays for all angles at 50%, and adjust the vertical rays until the desired shape is visible. The horizontal side uses only one value: 50%. The vertical rays of the top left and top right corners is 30%, while the bottom left and bottom right corners use the value of 70%. HTML
C.S.S .pinStarLeaf {width: 60px; height: 120px; boundary radius: 50% / 30% 30% 70% 70%; background color: # B8F0F5;}IMAGE: the shape of the marker (vertical oval) Since the marker fans out with five leaves, we’ll create four more copies of the magazine in different colors and with absolute positioning to stack them on top of each other. HTML Let’s see our fanning-out animation in action – without the bounce effect at this point. Click on the white circle on top of the marker. See the Pen CSS fan-out rotation by Preethi (@rpsthecoder) on CodePen. To add the bounce effect, we need to replace the linear timing function with cubic-bezier () in the transition statements in our CSS file. But let’s get the logic behind the cubic-bezier () timing function so that you can easily understand the bounce effect. The syntax for the cubic-bezier () function is the following, d and t are distance and time, and their values are usually between 0 and 1: cubic bezier (t1, d1, t2, d2) While it is not correct to explain CSS cubic-bezier () in terms of distance and time, it is much easier to understand this way. Suppose there is a box that goes from point A to B. in 6 seconds. Let’s use the following cubic-bezier () timing function for the transition with the values t1 = 0 and d1 = 1. / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) In no time, the box moves from A to the center, and the rest of the time reaches B. See the Pen cubic bezier (0,1,0,0) by Preethi (@rpsthecoder) on CodePen. Let’s try the same transition with values t1 = 1 and d1 = 0. / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) For the first three seconds the box doesn’t move much, and later it almost jumps to the center and starts moving steadily towards B. See the Pen cubic bezier (0,1,0,0) by Preethi (@rpsthecoder) on CodePen. As you can see, d1 controls the distance between A. the middle, and t1 it time it takes to reach the center of A. Now let’s use d2 and t2. Both t1 and d1 will be 1, and t2 = 1 and d2 = 0. / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) The box moves almost halfway in 3 seconds (due to t1 = 1, d1 = 1) and jumps from point B in no time. See the Pen cubic bezier (0,1,0,0) by Preethi (@rpsthecoder) on CodePen. In the last example, the previous values of t2 and d2 are swapped: / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) The box moves almost halfway in 3 seconds (because of t1 = 1, d1 = 1), then it doesn’t move much for another 3 seconds before jumping to point B. See the Pen cubic bezier (0,1,0,0) by Preethi (@rpsthecoder) on CodePen. These examples show that d2 and t2 determine the distance and time that the box needs move from the center to point B While you probably didn’t need this long (but sparse) explanation of cubic-bezier () at this point, I think it will help you better understand this function. Now where does the jump in all of this come? The main parameters for the bounce effect the distances are, d1 and d2. A d1 value of less than 1 takes the box behind point A before moving on to B at the beginning of the animation. A d2 value of more than 1 takes the box beyond point B before coming back to B to rest at the end of the animation. Hence the back and forth bounce effect. I will now add the cubic bezier () values directly to our demo instead of the former linear value of the transition property and show you the results. #pinStarCenterChkBox: checked ~ .pinStarLeaf {transition: transform 1s cubic-bezier (.8, -. 5, .2,1.4);} Here is the final result, a CSS-only fan-out animation with a bounce effect: See the Pen CSS fan-out rotation with bounce by Preethi (@rpsthecoder) on CodePen. For comparison and to better understand the bounce effect, here’s how the animation’s cubic-bezier () value behaves when applied to our sample box: See the Pen cubic bezier (0,1,0,0) by Preethi (@rpsthecoder) on CodePen.
How to create Fan-Out and Bounce Effect with Bezier Curve: benefits
Faq
Final note
I hope you like the guide How to create Fan-Out and Bounce Effect with Bezier Curve. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to create Fan-Out and Bounce Effect with Bezier Curve, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to create Fan-Out and Bounce Effect with Bezier Curve”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to create Fan-Out and Bounce Effect with Bezier Curve, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel. Compsmag has Proudly Shared Free Information Since 2014.
