Title: Animate In View
Author: Kevin Batdorf
Published: <strong>26. April 2022</strong>
Last modified: 23. März 2026

---

Plugins durchsuchen

![](https://ps.w.org/animate-in-view/assets/icon-128x128.png?rev=2715018)

# Animate In View

 Von [Kevin Batdorf](https://profiles.wordpress.org/kbat82/)

[Herunterladen](https://downloads.wordpress.org/plugin/animate-in-view.1.2.2.zip)

 * [Details](https://de.wordpress.org/plugins/animate-in-view/#description)
 * [Rezensionen](https://de.wordpress.org/plugins/animate-in-view/#reviews)
 *  [Installation](https://de.wordpress.org/plugins/animate-in-view/#installation)
 * [Entwicklung](https://de.wordpress.org/plugins/animate-in-view/#developers)

 [Support](https://wordpress.org/support/plugin/animate-in-view/)

## Beschreibung

Using a fast, simple, native technique, the Animate In View block will watch over
inner blocks you add within it and when they come into the user’s view, it will 
simply fade and optionally slide in.

Trigger simple, smooth, modern animations as the content enters the screen.

 * Follow [@kevinbatdorf](https://twitter.com/kevinbatdorf) on Twitter
 * View on [GitHub](https://github.com/KevinBatdorf/animate-in-block)

#### Features

 * Both lightweight and fast, and only does one thing.
 * Set a threshold for when the block starts to animate.
 * Run only once, or each time it comes in/out of view.
 * Wrap any existing block with the Animate In block with the push of a button.
 * Transition in left, right, or neither (fade only).
 * Fade only mode: Set the starting position to „none“
 * Change the class name used to add your own custom animations.

#### General Tips & Tricks

 * You can wrap the currently selected block with an Animate In View block by pressing
   the icon toward the end of the toolbar.
 * You may need to place the block within a group block to ensure content styling
   is consistent. Some themes may require a group block be at the top level. Alternatively,
   the Animate In View block has alignment controls enabled just in case.
 * You may need to tweak things if your layouts have custom classes or styles applied.
   Try copy/pasting the classes, or try to nest the blocks in a way that doesn’t
   affect the theme styling.
 * Nest blocks to stagger animations. The animations won’t start until all are in
   view, then one by one. But make sure you don’t use an area too large for the 
   viewport.
 * The Animate In View block comes with a single nested group block by default, 
   but you may use others as well.
 * Use the list view to drag and drop blocks into the Animate In View block.
 * Open an issue if you need an assist. I’m happy to take a look.

## Screenshots

 * [[
 * Simple, clean, consistent animations.
 * [[
 * Minimum controls to get the best results

## Blöcke

Dieses Plugin bietet 1 Block.

 *   Animate In View Animates a block when it comes into view.

## Installation

 1. Activate the plugin through the ‚Plugins‘ screen in WordPress

## FAQ

### Can I wrap any block?

Some blocks that require a specific parent block aren’t supported. For example, 
buttons inside a button group, or images within an image gallery. For these you 
will need to remove them from their container and position them using the column
or group blocks first.

### Why a block and not just extend all blocks?

This keeps block functionality composable. This block is very lightweight and does
the minimum it needs to keep track of the blocks on screen and just animate them
in. I want to avoid adding bulk to the front end of the site, so this plugin will
remain feature minimum.

### What happens when I deactivate the plugin?

Because the block wraps other blocks, deactivating the plugin will confuse WordPress
and the editor will ask you to either re-install or attempt to recover the block
as html. If you must uninstall this plugin, I recommend you drag the inner blocks
out of the Animate In View block before deactivating. Open an issue on GitHub if
you want to discuss this further.

## Rezensionen

![](https://secure.gravatar.com/avatar/9951b8075158948825743d44f46c7108908b0e75a779b553705a51d770dcac91?
s=60&d=retro&r=g)

### 󠀁[Boy, this is good!](https://wordpress.org/support/topic/boy-this-is-good/)󠁿

 [SomniumLucidus](https://profiles.wordpress.org/somniumlucidus/) 13. August 2024
2 Antworten

I only wish there was a fade animation effect available, but this is an amazing 
little lightweight plugin anyway. And user-friendly too. =) Just one thing: if you
deactivate the plugin, you have to remake the blocks to which you had applied the
animation effect.

![](https://secure.gravatar.com/avatar/62fe212021d456e5fdb54e3ee53bdd71b42a195b3e9ca74c7c0494cb96425d30?
s=60&d=retro&r=g)

### 󠀁[A Nice Little Thing!](https://wordpress.org/support/topic/a-nice-little-thing/)󠁿

 [stevieboy23](https://profiles.wordpress.org/stevieboy23/) 5. Mai 2022 3 Antworten

The idea that it would be nice to implement (in certain client pages) a fading/sliding
component, was one of those things somewhere lower down on my general to-do list.
Yes, I could have searched out a plugin, or created my own classes and remember 
to add them in, but I never quite got around to it… Then I saw on WP Tavern a mention
of ‚Animate in View‘. It’s great! It does what it says on the tin and in a modern
WordPress block way. (Just a word of advice for anyone that uses it, remember to
drag your blocks out of the Animate in View wrapper, if you decide not to use it
on a certain section, as you can’t toggle it on and off, and removing the wrapper
from the Block Editor will also remove what’s inside). Animate in View is now joining
my personal collection of handy „utility“ blocks. Good Work!

 [ Alle 2 Rezensionen lesen ](https://wordpress.org/support/plugin/animate-in-view/reviews/)

## Mitwirkende und Entwickler

„Animate In View“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin
mitgewirkt:

Mitwirkende

 *   [ Kevin Batdorf ](https://profiles.wordpress.org/kbat82/)

„Animate In View“ wurde in 2 Sprachen übersetzt. Danke an [die Übersetzer](https://translate.wordpress.org/projects/wp-plugins/animate-in-view/contributors)
für ihre Mitwirkung.

[Übersetze „Animate In View“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/animate-in-view)

### Interessiert an der Entwicklung?

[Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/animate-in-view/),
sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/animate-in-view/)
an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/animate-in-view/)
per [RSS](https://plugins.trac.wordpress.org/log/animate-in-view/?limit=100&mode=stop_on_copy&format=rss).

## Änderungsprotokoll

#### 1.2.2

 * Chore: Update npm packages + test for WP 6.2

#### 1.2.1

 * Remove package-lock file to lower download size

#### 1.2.0

 * Add enable/disable button
 * Return function instead of component from filter

#### 1.1.0

 * Switch to only showing once by default

#### 1.0.4

 * Adds content overflow strategy

#### 1.0.3

 * Adds language translation plugin

#### 1.0.2

 * Initial release

## Meta

 *  Version **1.2.2**
 *  Zuletzt aktualisiert **vor 4 Wochen**
 *  Aktive Installationen **1.000+**
 *  WordPress-Version ** 5.9 oder höher **
 *  Getestet bis **7.0**
 *  PHP-Version ** 7.0 oder höher **
 *  Sprachen
 * [English (US)](https://wordpress.org/plugins/animate-in-view/), [Spanish (Chile)](https://cl.wordpress.org/plugins/animate-in-view/)
   und [Spanish (Spain)](https://es.wordpress.org/plugins/animate-in-view/).
 *  [Übersetze in deine Sprache](https://translate.wordpress.org/projects/wp-plugins/animate-in-view)
 * Schlagwörter
 * [animate](https://de.wordpress.org/plugins/tags/animate/)[block](https://de.wordpress.org/plugins/tags/block/)
   [fade](https://de.wordpress.org/plugins/tags/fade/)[screen](https://de.wordpress.org/plugins/tags/screen/)
   [slide-in](https://de.wordpress.org/plugins/tags/slide-in/)
 *  [Erweiterte Ansicht](https://de.wordpress.org/plugins/animate-in-view/advanced/)

## Bewertungen

 4.5 von 5 Sternen.

 *  [  1 5-Sterne-Rezension     ](https://wordpress.org/support/plugin/animate-in-view/reviews/?filter=5)
 *  [  1 4-Sterne-Rezension     ](https://wordpress.org/support/plugin/animate-in-view/reviews/?filter=4)
 *  [  0 3-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/animate-in-view/reviews/?filter=3)
 *  [  0 2-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/animate-in-view/reviews/?filter=2)
 *  [  0 1-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/animate-in-view/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/animate-in-view/reviews/#new-post)

[Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/animate-in-view/reviews/)

## Mitwirkende

 *   [ Kevin Batdorf ](https://profiles.wordpress.org/kbat82/)

## Support

Möchtest du etwas mitteilen? Brauchst du Unterstützung?

 [Support-Forum anzeigen](https://wordpress.org/support/plugin/animate-in-view/)