No video

Learn Framer Scroll Animations in 13 Minutes

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn the easiest scroll animation technique that you can start using in Framer without any coding knowledge. Follow along and I'll show you how sticky positioning work and how to trigger scroll effects with scroll sections. After following along this video, you’ll have the knowledge that is needed to create the most amazing scroll animations on your websites (without any code!).
Remix the project: framer.university/resources/3...
Haptic site mentioned in the video: haptic.app/
00:00 - Intro
00:24 - The roadmap
00:47 - The technique
01:41 - Sticky positioning setup
04:39 - Scroll triggers
06:07 - Scroll transform
08:53 - Scroll variants
12:00 - Recap
12:35 - Additional resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university

Пікірлер: 74

  • @framer.university
    @framer.university4 ай бұрын

    what do you want to learn next?

  • @llewellynvaneeden4467

    @llewellynvaneeden4467

    4 ай бұрын

    It would be cool to see how you created the variants

  • @Rajdeep_Pandey

    @Rajdeep_Pandey

    4 ай бұрын

    Dear framer, Please make a video on how to connect your website to PayPal or Any Payment Websites, because I am making a website and I don't have idea how I can connect my website to Payment Websites so that my customer can pay me...

  • @framer.university

    @framer.university

    4 ай бұрын

    @@Rajdeep_Pandeywatch this tutorial: kzread.info/dash/bejne/jKmf29Nym5TAY6Q.html

  • @Rajdeep_Pandey

    @Rajdeep_Pandey

    4 ай бұрын

    @@framer.university Nandi, I have a another problem also. And I want to discuss with you, tell me from where I can connect with you any social media or Gmail?

  • @FaixanRather

    @FaixanRather

    4 ай бұрын

    Sign up / login

  • @timilehinsolu4254
    @timilehinsolu42544 күн бұрын

    I’ve never seen someone so happy to talk about scroll animations 😆

  • @framer.university

    @framer.university

    4 күн бұрын

    Gotta be passionate 😂

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu4 ай бұрын

    Trust me framer is gonna change the world for web designers, we will be called interface engineers more 🎉🎉🎉🎉

  • @framer.university

    @framer.university

    4 ай бұрын

    I agree! Framer will unlock the ability for every designer to build their websites in an environment we designers are all used to. Excited about the future :)

  • @estone9960
    @estone99604 ай бұрын

    I really, really, appreciate your videos. You are a great teacher and I appreciate you sharing your knowledge. I'm glad I found you and subscribed to your channel. Thank you.

  • @framer.university

    @framer.university

    4 ай бұрын

    I appreciate that! I hope my videos will help you! :)

  • @hoanghantlz
    @hoanghantlzАй бұрын

    Wow you made it really easy to understand. I feel so lucky I've found your channel. Appreciate your great videos 💯

  • @framer.university

    @framer.university

    Ай бұрын

    Thank u so much for your comment, Hoang! I'm glad u find my videos valuable. More to come 🫶

  • @michaelbruzzese
    @michaelbruzzese4 ай бұрын

    Incredible job as always Nandi, a lot of value, and everything seems so easy to understand when you show it step-by-step! 💪 (Love the new setup!)

  • @framer.university

    @framer.university

    4 ай бұрын

    Thanks so much mate 🫶

  • @ProNoobDev
    @ProNoobDev4 ай бұрын

    oh this is what i was looking for ! thank you so much

  • @framer.university

    @framer.university

    4 ай бұрын

    You're welcome!

  • @llewellynvaneeden4467
    @llewellynvaneeden44674 ай бұрын

    Awesome video, thank you so much!

  • @framer.university

    @framer.university

    4 ай бұрын

    Glad it helped!

  • @leandrosilva6414
    @leandrosilva64144 ай бұрын

    Great video as always!

  • @framer.university

    @framer.university

    4 ай бұрын

    thanks for the kind words! I hope it helped :)

  • @YansRiegel
    @YansRiegel4 ай бұрын

    great, thank you!

  • @framer.university

    @framer.university

    4 ай бұрын

    🫡

  • @thewebstylist
    @thewebstylist4 ай бұрын

    WOW luv it all!

  • @framer.university

    @framer.university

    4 ай бұрын

    thanks a lot! :)

  • @mr.chinaski2613
    @mr.chinaski26134 ай бұрын

    Awe-some, just as always!

  • @framer.university

    @framer.university

    4 ай бұрын

    Thank you! Cheers!

  • @panicdispenser6586
    @panicdispenser65863 ай бұрын

    why you cant use the x or y position of main section for the scroll animation? why using this 0% opacity sections instead?

  • @user-hr6fr8mc5z
    @user-hr6fr8mc5z3 ай бұрын

    Hi... Can you make a video on an Animated circle progress bar

  • @Shafranlive
    @Shafranlive4 ай бұрын

    My eyes are on your new Mac Studio Setup 😅❤✨

  • @framer.university

    @framer.university

    4 ай бұрын

    haha, it's sooo good :))

  • @adindakhairani640
    @adindakhairani6402 ай бұрын

    how to record framer animations in windows?

  • @rachsarra
    @rachsarra11 күн бұрын

    Would it be possible to have a scroll animation for each scroll variant, or only for scroll transforms? I'm trying to do a simple fade instead of transforming the variant into another, but it only works between the 1st and 2nd variation

  • @framer.university

    @framer.university

    6 күн бұрын

    You can use the trigger Frames to trigger scroll transforms and scroll variants too. Check my latest vid! ✌️

  • @shuoEnva
    @shuoEnva2 күн бұрын

    Why is the text disappearing effect different on phones and tablets compared to computers? How can it be modified to be consistent with computers?

  • @DavidMartens
    @DavidMartens2 ай бұрын

    Hey! im learning Framer right now. How could I trigger a video? As the user scroll it progresses through the video CHEERS!

  • @framer.university

    @framer.university

    2 ай бұрын

    Use the override from this remix: framer.university/resources/apple-watch-website-in-framer

  • @DavidMartens

    @DavidMartens

    2 ай бұрын

    @@framer.university can you create a video on this? having a hard time understanding ow this was done

  • @nousuyadagiri96
    @nousuyadagiri962 ай бұрын

    Can we export framer design into code ??🤔

  • @framer.university

    @framer.university

    2 ай бұрын

    We can't.

  • @mamunmiahbd
    @mamunmiahbd4 ай бұрын

    don't understand the place of Sir Scour ticker and I can't understand what the text is through

  • @framer.university

    @framer.university

    4 ай бұрын

    what do you not understand?

  • @mamunmiahbd

    @mamunmiahbd

    4 ай бұрын

    ​​@@framer.university Sir I can the working of sticky frame but don't understand anything else.

  • @mamunmiahbd

    @mamunmiahbd

    4 ай бұрын

    ​@@framer.university Sir I can the working of sticky frame but don't understand anything else.

  • @mamunmiahbd

    @mamunmiahbd

    4 ай бұрын

    Sir I can the working of sticky frame but don't understand anything else.

  • @MetaArtisan
    @MetaArtisan3 ай бұрын

    why don't framer has prototype?

  • @framer.university

    @framer.university

    3 ай бұрын

    Framer isn’t for prototypes. It is for live working websites.

  • @MetaArtisan

    @MetaArtisan

    3 ай бұрын

    @@framer.university how can i link connection between to pages?

  • @nitromusik9275
    @nitromusik92753 ай бұрын

    2:59 i did not enjoy stopping 50 times to check what settings you did different because yours work and mine doesnt. This passage was 10x too fast (or too shallow) to just learn from or reproduce as a noob.

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks for the feedback. Can you refer to the section of the video as from-to?

  • @nitromusik9275

    @nitromusik9275

    3 ай бұрын

    @@framer.university sure. Basically the second section starting from 2:26. But it was good that you mentioned the remix link in the beginning of the second section because using this it was easy. I searched and found this video because i tried to get this to work in an existing layout. By comparing it to your layout via remix i found that my problems came from my breakpoint properties.

  • @teyahombre

    @teyahombre

    Ай бұрын

    @@framer.university I really agree with @nitromusik9275 that part is not well explained since he doesn't say why is each section used and what exactly is inside each section. I miss being able to understand first what each section does and how's structured and why. For example, idk what's inside Sticky Section since it shows is the first section with the coin (but visibly it also contains the text, but apparently all texts are in Text Stack...) so not clear at all... I'm constantly stopping that part over and over again to try to understand why he has that section structure and he really doesn't explain it during the video either.

  • @teyahombre

    @teyahombre

    Ай бұрын

    So apparently all texts are inside a stack? It's really not clear

  • @framer.university

    @framer.university

    Ай бұрын

    Sorry if I wasn’t clear! I recommend remixing the project to see the full structure: framer.university/resources/3d-flip-scroll-animation-in-framer

  • @ethicseo
    @ethicseo3 ай бұрын

    Jesus can change yr life ❤

  • @BETTERLIFE-fj3tj
    @BETTERLIFE-fj3tj2 ай бұрын

    it's to diffucult than i think even section 2 and 3 it's no come up after click scroll variant, why ? after follow step by step

  • @BETTERLIFE-fj3tj
    @BETTERLIFE-fj3tj2 ай бұрын

    NOT WORKING....can't be sticky position after back to home making tree variant. sticky position can't be click. why ? You change in video from relative to sticky position. But You don't show in video when you change your text position from absolute to relative and than go to sticky position. cuz sticky position can't be click. and also relative position can't be click. the button is down or off, why ?

  • @framer.university

    @framer.university

    2 ай бұрын

    Make sure that the parent frame is a stack (click the plus button next to the"layout" on ten right panel).

  • @BETTERLIFE-fj3tj

    @BETTERLIFE-fj3tj

    2 ай бұрын

    @@framer.university sorry man give up... i'm trying to difficult....

  • @BETTERLIFE-fj3tj
    @BETTERLIFE-fj3tj2 ай бұрын

    When You start tutorial, please start from blank page. Don't any some stuff there to cunfiused your audiens. Not every body in the same level. some body like me it's newbie in framer. please star from blank page, cuz we even dont know how to make top, main and botttom page. You start with website already have top, main and bottom making confused....

  • @framer.university

    @framer.university

    2 ай бұрын

    hey mate! thanks for the feedback. it makes a ton of sense. the reason why I start these videos from a starter file is because I wanna be able to focus on the main topic of the video. building everything from scratch would make my videos super super long. I hope though that giving you remix files helps a little :) I'm also going to make more videos where I show how to build stuff from scratch so you can learn that too. I recommend this video: framer.university/lessons/scroll-animation-process