{"id":6526,"date":"2024-04-14T15:34:25","date_gmt":"2024-04-14T07:34:25","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6526"},"modified":"2024-04-14T15:34:25","modified_gmt":"2024-04-14T07:34:25","slug":"estimation-alleviation-and-polishing","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/estimation-alleviation-and-polishing\/","title":{"rendered":"Estimation, alleviation, and polishing"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<h2>Estimation<\/h2>\n<p>When endeavoring to animate the shift from Point A to Point B, direct transitions are insufficient. Visually, we seek to include extra frames in between to ensure the movement is refined.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241802957\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241802957\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>The process of generating these intermediary frames is known as <em>estimation<\/em>. On the animation timeline displayed here, we merely establish the initial and final points. The in-between frames are then estimated for us\u2014automatically.<\/p>\n<h2>Alleviation<\/h2>\n<p>As demonstrated in the illustration below, linear motion follows a direct route from Point A to Point B.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-height=\"33.75%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241802972\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241802972\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>However, in practical scenarios, when accelerating by pressing the gas pedal, the vehicle does not immediately reach 50 kph. It needs to accelerate gradually to reach that speed. Also, when coming to a halt, it does not abruptly stop; rather, it decelerates. This results in a <em>much<\/em> smoother experience for the passengers.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94bc0917b8bf70a7550f1_5e6131632ea57b1c754de9c6_5a02643a15bacf00019d32d1_screen252520shot2525202017-11-07252520at2525205-55-44252520pm.png\" title=\"64b94bc0917b8bf70a7550f1_5e6131632ea57b1c754de9c6_5a02643a15bacf00019d32d1_screen252520shot2525202017-11-07252520at2525205-55-44252520pm\"><\/div><figcaption>By integrating easing into this animation, we manipulate distance and time, transforming what would be a linear graph into an s-curve, as depicted above<\/figcaption><\/figure>\n<p>Here is the same animation with easing applied:<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-height=\"33.75%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241804686\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241804686\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>To incorporate easing to an action, simply pick the easing style from the dropdown menu after selecting the action.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94bc0917b8bf70a7550ed_5e613163e37ec3e543de21bf_5a0265431cf18900019599a1_easing-option.png\" title=\"64b94bc0917b8bf70a7550ed_5e613163e37ec3e543de21bf_5a0265431cf18900019599a1_easing-option\"><\/div><figcaption>A variety of easing options are accessible within the Interactions panel in animation mode<\/figcaption><\/figure>\n<h2>Polishing<\/h2>\n<p>Lastly, let\u2019s delve into polishing (sometimes termed <em>damping<\/em>). This is particularly beneficial for animations triggered by scrolling or changes in mouse position.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-height=\"33.75%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241802918\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241802918\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>In the scenario presented above, we aim to produce a parallax depth effect while scrolling. Unfortunately, abrupt changes in scroll position or rapid scrolling via a scroll wheel can make the animation less perceptible. This is because the position (and the animation) changes precisely with the movement.<\/p>\n<p>Enter: polishing. Within any continuous trigger, we can refine the animation as it nears the actual scroll position (as it catches up). The image below demonstrates how it operates as a hysteresis (or <em>lag<\/em>) by considering our earlier scroll positions.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-height=\"33.75%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241803177\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241803177\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>A higher polishing parameter enhances the damping effect. Lower values for polishing (even 0% polishing) signify that all animations and responses are in real-time. Here, the polishing is set to 100%:<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-height=\"33.75%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/241803064\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/241803064\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h6>Polishing does not override any inner easing configurations made within an animation. It simply refines and smoothens the velocity approaching the correct position on the animation timeline.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn about interpolation (creating motion between points), easing (for non-linear animation), and smoothing (creating a damping effect).","protected":false},"author":2,"featured_media":6527,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6526","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6526"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6527"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}