(This is also exactly what Webflow is doing) MotionPage Video Review It's not reinventing the wheel, instead it is making something that was once inaccessible to regular WordPress website creators easy and fun to use.
WORDPRESS MOTION FX CODE
When the animation is published, the plugin generates code similar to what is seen above. You can preview them in real time, and publish them on your website. As the creator, you utilize a timeline and collection of settings to generate animations visually. That's exactly what Motion.Page does - takes these libraries and wraps them in a helpful graphical user interface. Instead, you may be looking for an easy point and click message to achieve the same end goal. That's all well and good, but for many average users this is too complex to get a simple animation based on the scroll position of a webpage. T hat code is sourced from here, and is the example of an advanced scroll based animation. SnapTo: "labels", // snap to the closest label in the timelineĭuration: ) Scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar Start: "top top", // when the top of the trigger hits the top of the viewportĮnd: "+=500", // end after scrolling 500px beyond the start Pin: true, // pin the trigger element while active yes, we can add it to an entire timeline! Typically, this is implemented by specify an element that you want to animate, and writing JS like so: We use these in many of our projects, and you'll see them around the Internet, animating the movement of elements, adding parallax effects, adding scroll interactions, and more. These two JavaScript libraries are perhaps the most powerful animation engines online in 2022. Motion.page integrates GSAP and Scrolltrigger (both produced by GreenSock). Motion Page is gunning the be even better than Webflow! Under The Hood Of Motion.Page Let's take a closer look at what you can do with the tool, and how it works. Even with being a new plugin, it is on the level of the Webflow UI, and will only get better.
![wordpress motion fx wordpress motion fx](https://s.tmimgcdn.com/scr/800x500/65600/max-electric-electrician-wordpress-theme_65639-original.jpg)
Motion.Page allows you too add Webflow-like animations and interactions to a WordPress website. Everything you can do with Webflow Interactions - now you can do on WordPress with Motion Page.
![wordpress motion fx wordpress motion fx](https://motionarray-portfolio.imgix.net/preview-831901-i3Nv0qLBJ3-high_0016.jpg)
While we still prefer WordPress in terms of CMS, we've always wanted a solution that allows us to easily add animations and interactions without needing to use JavaScript. We've tested this platform out on more than one occasion and have been seriously impressed by this implementation. It offers a super easy to use graphical user interface that brings GSAP animations, Scroll Trigger, Parallax, and more all under one hood. When it comes to interactions and animations, Webflow is one of the best platforms out there. Webflow Has Had WordPress Beat For Some Time It's important to note before continuing with this plugin review to just not. Note: it's easy to go overboard with animations, especially when you have a tool that allows you to easily implement them such as Motion.Page. If you're interested in seeing some great implementations of animation, checkout the Awwwards website or GSAP Showcase. They serve no practical purpose, but add another layer of design to a webpage that many users love. Scroll based animations, or interactions, can add a level of class to a webpage commonly seen in high budget e-commerce websites. When implemented properly web animation can seriously improve user experience and help them understand where important elements on the page are located. In this article, we will be reviewing the new plugin and figuring out what exactly you can do with it. It's as if Adobe Premiere Pro's UI clashed with the power of GSAP web animations. Motion.Page is a new WordPress plug-in that gives you a complete graphical user interface to apply complex animations and interactions two elements of a WordPress website. Unfortunately it's still relatively complex to implement these in projects (aside from basic effects) - you'll need to use large animation libraries such as GSAP, Anime.js or others.įor years now, using these JavaScript library's are the only way to implement award-winning design animations into a webpage. Beautiful interactions and animations are quickly becoming a standard for web design in 2022.