Rolling Text animation in Framer | Step-by-Step No-code Tutorial

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

КОМЕНТАРІ • 61

  • @Mousymusic
    @Mousymusic 10 місяців тому +2

    It’s pretty much like figma, I am new to framer will try these cool stuff thank you.

    • @tonjrv
      @tonjrv  10 місяців тому +2

      Totally! If you know Figma, Framer shouldn't be too hard for you. Good luck! 🙌

  • @orishinaogunro
    @orishinaogunro 10 місяців тому +2

    This was very helpful. It helped to incorporate life into my new design. Thanks!!!!

    • @tonjrv
      @tonjrv  10 місяців тому +1

      Great to hear that! 🔥

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

    This is amazing! Thanks for sharing!

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

      Awesome to hear that mate! 🔥

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

    That was awesome.Thanks for the vid!

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

      No worries, awesome to hear that you enjoyed it 🔥

  • @joninsust
    @joninsust 11 місяців тому +1

    This is excellent!

    • @tonjrv
      @tonjrv  11 місяців тому

      Thanks a lot! 🙌

  • @bakiKaradeniz
    @bakiKaradeniz 15 днів тому

    Great

  • @prominer2001
    @prominer2001 11 місяців тому +2

    genius!

    • @tonjrv
      @tonjrv  11 місяців тому

      Thanks! 🫡

  • @leslie8
    @leslie8 10 місяців тому +1

    Subscribed! Thank you 🙏

    • @tonjrv
      @tonjrv  10 місяців тому

      Awesome to hear that! 🙌

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

    Really good, and easy one

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

      Awesome to hear that mate 🔥

  • @RoganpodcastReview
    @RoganpodcastReview 11 місяців тому +1

    Pretty cool

  • @mubindid
    @mubindid 11 місяців тому +1

    Awesome!!! You got a new Sub!!!

    • @tonjrv
      @tonjrv  11 місяців тому

      Thanks man! I appreciate it 🙌

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

    very cool, thank you

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

      No worries, Glad you liked it! 🙌

  • @avelinileva
    @avelinileva 11 місяців тому +1

    Great!

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

    Great one

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

      Thanks a lot mate! 🔥

  • @arra6531
    @arra6531 8 днів тому

    thanks for the tutorial! i have a question though, is there a way for it to only start rolling when layer/section comes into view? because im trying to apply it to my 2nd section

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

    Hi! Thank you for the quality content. Do you know how to apply this effect to a sentence that contains several lines? Since in this case, it is not possible to interchange the place letters because it completely distorts the sentence 😬 it seems to me to have already seen this effect on sentences, there must be a technique 🙏🏼 thank you in advance!

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

      Thanks a lot! 🔥
      I haven't tried it myself on multiple lines, but you could try stacking the components on top of each other and that could work 🙌

  • @thewebstylist
    @thewebstylist 11 місяців тому +1

    Curious do you sell your awesome styles to save us time bro?

    • @tonjrv
      @tonjrv  11 місяців тому +2

      You can actually find the free Remix link for these projects from the video description! ✌️
      Also, I have created few Framer templates as well that you can find from my store: tonjrv.lemonsqueezy.com/

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

    Bro how did you enlarge your your cursor and add this smooth zooming? Its awesome🎉

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

      Check out: www.screen.studio/
      It's super simple to use! 🔥

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

      @@tonjrv thanks brother!!

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

    Thanks alot, it was really helpful. Is there a way to loop it? I am trying the loop effect but it's not working out.

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

      Awesome to hear that! 🔥 I don't have a straight answer but I think you could be able to achieve to loop it if you don't create a component, but only create one frame and directly in the canvas add loop effect into it with linear transition! I can try to give this a look also at some point. :)

  • @eva-kant
    @eva-kant 7 місяців тому

    hello this is perfect, how do we change the text?

    • @tonjrv
      @tonjrv  7 місяців тому

      Happy to hear that! 🙌 Just repeat the steps but use different text in the beginning. :)

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

    I did it in two hours

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

      Awesome! 🔥

  • @kapp9517
    @kapp9517 6 місяців тому +1

    Hi I'm new to this somehow I don't have Appear option in the interaction section

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

      Hi. If you open the interaction menu the appear option should be under "On" dropdown. Let me know did this help ✌️

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

      @@tonjrv I only have tap, tap start, mouse enter and mouse leave options available

  • @rjtdas
    @rjtdas 10 місяців тому +2

    Is there a way to export as react js code?

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

      did you find out more about this? please do share if u can

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

      Unfortunately at the moment I don't think that's possible.

  • @Ekko-d7o
    @Ekko-d7o 9 місяців тому

    really nice , how to impolement this in website ?

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

      Happy to hear that! You can use this on any Framer website.
      Just remix the project from this link: framer.com/projects/new?duplicate=yceICVsaZ8Zpe9t6uHr9&via=tonjrv
      Publish it, and it's live on real website! 🔥

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

    I tried today but there is no appear option in framer now.

    • @tonjrv
      @tonjrv  3 місяці тому +1

      Hi! Appear option should be visible when you select element and press from "Effects" on right-side panel. Let me know if you still have this issue. ✌️

    • @geekhacksandtricks
      @geekhacksandtricks 3 місяці тому +1

      Thanks for your response bro. I got it now

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

    Can we make this with loop?

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

      I think you could be able to achieve to loop it if you don't create a component, but only create one frame and directly in the canvas add loop effect into it with linear transition! 🚀

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

    Effects are awesome and all that.... until they hurt SEO

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

      Great call! Luckily there's always different ways to optimise SEO 🙌

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

      you do not want to do it with H tags, google will have a hard time understanding the content.@@tonjrv

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

      instead use images as svgs, taking in consideration that they can help SEO 🙄

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

      @@dangermoss if its one that they may search it defo is

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

    하얀배경에 하얀글자.....

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

      안녕하세요, 이는 Framer의 기본 테마를 사용했기 때문이며 흰색 텍스트는 어두운 배경에 사용되도록 의도되었습니다. 텍스트 색상을 원하는 대로 변경할 수 있습니다. ✌️

  • @mr.fanstastic9010
    @mr.fanstastic9010 4 місяці тому

    Have you ever asked your viewers if there is any
    errors of something they need help with?

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

      I'm always happy to help and lots of people are asking for some specifics, so if you have any question don't hesitate to ask. 👍