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

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ต.ค. 2024

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

  • @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 th-cam.com/video/odpGcWkRXf0/w-d-xo.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 9 หลายเดือนก่อน

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

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

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

  • @adeo149
    @adeo149 9 หลายเดือนก่อน +1

    Amazing tutorial, really appreciate that!

  • @mr.chinaski2613
    @mr.chinaski2613 9 หลายเดือนก่อน +2

    Awesome content as always

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

    This is getting better and better ❤

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

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

    • @framer.university
      @framer.university  9 หลายเดือนก่อน

      My pleasure! :)) glad you liked it

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

    nice..thanks Nandi, great content as usual.

  • @burnnetneo
    @burnnetneo 5 วันที่ผ่านมา +1

    I have problem - can't choice relative position for text only absolute. Maybe need choose frame.

    • @framer.university
      @framer.university  3 วันที่ผ่านมา

      Because its parent frame isn’t a stack.

  • @ArifurRahmanHridoy-j4e
    @ArifurRahmanHridoy-j4e 9 หลายเดือนก่อน

    Thank You so much our mentor

  • @takeanappan
    @takeanappan 3 หลายเดือนก่อน +1

    always nice content.

  • @uiuxdesigner101
    @uiuxdesigner101 9 หลายเดือนก่อน +2

    When your full course is coming out?

    • @framer.university
      @framer.university  9 หลายเดือนก่อน +3

      2024! Stay tuned! 🫶

    • @sheryarsyed-i5o
      @sheryarsyed-i5o 2 หลายเดือนก่อน

      gando, finish the old videos first

  • @UniStudioTV
    @UniStudioTV 9 หลายเดือนก่อน +1

    Any idea to add smooth transition to it?

    • @framer.university
      @framer.university  9 หลายเดือนก่อน

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

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

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

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

      For each scroll interaction*

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu 9 หลายเดือนก่อน

    Awesome 😮

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

    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  7 หลายเดือนก่อน

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

  • @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

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

    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  7 หลายเดือนก่อน +1

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