How to Add Animated Elements

This article shows you how to add animated elements like fade-ins, sliding effects, and hover animations to your Web60 website.

Method 1: Using Animation Blocks (Easiest)

WordPress includes built-in animation options that work without any coding.

1. Log in to your WordPress admin dashboard
2. Go to Pages or Posts and select the page you want to edit
3. Click on any block (text, image, or heading)
4. In the right sidebar, look for the "Advanced" section
5. Click "Advanced" to expand the options
6. Find the "CSS classes" field
7. Add one of these animation classes:
   • fadeInUp - Element slides up and fades in
   • fadeIn - Element fades in gradually
   • slideInLeft - Element slides in from the left
   • bounce - Element bounces when it appears
8. Click "Update" to save your changes

Method 2: Adding Hover Effects with Custom CSS

You can make elements animate when visitors hover over them.

1. Go to Appearance > Customize in your WordPress dashboard
2. Click "Additional CSS"
3. Add this code to make buttons grow when hovered:

.wp-block-button:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

4. For images that fade on hover, add:

.wp-block-image:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

5. Click "Publish" to save your changes

For more detailed CSS customisation, see our guide on how to add custom CSS styling.

Method 3: Using Animation Plugins

Plugins provide more animation options without coding.

1. Go to Plugins > Add New in your WordPress dashboard
2. Search for "Animate On Scroll" or "AOS"
3. Install and activate the plugin
4. Go to Settings > AOS Options
5. Enable animations site-wide
6. Edit any page or post
7. Select a block and look for animation options in the sidebar
8. Choose your preferred animation style
9. Set the delay and duration if available
10. Update the page

Adding Animations to Images and Media

You can animate images as they load on the page:

1. Add an image block to your page
2. Select the image block
3. In the Advanced section, add the CSS class fadeIn
4. The image will now fade in when visitors scroll to it

Testing Your Animations

After adding animations:

1. Click "Preview" or "View Page" to see your live site
2. Scroll up and down to trigger the animations
3. Check that animations work on mobile by viewing on your phone
4. If animations don't appear, clear your browser cache and refresh

Animations should be subtle and not interfere with reading your content. Too many animations can slow down your site and distract visitors.

If you're still stuck with adding animations, contact Web60 support for help with your specific animation needs.

FAQ

Q: Why aren't my animations working?

A: Check that you've spelled the CSS class names correctly and that you've saved your changes. Clear your browser cache and refresh the page to see updates.

Q: Can I add animations to my navigation menu?

A: Yes, you can add hover effects to menu items using custom CSS in Appearance > Customize > Additional CSS. Add transition effects to menu links for smooth color or size changes.

Q: Will animations slow down my website?

A: Simple CSS animations have minimal impact on speed. Avoid too many animated elements on one page and test your site speed after adding animations.

Q: Can I make text animate as visitors type?

A: Typewriter effects require JavaScript plugins. Search for "typewriter effect" plugins in your WordPress plugin directory for this specific animation.

Q: Do animations work on mobile phones?

A: Yes, CSS animations work on mobile devices. However, some mobile browsers may reduce animations to save battery life.

Q: How do I remove animations I don't want?

A: Delete the CSS class from the block's Advanced settings, or remove the custom CSS code you added. Update the page to remove the animation.

Q: Can I control when animations start?

A: Yes, most animation plugins let you set delays and trigger points. You can make animations start when elements become visible on screen rather than when the page loads.