MotionPage
MotionPage
  • 34
  • 117 674
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
มุมมอง: 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)
Update - Motion.page 2.1.0
มุมมอง 1.6Kปีที่แล้ว
Update - Motion.page 2.1.0
Create Awesome Transitions between Sections - Pin Element 🔥
มุมมอง 3.7Kปีที่แล้ว
Create Awesome Transitions between Sections - Pin Element 🔥
Create Amazing Pinning Stacking Tabs 🔥
มุมมอง 3.2Kปีที่แล้ว
Create Amazing Pinning Stacking Tabs 🔥
Make Killer Animations like Apple Using WordPress and Motion.page!
มุมมอง 12Kปีที่แล้ว
Make Killer Animations like Apple Using WordPress and Motion.page!
Start Animating Your Pseudo Elements!
มุมมอง 1.6Kปีที่แล้ว
Start Animating Your Pseudo Elements!
Create Cool Parallax Sections Easily!
มุมมอง 2.4Kปีที่แล้ว
Create Cool Parallax Sections Easily!
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

ความคิดเห็น

  • @SinanWP
    @SinanWP 6 วันที่ผ่านมา

    nice

  • @mzosama
    @mzosama 6 วันที่ผ่านมา

    Wow..gr8 addition.

  • @udishalish3936
    @udishalish3936 7 วันที่ผ่านมา

    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.

    • @motionpage
      @motionpage 6 วันที่ผ่านมา

      Good point! The best method for logos not being the same width is to put them in wrappers which do have the same width 🔥

  • @kokapeli
    @kokapeli 7 วันที่ผ่านมา

    Awesome stuff!! Excited to get this in main plug-in

    • @motionpage
      @motionpage 6 วันที่ผ่านมา

      Glad you like it! 💪🏻

  • @aikomiyata-e8x
    @aikomiyata-e8x 7 วันที่ผ่านมา

    this is fantastic🎉

    • @motionpage
      @motionpage 6 วันที่ผ่านมา

      Thank you very much! You are also fantastic! 🎊

  • @RehmatDeen
    @RehmatDeen หลายเดือนก่อน

    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

  • @JeegenPrajapati
    @JeegenPrajapati หลายเดือนก่อน

    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.

  • @raw3drendering361
    @raw3drendering361 หลายเดือนก่อน

    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?

    • @raw3drendering361
      @raw3drendering361 หลายเดือนก่อน

      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.

  • @leoplu2414
    @leoplu2414 หลายเดือนก่อน

    thanks for your special content <3

  • @acbsll
    @acbsll หลายเดือนก่อน

    Cause of fixed div it is not possible to click in any page links

  • @spaceharrier71
    @spaceharrier71 หลายเดือนก่อน

    In Safari, every scale effect is pixelated. How can I avoid this?

  • @acbsll
    @acbsll หลายเดือนก่อน

    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?

    • @acbsll
      @acbsll หลายเดือนก่อน

      ScrollSmoother is causing the issue. I don't know how to fix it. Could You help me?

  • @acbsll
    @acbsll หลายเดือนก่อน

    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.

    • @DQ940
      @DQ940 27 วันที่ผ่านมา

      Agree, this would be very helpful.

  • @keviincosmos
    @keviincosmos หลายเดือนก่อน

    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?

  • @darndarn99
    @darndarn99 หลายเดือนก่อน

    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

  • @mattbrooke8320
    @mattbrooke8320 หลายเดือนก่อน

    Coolio keep 'em coming! : )

    • @motionpage
      @motionpage หลายเดือนก่อน

      Oh you bet! 🔥

  • @DDesigner123
    @DDesigner123 หลายเดือนก่อน

    Great tutorial Luke ..

    • @motionpage
      @motionpage หลายเดือนก่อน

      Thanks a lot! Glad you like it 🙏🏻🔥

  • @JeveStobsWindows95
    @JeveStobsWindows95 2 หลายเดือนก่อน

    Can you confirm the new thumbnail style is making a difference in views?

  • @mattbrooke8320
    @mattbrooke8320 2 หลายเดือนก่อน

    Great stuff Luke thanks for sharing and more bricks + motion page please : )

    • @motionpage
      @motionpage 2 หลายเดือนก่อน

      You got it! 💪🏻🔥

  • @isaac_feldman
    @isaac_feldman 2 หลายเดือนก่อน

    bricks builder mentioned!🙌🙌🙌

  • @aikomiyata-e8x
    @aikomiyata-e8x 2 หลายเดือนก่อน

    fantastic!!!

    • @motionpage
      @motionpage 2 หลายเดือนก่อน

      Thanks!

  • @kwsim539
    @kwsim539 2 หลายเดือนก่อน

    Well done! Keep up the great work. This gets my creative juices flowing.

    • @motionpage
      @motionpage 2 หลายเดือนก่อน

      Glad to hear it!

  • @fredtrivett
    @fredtrivett 2 หลายเดือนก่อน

    So happy that there are more tutorials coming out! Could we expect an LTD available for Black Friday?

    • @motionpage
      @motionpage 2 หลายเดือนก่อน

      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 👀

  • @websiltd
    @websiltd 2 หลายเดือนก่อน

    LOVE THIS.... More of these needed. Short and sweet.

    • @motionpage
      @motionpage หลายเดือนก่อน

      More to come!

  • @arturoguzmanmx
    @arturoguzmanmx 2 หลายเดือนก่อน

    Excellent video, how can I do this effect when I use grid? I tried but didn't work

  • @bubaimondal1
    @bubaimondal1 2 หลายเดือนก่อน

    Awesome Tutorial as always. Loved the content.

  • @fredtrivett
    @fredtrivett 2 หลายเดือนก่อน

    So happy you have started posting again. Please we want more !

  • @yoni_kessler
    @yoni_kessler 2 หลายเดือนก่อน

    THANKS!

  • @SinanWP
    @SinanWP 2 หลายเดือนก่อน

    I like this custom stuff nice example.

  • @Hassanakora
    @Hassanakora 2 หลายเดือนก่อน

    Great

  • @philevans9011
    @philevans9011 2 หลายเดือนก่อน

    Great tutorial Luke. Thanks.

  • @BearSitesAndy
    @BearSitesAndy 3 หลายเดือนก่อน

    Superb tutorial. Purchased this while watching the video. This is going to save me so much time, no more manual coding.

    • @motionpage
      @motionpage 2 หลายเดือนก่อน

      Fantastic! :🔥

  • @PhilMace
    @PhilMace 4 หลายเดือนก่อน

    FAB

    • @motionpage
      @motionpage หลายเดือนก่อน

      Glad you like it! 🔥

  • @PhilMace
    @PhilMace 4 หลายเดือนก่อน

    Thank you.. Now to find some cool uses

  • @poweredupweb
    @poweredupweb 4 หลายเดือนก่อน

    Is there a reason why you moved from Oxygen to Bricks?

  • @danield8606
    @danield8606 4 หลายเดือนก่อน

    Which template library are you using?

    • @motionpage
      @motionpage หลายเดือนก่อน

      This is using Violet - link is in the description 🙏🏻

  • @adnanchy3078
    @adnanchy3078 4 หลายเดือนก่อน

    hello, you need a video editor?

    • @motionpage
      @motionpage หลายเดือนก่อน

      Hi! I don't believe we do! 🔥

  • @Krypto-Whitehat-Ripple-News
    @Krypto-Whitehat-Ripple-News 4 หลายเดือนก่อน

    Good Bicepts 22:45 and thank you for your Support and help in the Chat Function from Motion Page 💙

    • @motionpage
      @motionpage หลายเดือนก่อน

      Haha, thank you!

  • @noelr1010
    @noelr1010 4 หลายเดือนก่อน

    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

    • @websiltd
      @websiltd 2 หลายเดือนก่อน

      I would like to know the anser, I'm sure accessibility colour contrast would flag as an issue?

  • @samsturdivant1359
    @samsturdivant1359 4 หลายเดือนก่อน

    Seconding a DOM content loaded function.Good video.

  • @suup10
    @suup10 4 หลายเดือนก่อน

    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.

  • @darndarn99
    @darndarn99 4 หลายเดือนก่อน

    What an amazing plugin 😱😱😱

  • @darndarn99
    @darndarn99 4 หลายเดือนก่อน

    in your opinion which is the best wordpress theme and hosting to use for motion page plugin?

  • @darndarn99
    @darndarn99 4 หลายเดือนก่อน

    Just purchased this plugin yesterday, can’t wait to play

  • @dh7594
    @dh7594 5 หลายเดือนก่อน

    What if I wanted to animate a line that is a pseudo element. How could I go about moving a line horizontally.

  • @alvarofajardo8277
    @alvarofajardo8277 5 หลายเดือนก่อน

    Awesome tutorial! Curious if there is a way to increase the snap speed?

  • @kevalpaneliya4308
    @kevalpaneliya4308 5 หลายเดือนก่อน

    CAN YOU MAKE THIS VIDEO IN ELEMENTOR THANKYU FOR THIS VIDER IT IS SO INFORMATIVE

  • @DDesigner123
    @DDesigner123 5 หลายเดือนก่อน

    Good vid Luke!!!!!

    • @motionpage
      @motionpage 5 หลายเดือนก่อน

      Thank you!

  • @DanielGrisa-yw6bt
    @DanielGrisa-yw6bt 5 หลายเดือนก่อน

    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?