WordPress / Elementor to achieve page transition effect like React's Framer's Motion

user_15464530 0
Viewed 606

Recently found a topic that really attracts me, which is the React Route and Framer Motion.

I mainly build website with WordPress and Elementor, I'm curious if there are any way to achieve similar effect as React's Framer motion? For example click on one object and has a smooth transition animation to another page.

For example: https://akashisakebrewery.com/

I noticed this website is build with WordPress, but I believe a lot of custom coding, just wondering what's the best way to approach?

I was thinking to use simple CSS animation and pair up with jQuery onclick combine with the page load CSS animation, but don't think that's the proper way to do it, at the same time for dynamic listing, it's also not possible to achieve something like Framer Motion with my attempt.

Any idea and experience to share will be greatly appreciated!

framer-motion reactjs wordpress css jquery
2 Answers

I wouldn't phrase the question in "what is the best way," because there are a lot of good ones depending on what trade-offs you are making.

I am just some guy on the internet, but

  1. If you are just want to do something like that website you don't need framer-motion or anything SPA-related, because their transition isn't across routes. It's all on their / route and something like what you mentioned would work.
  2. If you do want to transition across routes dynamically, I think you need to use a SPA (single page application).

The main difference between a SPA and a traditional WordPress(or related) setup is that a SPA doesn't redownload a new bundle for every route and in your case gives you the flexibility to control what route change looks like. I would research SPA vs MPA on your own for more details!

If you decide on # 2 though there is a lot of cost with that leap so you will have to decide if the transitions are worth it to you.

Here is a link to a framer motion page transition I made for another question if you want to see another example of what the code can look like:https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg

user_82397110

Not recommended way - In a pretty questionable way, you can integrate a React app with the desired animations into your Wordpress site: (I tested this out with Framer Motion)

  1. Create a React app separately from the Wordpress
  2. Copy-paste the bundle.js content to a new javascript file in the Wordpress
  3. Load that file with the wp_enqueue_script
  4. Add a <div id="root"></div> to the Wordpress page where you would like to have these animations

This is probably not the most elegant and convenient method. Performance may suffer, content is hardcoded, the whole workflow of copy-pasting is kind of a hack.


Recommended way: - I've investigated this further, and I created a simple Gutenberg block animated by the Framer Motion. Feel free to take a look at the code.: https://github.com/tahireu/framer-motion-block

Demo: https://tahireu.com/animated/

user_50380630
Related