Easily Add GSAP Animations to WordPress with Motion Page
HTML-код
- Опубликовано: 17 ноя 2021
- GSAP animations are a fantastic way to add life and motion to your website, but it has a steep learning curve with a heavy reliance on JavaScript. Now the team behind OxyNinja has brought us a WordPress plugin called Motion Page that enables you to harness the power of GSAP without writing any code at all.
In this video, we'll create two nice animations as our very first look at the plugin and in future episodes we will create even more complex animations using Motion Page. I hope you are as excited as I am!
Get Motion Page here: permaslug.com/go/motionpage
Motion Page currently works with the following builders as of 17 Nov 2021: Oxygen, Gutenberg, Bricks, Elementor, Zion, Beaver, SeedPro, Themify Builder, Brizy, Nimble Builder.
*Please note: This footage was recorded with a pre-release version of the software, so bugs and deviations from the final release version might be present.
Join this channel to get access to sweet perks for comments and during live streams and premiers: / @permaslug
Learn more about my Oxygen Builder course here: permaslug.com/ultimate-oxygen...
Visit the premium forums: permaslug.com/forums/
-Connect with me!-
Facebook: / permaslug
Twitter: / permaslug
Website: permaslug.com 
Наука
Just purchased! SO AWESOME! Luv how the animations already have modern easing instead of being old school linear. Great video!
Thank you very much. Your content is amazing and making of is very well done! More on Motion.Page is truly appreciated!
Fantastic video! Even for us non-developers you explained and showed this in a way that was not overwhelming at all. That's a talent!
I would love to see videos about exit animations and such, so I'll hit the like, subscribe, bell and hope for the best.
Keep it up!
This plugin might be the biggest fomo generator of the year 😅, can't wait.
Lol this is very true!
Sweet! Thanks for the insight to another great-looking plugin!
Thanks dude!! See you soon on the live stream
I need this in my dev toolkit 🤩
Future videos about this would be the bomb 🎉🎊
Live stream tomorrow! More videos in the coming weeks
Thanks very much for this! I hope you're feeling better, too :D
Thanks for the introduction. Ordered this on your referral link.
You are awesome, thank you
Thank you very much for the video, I was curious about Motion Page and it was great to see a live example. I was wondering if you know if this is going to be compatible with Divi builder at some point?
Motion.page is dope. Super powerful and love the timeline feature.
It is awesome, for sure! Feels like scrubbing the timeline on a video editing software
Price is way to high
Very cool. Thanks.
Glad you liked it!
@@Permaslug I don't think your videos get enough attention. I'm sure if you keep putting out exemplar Oxygen content, that is as useful and practical as this, you'll get the audience you are after. I certainly find your practical-use videos exceptionally helpful. Warmest regards,
@@mb3798 that’s incredibly kind of you! I appreciate that a lot
Could I copy the html and CSS code from this plugin so that it doesn’t have to remain active (not trying to have to many plugins on my website)
What color is the grey on your walls? Love that color. A must for my new and soon-to-be office space in the house.
Also, this is super awesome. I just signed up for the waitlist.
Haha thanks, I love the color too. It was a custom color match from a few years ago, I honestly have no idea. Email me and I'll send you a pic of the code you can take to home depot and they can pull it up for you.
Thanks for signing up!
hi there - good day dear permaslug: thx for this. Wee need more tutorials for FSE (Full-Site-Editing) and Query-Loop - the most advanced techniques in Future-WP - etc. WP 5.9.
'any idea how to come up with this. Keep up the great work - it rocks! Greetings
If you start an animation on Page Load, and stagger all elements on the page that share the same class, but some of the elements are visible right away on the first/hero screen, like your 6 social elements, but let's say another 6 elements with the same class are just near the footer, and are not visible right away - will they animate only when you scroll them into view, or on page load, so when you actually get to that part of the page, the animation won't be visible as it already went off?
You can use a scrolltrigger animation type so it only starts animating once it's in the viewport. That part is customizable as well. The element can start animating once it's fully or only partially in view, even
I subscribed for the cough 😂
Can you try doing a parallax background? Or a background that scales? Would love to see more ScrolTrigger features
Definitely more videos coming soon
Thanks for the video!
When will this plugin be available to buy?
They said "a few days." Hopefully sooner rather than later!
Any leaks how much will it cost?
Could you do the same with Lottie and Oxy Extras??
So the plugin picks up any builder content and makes it editable?
Almost all popular builders for WordPress will work, yes
@@Permaslug gutenberg include?
Can I use it for free?
0:14 😂
The lack of documentation for this plugin is disturbing. There are a few videos with yours as the main one. No complete or meaningful guide in their site. Their official You-tube channel has no content (there is no excuse, there are plugins that have one developer only and he/she made lots of detailed videos). Simply, it seems that they don't want people buying their plugin and intended only for testing to integrate with Oxygen.
A hundred and nineteen dollars a year? Yeah, no way.
I think that its important to add that MotionPage isnt for free and that adding gsap to a theme isnt that hard. It's just a matter of adding a link to the cdn in the header and finding a js file to add your stuff into. Most themes allows the user to write js in a textbox that is appended to the footer. The most important thing is to ensure that the cdn link to gsap is placed before your gsap js code.