Building a Framer Scroll Animation From Scratch (Raw Process)

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you will see how I build a scroll animation in Framer from scratch. Learn how sticky positioning functions, how to activate scroll effects with scroll sections, and how to solve problems that come up when developing websites.
Remix the project: framer.university/resources/d...
Original website: discovermarket.videinfra.com/
00:00 - Intro
01:05 - Inspecting the effect
03:09 - Preparing the platforms
17:03 - Preparing the text
37:13 - Fixing the platforms
39:43 - Implement the line?
42:20 - Setting up sticky positioning
45:22 - Adding scroll effects
01:08:32 - Optimizing for breakpoints
01:19:22 - Testing on mobile
01:20:49 - Fixing the text animation
01:27:45 - Implementing new solution
01:36:27 - Final test on mobile
01:37:00 - More learning resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university

Пікірлер: 22

  • @user-ez5mm1he4g
    @user-ez5mm1he4g4 ай бұрын

    "My name is Nandi and this is framer university" is such a dreamy accent

  • @framer.university

    @framer.university

    4 ай бұрын

  • @leemahlangu19
    @leemahlangu194 ай бұрын

    Thank you! I love the raw from scratch/ raw process! I hope they'll be more :)

  • @framer.university

    @framer.university

    4 ай бұрын

    thanks! Happy to hear you like this :) I might make more of these :)

  • @Alex-dv9yj
    @Alex-dv9yj4 ай бұрын

    Really valuable video! Thank you so much Nandi. Please do more videos like this.

  • @framer.university

    @framer.university

    4 ай бұрын

    Thanks Alex! I’ll consider making more of these :)

  • @igwekenneth8647
    @igwekenneth86474 ай бұрын

    Very very insightful 😮😮😮

  • @framer.university

    @framer.university

    4 ай бұрын

    thank you! :)

  • @Trazynn
    @Trazynn4 ай бұрын

    A sidebar with collapsible subsections/categories would be neat. I see that some templates have it but I can't figure out how they did it.

  • @sebastianmedina9539
    @sebastianmedina95394 ай бұрын

    Hey Nandi, I appreciate all your work, but I was wondering if you could teach us about something different. For example I’ve recently found out about the graphics tool that framer has (the one that appears once you press G on the canvas). I can’t really find a lot of documentation on it and I was wondering if you were willing to do a tutorial to showcase how to use it. Keep the good work up!

  • @framer.university

    @framer.university

    4 ай бұрын

    Hey! Thanks! The graphic tool is used to draw SVG shapes in Framer. It isn't really good though, so it is recommended to make your SVG illustrations or icons in Figma or another tool and copy the SVG over to Framer. Let me know if you have any questions.

  • @another.designer
    @another.designer4 ай бұрын

    Nandi I really appreciate for what you are doing. (Liked the video and Subscribed) It would be really helpful if you can cover the Effects section of framer in a effect by effect manner. I think it'll be more helpful to see the structure in topics and easy to learn. You are doing great Job 👍🏻.

  • @framer.university

    @framer.university

    4 ай бұрын

    Sure I will

  • @isaac_feldman
    @isaac_feldman4 ай бұрын

    hi question: couldnt you give the box a minimum height in PX of 2lines of text to fix that?

  • @framer.university

    @framer.university

    4 ай бұрын

    I could've tried it but I think scroll variants just bugging with sticky positioning.

  • @ErikFrits
    @ErikFrits2 ай бұрын

    Hi Nandi, Great lesson! I took your framer project and adjusted to my needs (10 chapters with more detailed description of each). But now whenever I resize down to Tablet or Mobile I get an Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. Do you know what causes it and where should I focus? p.s. Thanks for sharing so much cool stuff on Framer

  • @ErikFrits

    @ErikFrits

    2 ай бұрын

    Nevermind, I found that it was one of my old components that started to break my page... I was deleting section by sections until I realized what breaks it.

  • @SK-ii9qw
    @SK-ii9qw4 ай бұрын

    why is everything so pink in your videos ???

  • @framer.university

    @framer.university

    4 ай бұрын

    Maybe orange, and because of the color grading.

  • @itslocane412
    @itslocane4124 ай бұрын

    Is there a reason why you wouldn't instead just use scroll triggers with a scroll variant with a component for this?

  • @framer.university

    @framer.university

    4 ай бұрын

    Because of the nature of the animation. This is a scroll based interaction, meaning that platforms move from point A to point B through a specific amount of scrolling. That is achieved with scroll transform. Scroll variant is indeed triggered with scroll section, but once you reach the point of trigger, it plays the variant switch instantly according to the component's transition settings, no matter if you're still scrolling or stopped.

  • @itslocane412

    @itslocane412

    4 ай бұрын

    @@framer.university I love you for explaining it to me properly, thank you a lot man