My first simple page with Bricks + Motion.page 
Let me know what you think!
4 Likes
Looks very nice! Very clean and informative. The only thing I notice is the big image to the right of the hero section looks a bit pixelated.
1 Like
Hi Dave, thanks for sharing! Unfortunately the site does not work for me on the M1 Mac. Neither with Safari, Chrome, Brave, Edge or Firefox on macOS Big Sur 11.6.7. I only see the logo on a blue background and when scrolling everything changes to white / empty browser window…
On iOS Chrome and Safari the page works fine for me. The site looks great - congratulations. I like the animations very much. Really nice work 
1 Like
Hey Alex!
thanks for your feedback :). I tested the mentioned browsers on the 16" M1 Mac but the page works for me across all of them. May I know which M1 model you are using? It might be rather a responsive scaling issue.
@HeroRox strange because I am visiting it from M1 Pro without issues.
@dave as @alexgr mentioned the picture is a bit pixelated even on small screens, consider using higher resolution for header images. The one you used is 300x180. Other than that it is very good looking and has smooth feeling when scrolling. I was thinking about buying the motion.page but it is seems just too expensive, maybe later. How does applying styles work? Is there some additional hud inside the Bricks editor or you need to apply effects via code? Could you perhaps post a screenshot?
1 Like
1 Like
good job! Motion Page it’s amazing, but if someone doesn’t have MotionPage and wants use GSAP libraries could use this code to add to the function.php (child theme)
function theme_gsap_script() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/.../gsap/3.10.4/gsap.min.js', array(), false, true );
wp_enqueue_script( 'gsap-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
Like you can see from the code you have to add your GSAP code from an external js file (in my case gsap-scripts.js).
4 Likes
wow. So smooth - you know how to use motion.page like a pro!
1 Like
Nice job with motion.page!
it’s such a great plugin!
Would you mind if I asked how you did 2 things?
The fade from white to darkbg, i’ve done this previously by targeting body on scroll, but how did you get the transition from fade to dark back to white section to stop at that div?
The other question I had was about the page load animation across the screen and how you achieved that!
Nice work!
@dave Just to bring up the question again…
Would be really cool if you could share how you did the fading-animation and page-load.