Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • Animation presets
  • Manual settings for animations
  • Sticky effect

Was this helpful?

  1. Setka Editor

Animations

How to add animations to text, images and paragraphs in Setka Editor.

PreviousIconsNextLists

Last updated 2 years ago

Was this helpful?

‌You can animate text paragraphs, pictures, any kinds of infographics; you can apply the tool to a paragraph, an image, or a grid.

Please see this video tutorial about working with animations in Setka Editor:

To apply an animation effect to the chosen element (grid, picture, text paragraph), click on it and find the Animation tool button in the needed tab.

Please note: Animation tool is not available on the free plan.

Animation presets

If you are new to animations or want to get an animated element with no time and effort, we offer you a feature called animation presets.

You can choose one of the effects, e.g., your element can fade, slide, flip, or zoom. There is also a menu for how and when your animation can appear on the screen.

There are special effects available for your animation to make it more sophisticated and non-linear. This is where you can find them:

To preview your animation, click either on a Play button or on a Setka Editor logo in the animation panel.

We also offer several ways for your animation to start.‌

  • As appears on the screen (the animation will start once 10% of the animated part is visible on the screen).

  • Once the animated element was hovered.

  • When scrolling. Here you can also choose in what part of the screen your animation will appear.

Manual settings for animations

You can set the direction (from left to right, right to left, or up and down), zoom (in and out), and rotation of your animation's entrance into the post.

Additionally, you can control the opacity level, duration, and start time of the animation.

Sticky effect

With the help of a sticky effect, you can pin any part of your post on a page, and it will remain static while scrolling. The chosen element is pinned once the post area comes up to a needed position.

You can find it in the animation menu and apply it to the chosen element. In the Sticky tab, you can set the place for your pinned element (the top or the bottom of the screen), and you can set the needed indentation in the same menu.

Sometimes content creators need to pin some elements in the post. Navigation in your post becomes more comfortable with the pinned heading. CTA elements (may offer to buy or download something or sign up for a newsletter) work better if pinned somewhere on the page.

Video tutorial on how to with animations in Setka Editor
Screenshot of Setka Editor interface: Animations icon in Upper Toolbar
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar with "Presets" tab highlighted
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar showing "Presents" tab with different settings (animation effect, options)
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar showing "Presents" tab with the "Play" button highlighted
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar showing "Presents" tab with the "Animation starts" options dropdown highlighted
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar showing "Manual" tab
Screenshot of Setka Editor interface: Animation settings panel in Upper Toolbar showing "Sticky" tab