- 34
- 117 674
MotionPage
Czechia
เข้าร่วมเมื่อ 7 พ.ย. 2021
Create Dynamic Hover Tooltips! - Motion.page | GSAP | WordPress
Hello guys! In this video, we will show you how to create custom tooltips, which can be fully dynamic!
Motion.page simply looks for an attribute called mp-cursor-tooltip, and it will pull in the value! In Motion.page, you can customize the appearance of your tooltips to your needs! Super simple yet effective stuff!
----------------------------------------------------
00:06 - Intro
00:34 - Showcase/Example
01:10 - Add your elements in the builder
02:25 - Open Motion.page
03:07 - Edit properties and values
03:30 - Using variables as values
04:50 - Front-end view
----------------------------------------------------
This tutorial made use of the Violet Design Kit from Core Framework: coreframework.com/marketplace...
Purchase Motion.page today - motion.page
Core Framework - coreframework.com
Motion.page simply looks for an attribute called mp-cursor-tooltip, and it will pull in the value! In Motion.page, you can customize the appearance of your tooltips to your needs! Super simple yet effective stuff!
----------------------------------------------------
00:06 - Intro
00:34 - Showcase/Example
01:10 - Add your elements in the builder
02:25 - Open Motion.page
03:07 - Edit properties and values
03:30 - Using variables as values
04:50 - Front-end view
----------------------------------------------------
This tutorial made use of the Violet Design Kit from Core Framework: coreframework.com/marketplace...
Purchase Motion.page today - motion.page
Core Framework - coreframework.com
มุมมอง: 395
วีดีโอ
Create a Super Simple yet Effective Marquee with Motion.page - WordPress 🔥
มุมมอง 967หลายเดือนก่อน
What's up gang! This video shows you a simple tutorial on how to create simple marquee effects. We will be using the Page Load trigger, and also making use of the Repeat (loop) feature. It couldn't be any easier than this! 00:06 - Intro 01:05 - Prepare a Page for Bricks 01:26 - Add necessary elements 03:57 - Add logos as example social proof 05:05 - Open Motion.page 05:16 - Edit Timeline Settin...
Use GSAP's MorphSVG with Motion.page Today! 🔥
มุมมอง 1.3K2 หลายเดือนก่อน
What's up everyone! In this video, I am going to show you how you can use GSAP's MorphSVG which is now included with Motion.page! Simply make sure your SVGs contain paths that we can target! I will go through the important steps in this video. Link to GSAP's docs on MorphSVG: gsap.com/docs/v3/Plugins/MorphSVGPlugin/ 00:06 - Intro 00:37 - Introduction to MorphSVG at GSAP 02:20 - Copy example Cod...
Start Using GSAP's ScrambleText with Motion.page for Extra Flair Today! 🔥
มุมมอง 9242 หลายเดือนก่อน
What's up folks! In today's video, I am going to show you how you can use ScrambleText with Motion.page, to add some extra flair to your awesome websites! We simply add a few lines to the Custom Code box to bring your animations to life! Watch this short video for all you need to know! Here is the custom code I used for scrambleText: scrambleText: { chars: "█ ░ ▄ █ ", revealDelay: 0.2, speed: 0...
Create Fluid Curves with Motion.page/GSAP! 🔥
มุมมอง 2.3K5 หลายเดือนก่อน
Hello guys! In this video, we will show you how to add awesome curves to your sections as you scroll down. We will showcase once again the ScrollTrigger and also make use of JavaScript in this example to manipulate the corners of your sections! This is a quick and simple tutorial that you can use with any builder! Happy animating! 00:06 - Intro 00:15 - Quick Demo 00:45 - Create Page and Open Br...
Create Cool Image Effects when Scrolling - Motion.page/GSAP/WordPress
มุมมอง 1.8K6 หลายเดือนก่อน
Hello guys! 👋🏻 In this small video tutorial, we will show you how to create some pretty slick animations for your images when scrolling! We hope you like the simple effect and please don't hesitate to get in touch with us if you have any questions! Many thanks, and see you in the next one! 00:06 - Intro 00:12 - Quick Demo 00:44 - Create Page and Open Bricks Builder 01:16 - Set up Elements 04:02...
Create Awesome Scrolling Texts with Motion.page/GSAP 🔥💪🏻
มุมมอง 2.4K6 หลายเดือนก่อน
Hey guys! 👋🏻 In this small video tutorial, we will show you how to create scrolling texts which are often seen in some headers on websites. This video shows you two similar examples which you can start implementing right away with Motion.page! We hope you like the simple effect and please don't hesitate to get in touch with us if you have any questions! Many thanks, and see you in the next one!...
Create Before and After Photo Effects with ScrollTrigger - GSAP/Motion.page and Bricks Builder 🔥
มุมมอง 1.6K7 หลายเดือนก่อน
Hello guys! 👋🏻 In this video, we will show you some cool effects using clip-path that you can use to create awesome before/after effects! 🔥 This tutorial will make use of the scrollTrigger and we will manipulate the CSS clip-path property. We will use both polygons and circles in this example. We hope you like the simple effect and please don't hesitate to get in touch with us if you have any q...
Create Awesome Perspective Effects with Motion.page/GSAP for WordPress 🔥
มุมมอง 2.1K8 หลายเดือนก่อน
Hello guys! 👋🏼 In this video, we will show you another simple tutorial where we create some awesome perspective effects on our cards as we scroll down. This tutorial will make use of the scrollTrigger and we will manupulate properties such as transform (perspective and rotate), as well as the filter property to control the color of the images! We hope you like the simple effect and please don't...
Create Simple but Effective Text Animations - GSAP/Motion.page - ScrollTrigger
มุมมอง 3.1K9 หลายเดือนก่อน
Hello guys! 👋🏼 In this video, we will show you another simple tutorial where we create a cool-looking text animation using the ScrollTrigger built into Motion.page! In this specific example, we will be manipulating the letter-spacing property, as well as the color, and also the text-shadow to apply a stroke to the text as we scroll down the page. Here is the CSS for the text-shadow effect that ...
Create Cool Magnetic Effect Easily with Motion.page/GSAP 🧲
มุมมอง 2.6K10 หลายเดือนก่อน
Hi guys! In this video we will be showing you how to add a magnetic effect to your elements using Motion.page! In this particular tutorial, we will be making use of the Mouse Movement trigger, which is quite a new addition to Motion.page. If you have any questions, post in the comments below! Website: motion.page Facebook Group: groups/motion.page Documentation: docs.motion.page/ C...
Creating a Scroll Progress Indicator - 3 Versions - Using Motion.page and GSAP 🔥
มุมมอง 1.6K10 หลายเดือนก่อน
Hi guys! In this video we will explain how you can create 3 different types of progress bars to indicate where you are on the page. These progress bars are quite popular on famous blog and news websites, and now you can create them in Motion.page. We will be making use of the ScrollTrigger, and we'll also show you some cool CSS tricks for masking and mix-blend-mode, as well as custom code to an...
Create an Awesome Rounded Carousel using MotionPath on ScrollTrigger - GSAP/Motion.page 🔥
มุมมอง 3.8K11 หลายเดือนก่อน
Hello guys! 👋🏻 In today's tutorial, we will be showing you the power of MotionPath! Using this feature, we can create an awesome-looking carousel which scrolls on an arc. We will create an SVG that is used as the path for the elements to follow. We will also be using the ScrollTrigger trigger, along with a pinned element. Additionally, we will animate some additional elements such as text and i...
Create an Awesome Image Reveal Effect in WordPress - Motion.page/GSAP
มุมมอง 3.3K11 หลายเดือนก่อน
Hey guys! Back with another user-requested tutorial. In this one, we show you a nice effect where images are revealed in a sleek way! Hope you like this one. 00:06 - Intro 00:16 - Example/Demo 00:51 - Open Builder 01:00 - Set up the Elements 02:39 - Open Motion.page 05:07 - Make the Animation Reusable 08:20 - Final Result 08:40 - Outro Purchase Motion.page today - motion.page CoreFramework - co...
Animate your Timelines using Motion.page and GSAP! 🎉🙌🏻
มุมมอง 1.9K11 หลายเดือนก่อน
Hello guys! 👋🏻 In this tutorial, we will show you how you can add a little spice to your timelines! Animate the center line, the year nodes and also the content! Very subtle but once again, a very effective animation which adds a lot to the overall appearance and feel of the page. All comments welcome, and we'll see you in the next one! 🔥 00:06 - Introduction 00:20 - Demo/Example 00:53 - Design...
Create Awesome Text Animations with Spans 🔥
มุมมอง 2.2Kปีที่แล้ว
Create Awesome Text Animations with Spans 🔥
Create a Cool Stacking Card Effect in Motion.page - Fast and Easy!
มุมมอง 3.2Kปีที่แล้ว
Create a Cool Stacking Card Effect in Motion.page - Fast and Easy!
Change your Theme on PageScroll with Motion.page - (Using Variables)
มุมมอง 1.9Kปีที่แล้ว
Change your Theme on PageScroll with Motion.page - (Using Variables)
Create Awesome Transitions between Sections - Pin Element 🔥
มุมมอง 3.7Kปีที่แล้ว
Create Awesome Transitions between Sections - Pin Element 🔥
Make Killer Animations like Apple Using WordPress and Motion.page!
มุมมอง 12Kปีที่แล้ว
Make Killer Animations like Apple Using WordPress and Motion.page!
How to Create Pinning Elements and Awesome Scaling Effects!
มุมมอง 5Kปีที่แล้ว
How to Create Pinning Elements and Awesome Scaling Effects!
How To Create a Stagger Scroll Reveal Animation
มุมมอง 3.6Kปีที่แล้ว
How To Create a Stagger Scroll Reveal Animation
Create An Epic Scrolling Parallax Effects in WordPress Using Motion.page
มุมมอง 3.3Kปีที่แล้ว
Create An Epic Scrolling Parallax Effects in WordPress Using Motion.page
How to Remake a Flag Animation From Wise.com in Motion.page
มุมมอง 1.9Kปีที่แล้ว
How to Remake a Flag Animation From Wise.com in Motion.page
Create a Horizontal Scroll With Snap in WordPress using Motion.page
มุมมอง 10Kปีที่แล้ว
Create a Horizontal Scroll With Snap in WordPress using Motion.page
How To Animate a Full-Screen Menu Using Motion.page
มุมมอง 3.4Kปีที่แล้ว
How To Animate a Full-Screen Menu Using Motion.page
nice
Wow..gr8 addition.
Thank you. It would be helpful to learn the best way to make it responsive, maybe in the next video? Also, logos are usually not the same width, so it could be interesting to address that also.
Good point! The best method for logos not being the same width is to put them in wrappers which do have the same width 🔥
Awesome stuff!! Excited to get this in main plug-in
Glad you like it! 💪🏻
this is fantastic🎉
Thank you very much! You are also fantastic! 🎊
I notice on mobile, because the span goes onto multiple lines, the split line reveal doesn't work, except for the very last line. Is there any work around for this? This effect is most common for multiple line layouts anyway, and a lot of themes have it as "split heading", such as Salient or Hub. It's unfortunate that oxygen doens't have any widget like this by default
When I applied Position: absolute to Tab-2, and Tab-3, I lost my min-height: 100vh, and Tab-3 overlapped under the below section.
Thanks, just bought. It's amazing plugin, and easy to get going straight away. well done. So if i want to have a preloader, eg with a counter, then fade out only after the whole page (underneath) is loaded. I would do it with 2x timelines? Is that correct?
Hope i explained that correctly: eg: timeline 1 <Before Load>: animate a loading widget, announcing that the page is loading. timeline 2 <After Load>: fade out the elements to reveal the loaded page underneath.
thanks for your special content <3
Cause of fixed div it is not possible to click in any page links
In Safari, every scale effect is pixelated. How can I avoid this?
Hi! I followed the tutorial and noticed that Chrome sometimes prevents the rest of the page from being displayed; it locks the scroll bar on the pinned element. Where am I going wrong and how do I fix it?
ScrollSmoother is causing the issue. I don't know how to fix it. Could You help me?
Hi! How to change z-index on Scroll Trigger?
I recommend showing the final result at the beginning of the video. This is a good practice as it allows the audience to quickly decide if the content is relevant to their needs.
Agree, this would be very helpful.
Awesome Luke 🙌🙏 What if my client adds logo via a post type. Speed of marquee when 4 logos is uploaded compared to 20 logos. So no matter amounts of logos it will keep the same speed. Would it be possible to control the speed from an option page?
I absolutely love this tool . But for me I am finished with Wordpress ! Switching to framer . I still have plenty of sites using wp and will continue with them but from now on all future sites I will be using framer
Coolio keep 'em coming! : )
Oh you bet! 🔥
Great tutorial Luke ..
Thanks a lot! Glad you like it 🙏🏻🔥
Can you confirm the new thumbnail style is making a difference in views?
Great stuff Luke thanks for sharing and more bricks + motion page please : )
You got it! 💪🏻🔥
bricks builder mentioned!🙌🙌🙌
fantastic!!!
Thanks!
Well done! Keep up the great work. This gets my creative juices flowing.
Glad to hear it!
So happy that there are more tutorials coming out! Could we expect an LTD available for Black Friday?
Glad you're enjoying the extra content! Regarding the LTD, all I can say is to make sure you're in our Facebook group, because that's where it will be announced if we do decide to make an LTD available 👀
LOVE THIS.... More of these needed. Short and sweet.
More to come!
Excellent video, how can I do this effect when I use grid? I tried but didn't work
Awesome Tutorial as always. Loved the content.
So happy you have started posting again. Please we want more !
THANKS!
I like this custom stuff nice example.
Great
Great tutorial Luke. Thanks.
Superb tutorial. Purchased this while watching the video. This is going to save me so much time, no more manual coding.
Fantastic! :🔥
FAB
Glad you like it! 🔥
Thank you.. Now to find some cool uses
Is there a reason why you moved from Oxygen to Bricks?
Which template library are you using?
This is using Violet - link is in the description 🙏🏻
hello, you need a video editor?
Hi! I don't believe we do! 🔥
Good Bicepts 22:45 and thank you for your Support and help in the Chat Function from Motion Page 💙
Haha, thank you!
Has anyone tried this and confirm it won't affect SEO? I want to use this but don't want Google to think I'm hiding text
I would like to know the anser, I'm sure accessibility colour contrast would flag as an issue?
Seconding a DOM content loaded function.Good video.
If you're targeting all cans at once, they can use a single class, right? It's not actually cans in my case but you get the point.
What an amazing plugin 😱😱😱
in your opinion which is the best wordpress theme and hosting to use for motion page plugin?
Just purchased this plugin yesterday, can’t wait to play
What if I wanted to animate a line that is a pseudo element. How could I go about moving a line horizontally.
Awesome tutorial! Curious if there is a way to increase the snap speed?
CAN YOU MAKE THIS VIDEO IN ELEMENTOR THANKYU FOR THIS VIDER IT IS SO INFORMATIVE
Good vid Luke!!!!!
Thank you!
Hi, I´ve got question if I can add any gasp animation to custom code in motion.page? or just border and if It´s possible, where it´s documented what I can add?