Framer Tutorial: Creating A Text Reveal Scroll Animation (No-Code)

Поділитися
Вставка
  • Опубліковано 6 жов 2024

КОМЕНТАРІ • 48

  • @des7638
    @des7638 8 місяців тому +8

    the most chill teacher ever. amazing as usual . thank you

  • @OlaOlowo
    @OlaOlowo 9 місяців тому +5

    Nice. Let people know it's best practice to set the trigger layers to 'pointer event:none' to avoid unnecessary headaches.

    • @framer.university
      @framer.university  9 місяців тому +2

      Yes! That’s a good tip! ✌️ thanks!

    • @caiosaulnier6574
      @caiosaulnier6574 9 місяців тому

      How do I set this, guys? and why it's better?

    • @OlaOlowo
      @OlaOlowo 9 місяців тому

      Check Framer's video here at 1:42 ua-cam.com/video/odpGcWkRXf0/v-deo.htmlsi=KyazS9PjhuuWKPw3
      Also it's not a question of why it's better, but it's best practice. Because your trigger layers might block other contents from being clickable, you need to set the trigger to pointer event:none so you can click on layers below it.

    • @InfinyteamCompany
      @InfinyteamCompany 8 місяців тому

      isn't z-index -1 will did the job?

  • @mr.chinaski2613
    @mr.chinaski2613 9 місяців тому +2

    Awesome content as always

  • @adeo149
    @adeo149 9 місяців тому +1

    Amazing tutorial, really appreciate that!

  • @dangoodango6916
    @dangoodango6916 8 місяців тому

    This channel is soooo underrated 🎉🎉🎉 thank you for sharing

  • @michaelbruzzese
    @michaelbruzzese 9 місяців тому

    It's so simple, but really pro looking! Thanks for the top-notch content 🙌♥

  • @kresnawira5708
    @kresnawira5708 9 місяців тому

    This is getting better and better ❤

  • @takeanappan
    @takeanappan 2 місяці тому +1

    always nice content.

  • @lydiawere
    @lydiawere 9 місяців тому

    nice..thanks Nandi, great content as usual.

  • @ArifurRahmanHridoy-j4e
    @ArifurRahmanHridoy-j4e 9 місяців тому

    Thank You so much our mentor

  • @uiuxdesigner101
    @uiuxdesigner101 9 місяців тому +2

    When your full course is coming out?

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu 9 місяців тому

    Awesome 😮

  • @UniStudioTV
    @UniStudioTV 8 місяців тому +1

    Any idea to add smooth transition to it?

    • @framer.university
      @framer.university  8 місяців тому

      You can control the transition by going into the component and adjusting the primary variant’s transition

    • @GunzIf
      @GunzIf 3 місяці тому

      @@framer.universityLike setting an appear effect for each variant?

    • @luismiplays
      @luismiplays 3 місяці тому

      For each scroll interaction*

  • @TheRelaxingdGirl
    @TheRelaxingdGirl 6 місяців тому

    For some reason it's not allowing the frames made to scroll over the text to scroll. not sure what I'm doing wrong.

    • @framer.university
      @framer.university  6 місяців тому

      Can't help you without seeing your project. You can maybe send a remix link.

  • @AtomicPixels
    @AtomicPixels 6 місяців тому

    If I’m being completely honest, not using code here quintuples the time taken to get this effect. It’s about 10 lines of code.

    • @framer.university
      @framer.university  6 місяців тому +1

      great! Then you should code it instead of making it without code. :)

  • @roanjvvuuren7698
    @roanjvvuuren7698 9 місяців тому

    For some reason, Framer is not allowing different colors in the same paragraph. Am I doing something wrong? It feels like Framer is glitching.

    • @framer.university
      @framer.university  9 місяців тому +1

      Remove the text variable from its content property.

    • @roanjvvuuren7698
      @roanjvvuuren7698 9 місяців тому

      @@framer.university yeah no I did. I can edit it it’s just not working. I can edit the colors but it does not change.

    • @erikakaishi1431
      @erikakaishi1431 5 місяців тому

      I was trying to do that interaction on a project and it wasn't working in that way with all the phrases in the same paragraph. I tested breaking in multiple text-blocks, each one being a phrase I wanted to "reveal" and it worked greatly.

  • @mindmotivator3070
    @mindmotivator3070 4 місяці тому

    i am having a problem with the tablet view its not doing the animation only on the desktop view

    • @mindmotivator3070
      @mindmotivator3070 4 місяці тому

      nevermind fix it

    • @framer.university
      @framer.university  4 місяці тому

      glad you were able to fix it 🫶

    • @mindmotivator3070
      @mindmotivator3070 4 місяці тому +1

      i do have one issues how how do i get the scroll animation to fit the different breakpoints i am having trouble with that

    • @bishalsaha1434
      @bishalsaha1434 2 місяці тому

      ​@@mindmotivator3070 make varients for mobile

  • @Madsexday
    @Madsexday 5 місяців тому +2

    Guys is the sticky scroll doesn’t work watch the video until 4:10 and he will tell you something he forgot

    • @Madsexday
      @Madsexday 5 місяців тому

      I kept replaying the video from about 3:50 because i thought i missed something, he had just forgot to mention it. Next time ill watch the entire video before i begin lol.

    • @framer.university
      @framer.university  5 місяців тому +1

      Hehe sorry guys! ✌️✌️