46:11 Adding hocus pocus to a website - Lee Matthew Jackson
46:11 Adding hocus pocus to a website - Lee Matthew Jackson

46:11 Adding hocus pocus to a website

No-code animations and effects in WordPress.

Lee Matthew Jackson
Lee Matthew Jackson
🎃
No-code animations and effects in WordPress.

In this series, Lee looks at a range of WordPress tools that can add value to both the development process and client interactions. For each episode, Lee will define a problem, discuss his agency’s solution, and share a use case.

Lee Matthew Jackson - Trailblazer FM ™

Host

Lee Matthew Jackson

Trailblazer FM ™

The problem

Add animations and effects to a WordPress website without spending hours coding, or introducing bloat and performance issues.

The solution

Motion allows us to animate assets on WordPress websites simply by pointing, clicking, and setting our parameters. Our favourite feature is the timeline which reminds us of the good old Macromedia Flash days!

Use cases

  • Lower-budget WordPress sites that need some form of animation or emphasis without the budget for hand-coded solutions.

Resources

Transcript

WordPress tools to try before you die. Sorry about that. Time for the next tool.

Welcome to another episode of WordPress Tools to try before you die. My name is Lee Matthew Jackson, your ghostly host. This is our series during Halloween, where we look at a problem. We share with you a WordPress solution, and we also share with you some use cases. At the very end, you have the opportunity to get involved in the conversation and share with us your solutions and your use cases.

So be sure to stay tuned to the end and join in that conversation. Today’s problem is animation. Let me share with you a phrase that you may have heard. Can you make this website pop if you burst into tears? I’m really sorry.

That should have come with the trigger warning. Alternatively, can you make the website look more premium? Maybe things can fade in. Can things animate? Can you make that do this?

Can you make this look 3D? Could all of these assets over here fade in? But then when you move your mouse, they go in this direction? All of those different requests fill most of us with utter dread when it comes to a website development project. And we push back and say, well, first of all, all of that animation will probably be too much.

You don’t want to do all of that because that will create a poorer user experience. So at some point you then come to this kind of middle ground where you agree that only certain assets will be animated. And within reason, you finally get to a space where you can all agree what will and what won’t animate. So the next problem you then have is probably the limitations of your page builder or perhaps the limitations of your skills in development. How do you get everything to animate you can start hitting with a whole lot of JavaScript and CSS, etc.

But that’s just going to take an awful long time to get it all done, get it all tested and make sure it all works cross browser. This is a scenario that we’ve had multiple times. So step in the WordPress solution that we use and that is Motion Page. This is a premium plugin, but it gives you the ability to essentially animate everything that your heart could possibly desire on a WordPress website, no matter what page builder you are using, Gutenberg included. And you can do it all at the point of a mouse, the click of a button and pretty much that’s it.

It’s just pointing and clicking. And it gives you the timeline that you would expect if you were, say, doing Flash animation back in the days. So you can create animated intro sequences, you can create on-page animations, you can create on hover animations, you can set up triggers and make animations and effects happen again at the click of a button. The interface may look a little overwhelming at first, however, if you are used to using any sort of animation tool with a timeline, even a video editor, it’s not going to take you long to get your head around this. You simply use the selector tool to select the object, then you essentially get cracking with what you want that object to do.

So massive disclaimer. I don’t necessarily recommend you use a tool for animation. If you have the skills in-house to be able to animate everything with CSS and JavaScript and you can just do an incredible job that is definitely going to be far more effective and fast and efficient of course. But this is a solution where there isn’t that much budget but you do need to be able to add some form of interactivity that’s going to keep the client happy and is going to meet the spec of a particular project. So this is certainly the sort of tool you’d be using if you’re looking to keep those budgets in check and keep your client happy.

Now on to use cases and we’ve used Motion page specifically in event websites when we’re showcasing information and we want to highlight specific sales points of that event. However, as expressed another use case maybe for a more budget website where you want to give it a premium field, but you’re not needing to invest all of that extra time in custom development on things like animations and effects. So now it’s your turn. First of all, feel free in the comments to come and berate me for using such a tool. There are definitely going to be some developers listening to this episode who are shocked and appalled that I should suggest such a thing.

Please feel free. I’m absolutely open to other alternatives. Just check out the link in the show notes for how to join in this conversation. Also, if you use Motionpage, link us to some examples or if you have an alternative to Motionpage, again link us to some examples. You can do all of that in the comments but did you know that you can come and have a conversation with me and there are wider community in person at Agency Transformation Live this year on November 10th, we are gathering together in a physical in-person event here in the UK on November the 10th and the 11th.

Day one is a fully fledged conference with amazing speakers. Day two is a mastermind where with the combined brain power of the room, we help you unpack your next small achievable actions to your agency’s success. So be sure to check that out over on agencytransformation.live. If we don’t see you in the comments, if we don’t see you at the event, let’s see you in the next episode.

Comments

PodcastSeason 46

Lee Matthew Jackson

Content creator, speaker & event organiser. #MyLifesAMusical #EventProfs