{"id":6867,"date":"2024-04-14T16:13:09","date_gmt":"2024-04-14T08:13:09","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6867"},"modified":"2024-04-14T16:13:09","modified_gmt":"2024-04-14T08:13:09","slug":"swift-effects-summary","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/swift-effects-summary\/","title":{"rendered":"Swift effects summary"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>By utilizing swift effects, you have the ability to apply over 20 pre-designed entrance, exit, and accentuation animations to elements through clicking, hovering, and scrolling.<\/p>\n<p><\/p>\n<p>Within this tutorial:<\/p>\n<ul>\n<li>Transition animation<\/li>\n<li>Expand animation<\/li>\n<li>Elastic band animation<\/li>\n<\/ul>\n<h2>Transition animation<\/h2>\n<ul>\n<li>After selecting one of your items, access the Interactions panel<\/li>\n<li>Press the addition symbol beside Element Trigger<\/li>\n<li>Select Scroll Into View from the drop-down list<\/li>\n<li>From the Action menu below When Scrolled Into View, pick Transition<\/li>\n<li>Choose the transition direction from the drop-down list (e.g., From Left)<\/li>\n<li>In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: Checklist item)<\/li>\n<\/ul>\n<h2>Expand animation<\/h2>\n<ul>\n<li>After selecting one of your items, access the Interactions panel<\/li>\n<li>Press the addition symbol beside Element Trigger<\/li>\n<li>Select Scroll Into View from the drop-down list<\/li>\n<li>From the Action menu below When Scrolled Into View, select Expand<\/li>\n<li>In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: feature cell)<\/li>\n<\/ul>\n<h2>Elastic band animation<\/h2>\n<ul>\n<li>After selecting one of your items, access the Interactions panel<\/li>\n<li>Press the addition symbol beside Element Trigger<\/li>\n<li>Select Mouse Hover from the drop-down list<\/li>\n<li>From the Action menu below On Hover, select Elastic Band<\/li>\n<li>In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: Button and Dark Outline)<\/li>\n<\/ul>\n<p>\u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use quick effects to add prebuilt entrance, exit, and emphasis animations to introduce basic motion and interactions to your project.","protected":false},"author":2,"featured_media":6868,"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-6867","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\/6867","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=6867"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6867\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6868"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}