{"id":4836,"date":"2024-04-14T11:06:02","date_gmt":"2024-04-14T03:06:02","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4836"},"modified":"2024-04-14T11:06:02","modified_gmt":"2024-04-14T03:06:02","slug":"animate-a-personalized-banner","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/animate-a-personalized-banner\/","title":{"rendered":"Animate a personalized banner"},"content":{"rendered":"\n
\n

A banner functions as a call-to-action and is a method to attract visitors\u2019 attention to crucial announcements on your site. You can position banners anywhere and design them according to your preferences, but this tutorial guides you through the layout and animation of a typical announcement banner \u2014 one that emerges from beneath the navbar when the page loads. We’ll also demonstrate how to animate the banner to alter its color after the sliding animation.<\/p>\n

Throughout this tutorial, you’ll understand:<\/p>\n

    \n
  1. How to design a banner<\/li>\n
  2. How to incorporate and design the banner text<\/li>\n
  3. How to conceal the banner before animation<\/li>\n
  4. How to integrate interactions to animate the banner<\/li>\n
  5. How to implement interactions to modify the banner colors<\/li>\n<\/ol>\n

    How to design a banner<\/h2>\n
    \n
    \n \"The\n <\/div>\n<\/figure>\n

    To lay out the structure of the banner:<\/p>\n

      \n
    1. Drag a Div block<\/strong> from the Add panel<\/strong> onto the Webflow canvas<\/li>\n
    2. Add a class to the Div block<\/strong> (e.g., “Banner wrapper”)<\/li>\n
    3. Include another Div block<\/strong> within the banner wrapper<\/li>\n
    4. Assign a class to the second Div block<\/strong> (e.g., “Banner”)<\/li>\n
    5. Access Style panel<\/strong> > Backgrounds<\/strong> and click the swatch to set the banner\u2019s background color<\/li>\n<\/ol>\n

      How to incorporate and design the banner text<\/h2>\n

      To insert text into the banner:<\/p>\n

        \n
      1. Insert a third Div block<\/strong> inside the banner<\/li>\n
      2. Apply a class to the third Div block<\/strong> (e.g., “Text wrapper”)<\/li>\n
      3. Open Style panel<\/strong> > Size<\/strong> and designate a Max W<\/strong> (e.g., 980 pixels)<\/li>\n
      4. Access Style panel<\/strong> > Spacing<\/strong> and adjust the margin on both sides to auto<\/strong><\/li>\n<\/ol>\n

        Find out more about auto margin in our Spacing tutorial.<\/p>\n

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

        To insert and design the banner text:<\/p>\n

          \n
        1. Drag a Paragraph<\/strong> from the Add panel<\/strong> into the text wrapper<\/li>\n
        2. Open Style panel<\/strong> > Typography<\/strong><\/li>\n
        3. Tap the color swatch in color<\/strong> to modify the text color<\/li>\n
        4. Tap center<\/strong> in align<\/strong> to align the text<\/li>\n
        5. Access Style panel<\/strong> > Spacing<\/strong> and alter the bottom margin<\/strong> to 0<\/li>\n
        6. Include padding<\/strong> on all 4 sides (e.g., 15 pixels)<\/li>\n<\/ol>\n
          Good to know:<\/strong> To simultaneously increase or decrease the margin or padding on all 4 sides of an element, use Shift<\/strong> + mouse drag<\/strong> (on Mac) or Shift<\/strong> + mouse drag<\/strong> (on Windows).<\/strong><\/h6>\n
          \n
          \n \"In\n <\/div>\n<\/figure>\n
          Note:<\/strong> You can insert any element (e.g., Text link, Image, Button, etc.) in the banner.<\/strong><\/h6>\n
          \n
          \n \"The\n <\/div>\n<\/figure>\n

          How to conceal the banner before animation<\/h2>\n

          To make sure the banner remains hidden before the animation commences:<\/p>\n

            \n
          1. Select the banner wrapper<\/li>\n
          2. Access Style panel<\/strong> > Size<\/strong><\/li>\n
          3. Adjust Overflow<\/strong> to hidden<\/strong><\/li>\n<\/ol>\n

            Learn more about Overflow: hidden.<\/p>\n

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

            How to integrate interactions to animate the banner<\/h2>\n

            To establish the initial state where the banner is not visible:<\/p>\n

              \n
            1. Select the banner and open the Interactions panel<\/strong><\/li>\n
            2. Tap the \u201cplus<\/strong>\u201d icon on the right of Page trigger<\/strong> and choose Page load<\/strong><\/li>\n
            3. Tap the Action<\/strong> dropdown menu in When page starts loading<\/strong> and opt for Start an animation<\/strong><\/li>\n
            4. Tap the \u201cplus<\/strong>\u201d icon on the right of Timed animations<\/strong> and name it (e.g., \u201cBanner slide in\u201d)<\/li>\n
            5. Tap the \u201cplus<\/strong>\u201d icon on the right of Actions<\/strong> and select Transform<\/strong> > Move<\/strong><\/li>\n
            6. Set the Y axis to -100% in Move<\/strong><\/li>\n
            7. Tick the Set as initial state<\/strong> checkbox in Timing<\/strong><\/li>\n<\/ol>\n<\/div>\n
              \n
              \"When<\/div>\n<\/figure>\n
              \n
              \"While<\/div>\n<\/figure>\n
              \n
              \"In<\/div>\n<\/figure>\n

              You have the option to craft the fully loaded state of the banner in the Interactions panel animation as follows:<\/p>\n

                \n
              1. Choose the \u201cplus<\/strong>\u201d icon at the right side of Actions<\/strong> and opt for Change <\/strong>> Adjust<\/strong><\/li>\n
              2. Position the Y axis to 0% in Change<\/strong><\/li>\n<\/ol>\n

                Deepen your understanding of Interactions through our Triggers and animations tutorial.<\/p>\n

                To have more influence over your animation, it\u2019s possible to modify its speed or postpone it after the page has finished loading.<\/p>\n

                To vary its pace:<\/p>\n

                  \n
                1. Uncover Timing<\/strong> > Transition<\/strong><\/li>\n
                2. Select personalized<\/strong> to tweak the transition curve<\/li>\n<\/ol>\n

                  To hold off the animation post page load:<\/p>\n

                    \n
                  1. Access Timing<\/strong> > Beginning<\/strong><\/li>\n
                  2. Create a deferment<\/strong> (e.g., 0.2 seconds)<\/li>\n<\/ol>\n

                    Learn more about transition in our Transformation, ease, and smoothing workshop.<\/p>\n

                    Methods for introducing interactions to change the banner shades<\/h2>\n

                    In the Interactions panel animation, you can adjust the banner’s background color post its entry:<\/p>\n

                      \n
                    1. Single out the banner<\/li>\n
                    2. Tap the \u201cplus<\/strong>\u201d icon at the right of Actions<\/strong> and select Design<\/strong> > Background color<\/strong><\/li>\n
                    3. Select the palette and opt for a color in Interactions<\/strong> > Background<\/strong><\/li>\n
                    4. Define a wait<\/strong> (e.g., 2 seconds) in Timing<\/strong> > Beginning<\/strong><\/li>\n<\/ol>\n
                      \n
                      \"In<\/div>\n<\/figure>\n

                      In the Interactions panel animation, you also have the capability to change the text color concurrently with the background color alteration:<\/p>\n

                        \n
                      1. Pick the Paragraph<\/strong><\/li>\n
                      2. Press the \u201cplus<\/strong>\u201d symbol located next to the BG color adjustment and pick Design<\/strong> > Text color<\/strong><\/li>\n
                      3. Select the palette and choose a new text hue in the Interactions<\/strong> > Typography<\/strong><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Div blocks, Text elements, and Interactions to create a custom call-to-action banner that animates on page load.","protected":false},"author":2,"featured_media":4837,"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-4836","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\/4836","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=4836"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4837"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}