{"id":5699,"date":"2024-04-14T20:56:16","date_gmt":"2024-04-14T12:56:16","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5699"},"modified":"2024-04-14T20:56:16","modified_gmt":"2024-04-14T12:56:16","slug":"summary-of-after-effects-and-lottie-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/summary-of-after-effects-and-lottie-in-webflow\/","title":{"rendered":"Summary of After Effects and Lottie in Webflow"},"content":{"rendered":"\n
\n

Within this tutorial:<\/p>\n

    \n
  1. Establish the layout in After Effects<\/li>\n
  2. Create an orbital animation<\/li>\n
  3. Export the project<\/li>\n
  4. Integrate the animation into Webflow<\/li>\n
  5. Configure an interaction trigger<\/li>\n<\/ol>\n

    Establish the layout in After Effects<\/h2>\n
    \n
    \"Highlighted<\/div>\n<\/figure>\n

    When setting up a layout in After Effects, keep in mind that this is the initial stage, but modifications can always be made later. You have the flexibility to adjust dimensions, timing, or frame rate. For instance, let’s form a 1000px wide by 1000px tall layout at 60 frames per second for this demonstration.<\/p>\n

    <\/p>\n

    Establish a layout in After Effects<\/strong>:<\/p>\n

      \n
    1. Launch After Effects<\/li>\n
    2. Choose New Composition<\/strong><\/li>\n
    3. Input 1000px for the Width<\/strong><\/li>\n
    4. Input 1000px for the Height<\/strong><\/li>\n
    5. Input 60 for the Frame rate<\/strong><\/li>\n
    6. Input 5 seconds for the Duration<\/strong><\/li>\n
    7. Set the Background color<\/strong> to white<\/li>\n<\/ol>\n

      <\/p>\n

      \n
      \"Composition<\/div>\n<\/figure>\n

      <\/p>\n

      Note<\/strong>: make certain that Prevent Aspect Ratio to 1:1 (1.00)<\/strong> is not selected to design a bespoke dimension
      <\/h6>\n\n

      Develop an orbital animation<\/h2>\n

      The following step delves into intriguing territory. Let’s commence by incorporating a fresh shape layer into your layout.\u00a0<\/p>\n

      Integrate a shape layer<\/strong>:<\/p>\n

        \n
      1. Right-click within the layers panel<\/strong><\/li>\n
      2. Hover over New<\/strong><\/li>\n
      3. Choose Shape layer<\/strong>\u00a0<\/li>\n<\/ol>\n

        <\/p>\nAdd<\/strong> > Ellipse<\/strong>. Subsequently, an ellipse is at your disposal.<\/p>\n

        \n
        \"Shape<\/div>\n<\/figure>\n

        <\/p>\n

        Incorporate a stroke and amplify the magnitude for visibility of the ellipse:
        <\/strong><\/p>\n

          \n
        1. Click Add<\/strong> on the shape layer<\/li>\n
        2. Select Stroke<\/strong><\/li>\n
        3. Alter stroke color to grey or a shade distinct from your background color<\/li>\n
        4. Adjust the stroke width to 1px<\/li>\n
        5. Click the dropdown arrow of the Ellipse path<\/strong><\/li>\n
        6. Input 900 for the Size<\/strong>\n<\/li>\n<\/ol>\n\n
          \n
          \"After<\/div>\n<\/figure>\n

          <\/p>\n

          To proceed, simply press Command + A<\/strong> (on macOS) or Control + A<\/strong> (on Windows) to highlight all content. Subsequently, you can click the dropdown arrow adjacent to a layer for collapsing all entities. This procedure facilitates the arrangement of our paths in this illustration.<\/p>\n

          For the star element, instead of initiating from scratch, consider employing one of the duplicated orbital paths you’ve configured (e.g., Orbital path 7) as a blueprint.<\/p>\n

          Formulate a star:<\/strong><\/p>\n

            \n
          1. Highlight the recently duplicated layer (e.g., Orbital path 7)<\/li>\n
          2. Tap Command + C<\/strong> (on macOS) or Control + C<\/strong> (on Windows)<\/li>\n
          3. Proceed with Command + V<\/strong> (on macOS) or Control + V<\/strong> (on Windows)<\/li>\n
          4. Expand the dropdown of the copied layer<\/li>\n
          5. Expand the dropdown of the Ellipse Path within the copied ellipse layer<\/li>\n
          6. Reduce the Size<\/strong> to 40<\/li>\n
          7. Click on the label (e.g., Orbital path 8) and hit the return key<\/li>\n
          8. Then, specify a name (e.g., Star)<\/li>\n<\/ol>\n

            <\/p>\n

            You should maintain the same stroke color while altering the fill slightly.<\/p>\n

            Opt for a white color with 100% opacity.<\/p>\n

            \n
            \"The<\/div>\n<\/figure>\n

            <\/p>\n

            Your planet designs should follow a similar pattern, albeit with slight differences.<\/p>\n

            Formulate a planet:<\/strong><\/p>\n

              \n
            1. Replicate and insert the Star laye<\/strong>r\u00a0<\/li>\n
            2. Dub the duplicated layer (e.g., Planet)\u00a0<\/li>\n
            3. In Contents > Ellipse path<\/strong> of the duplicated layer: adjust the Size (e.g. from 40 to 15)\u00a0<\/li>\n
            4. In Contents > Ellipse path<\/strong> of the copied layer: manipulate the first Position input (x-axis) until the Planet<\/em> aligns with the first orbital path’s stroke\n<\/li>\n<\/ol>\n

              Generate an additional 6 planets by utilizing the first one as a guideline.<\/p>\n

              Generating more planets:<\/strong><\/p>\n

                \n
              1. Replicate the most recently duplicated planet.\u00a0<\/li>\n
              2. In the Contents<\/strong> of the duplicated layer: adjust the first Position input (x-axis) until the Planet<\/em> aligns with the subsequent orbital path<\/li>\n<\/ol>\n

                Reminder<\/strong>: Opt to vary the Size differences of your duplicated ellipses for a more natural appearance, rather than scaling each one down by 100.<\/p>\n

                \n
                \"A<\/div>\n<\/figure>\n

                With proper placement, proceed to adjust the planetary rotation.<\/p>\n

                Adjust planetary rotation:<\/strong><\/p>\n

                  \n
                1. Click the arrow of a planet<\/em> layer to access settings<\/li>\n
                2. In the Transform dropdown, click the stopwatch icon by Rotation<\/strong> to establish the first keyframe (ensuring alignment at frame 0)<\/li>\n<\/ol>\n
                  \n
                  \"The<\/div>\n<\/figure>\n
                    \n
                  1. Glide the timeline to the end<\/li>\n
                  2. Subsequently, engage the stopwatch beside Rotation<\/strong> for the final keyframe (ensuring alignment at the end of the timeline)<\/li>\n
                  3. Lastly, modify the Rotation value. The initial input designates the rotations count, whereas the second input sets the degrees within the rotation. (e.g. 1×70.0\u00b0 equals 1 full rotation and<\/em> 70 degrees)<\/li>\n<\/ol>\n

                    <\/p>\n

                    Note<\/strong>: Customize the initial and final Rotation values to align with your animation scheme.
                    <\/h6>\n

                    To synchronize rotation animations for the other 6 planets, replicate the above steps. Upon adding keyframes and rotations for all planets, use the space bar from the first frame to preview the animation sequence.<\/p>\n

                    Export<\/h2>\n

                    Your animation is fashioned; now, you’re set to export it.<\/p>\n

                    To export, leverage the Bodymovin plugin (refer to how to install the Bodymovin extension) to convert your After Effects composite into a consolidated JSON file. If the Bodymovin extension is pre-installed, locate it in your After Effects menu under Window<\/strong>, navigate through Extensions<\/strong>, and choose Bodymovin<\/strong>.<\/p>\n

                    \n
                    <\/div>\n<\/figure>\n

                    <\/p>\n

                    To commence the export process, ensure your composition is selected, designate an export folder, and tap render<\/strong>.<\/p>\n

                    Incorporate the animation into Webflow<\/h2>\n

                    Now it’s time to import your exported file.<\/p>\n

                    Integrate your After Effects animation into Webflow:<\/strong><\/p>\n

                      \n
                    1. Accessyour Webflow undertaking in the Designer<\/strong><\/li>\n
                    2. Press the Assets<\/strong> symbol, or tap J on your console, to reveal the Assets<\/strong>panel<\/strong><\/li>\n
                    3. Tap the Upload button<\/strong> and choose your After Effects animation, or drop your After Effects JSON file into the Assets<\/strong>panel<\/strong><\/li>\n
                    4. Drop your animation into the canvas of your project\n<\/li>\n<\/ol>\n

                      If you preview your project by tapping on the Toggle Preview symbol (the eye symbol), you’ll observe that the animation begins playing by itself. Following that, you can establish an on-click trigger to commence the animation upon being clicked.<\/p>\n

                      Configure an interaction trigger<\/h2>\n

                      This constitutes the main part. We will configure an on-click trigger. Expand your understanding of triggers and animations.<\/p>\n

                      To configure the trigger:<\/strong><\/p>\n\n

                      \n
                      <\/div>\n<\/figure>\nInteractions<\/strong> symbol, or press H on your console, to reveal the Interactions<\/strong> panel<\/p>\n
                      \n
                      <\/div>\n<\/figure>\nMouse click (tap)<\/strong> choice<\/p>\n
                      \n
                      <\/div>\n<\/figure>\nOn 1st click<\/strong> dropdown: go for the Lottie playback<\/strong> alternative<\/p>\n
                      \n
                      \"The<\/div>\n<\/figure>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, and animate them in your Webflow site.","protected":false},"author":2,"featured_media":5700,"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":[301],"tags":[],"class_list":{"0":"post-5699","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5699","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=5699"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5699\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5700"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}