Framer Parallax Animation Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ก.ค. 2024
  • Check out our Full Framer course: bit.ly/44Mc90b
    👉 Follow Ryan on Instagram: / theryanhayward
    Have you ever wanted to create a cool parallax effect like all the award-winning websites? Well, guess what? You can do this in Framer with zero code, and in this video, I will show you exactly how you can do that easily.
    💻 Project link: framer.com/projects/new?dupli...
    📽️ CHAPTERS
    ---------------------------
    00:00 - Intro
    00:20 - Layering Elements
    03:29 - Responsive Scaling
    04:13 - Adding Text
    06:56 - Adding A Parallax Effect
    Let us know what you’d like to see next!
    📱 Find us on SOCIAL MEDIA, Flux Academy's:
    Instagram: / flux.academy
    Tiktok: / fluxacademy
    Twitter: / fluxacademyhq
    #webdesign #framer #webdesigner

ความคิดเห็น • 31

  • @creativereflux4336
    @creativereflux4336 ปีที่แล้ว +2

    Very Nice! Thanks

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

    Thank you so much, Ryan!! So helpful

  • @Rita_Johanna
    @Rita_Johanna 8 หลายเดือนก่อน +1

    amazing!! Thank you!

  • @Abdullahfalah
    @Abdullahfalah ปีที่แล้ว +6

    This video ignites my creativity again, I am feeling like a rockstar right now ❤️‍🔥👌🏻thanks.

  • @thewebstylist
    @thewebstylist ปีที่แล้ว +2

    Nice!🎉

  • @jayellwood
    @jayellwood ปีที่แล้ว +2

    Great vid

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

    bruh.. great teaching

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

    i tried it. But on my 4k (3840 × 2160 Pixel) Display the mountain is over the Headline. How can i fix this?

  • @gagasnusa6015
    @gagasnusa6015 ปีที่แล้ว

    Followed on twitter ✅
    Subscribed on youtube ✅
    Duplicate the free template ✅
    Soon finish my first framer template 🙏👍✨

  • @seang2012
    @seang2012 ปีที่แล้ว +2

    Anyone else notice this guy is a level 8 hot nerd? That is an official category.

  • @dominiquedegottex2481
    @dominiquedegottex2481 ปีที่แล้ว +5

    How framer is really different than webflow?
    Ok I get that the UI is different, but the process for doing this type of effects is kind of the same.
    I also noticed that you don't really pay attention in naming you elements.
    Is framer using some sort of node element that can modify the style of elements without using the class? In that case is there a way of cascading style included in the UI of framer.
    I haven't check the code of a framer site but I have heard framer is react.js.
    If so how are they dealing with server rendering?
    Is there way to use other measure other than pixel?
    Last question... As a proactive JavaScript coder and webflow user, is there any interest to make the shift from Webflow?
    Just trying to figure out if I should try playing around with framer

    • @B_Migs
      @B_Migs ปีที่แล้ว +4

      These are all great questions. Sounds like you have some researching to do.

    • @hisanzee3052
      @hisanzee3052 ปีที่แล้ว +1

      I can answer your last question. You will feel like a god when it came to framer with your skill sets.
      Or maybe you just have a gig, where you don’t want to give your 100% or the payment is low, you can just do it quickly and create a pretty great product with very less effort. Tbh, not all gigs are like the portfolio showcase levels. We all know it.
      And sometimes we just do some gigs for the cash, but what if we did it, and also could give a pretty great product? That’s where Framer jumps in.
      That’s what I think. But surely explore the community and the new and exciting things coming up.

    • @ryanhayward3488
      @ryanhayward3488 ปีที่แล้ว +2

      Much more user friendly for designers and requires less knowledge of HTML & CSS.
      I would also add that their animations & component logic is was more powerful than Webflow.
      Still think Webflow is great for a lot of instances, but framer is definitely taking a piece of the pie

    • @chaya973
      @chaya973 ปีที่แล้ว +3

      When you use Photoshop or Figma or any other design software, do you name every single layer you create? No. This is what Framer is. You focus on the design and visually getting the results you want.

    • @dominiquedegottex2481
      @dominiquedegottex2481 ปีที่แล้ว

      @@ryanhayward3488 Thanks, I will take sometime to see how I can use it in my stack.

  • @ducksquidbat8315
    @ducksquidbat8315 ปีที่แล้ว +7

    Do it without code!!! But with a complete understanding of css lol

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

    is this software is free 99 ?

  • @JuanGinez
    @JuanGinez ปีที่แล้ว +3

    Does this work on mobile?

    • @ryanhayward3488
      @ryanhayward3488 ปีที่แล้ว +1

      Yes. You'll just need to add a breakpoint

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

    Painful vocal fry. Good tut tho

  • @DeignFilx
    @DeignFilx ปีที่แล้ว +1

    Stay away from framer and webflows if you wanna become real Dev or designer.

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

      dont be scared

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

      Why

    • @22zulu
      @22zulu 8 หลายเดือนก่อน

      can you explain more? Im getting into UX.

  • @user-ob3nb1on6m
    @user-ob3nb1on6m 8 หลายเดือนก่อน +1

    please speak in your normal voice, don't do this AHHH cutting sound

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

      please keep your comment to yourself, dont do this AHHH nasty troll