The Easiest Way to Create Staggered Letter Animations in Webflow

Поделиться
HTML-код
  • Опубликовано: 4 авг 2024
  • [ Get the cloneable ]
    webflow.com/made-in-webflow/w...
    Staggered letters and word animations are quite popular. I always created these with a duplicate of the original text, but Jan-Willem Wessels (thanks buddy!) shared a great technique with me that uses a text-shadow. It's not only easier, but also better for accessibility.
    [ Links 👇 ]
    CleverMellow: www.clevermellow.co/
    SplitType: www.npmjs.com/package/split-type
    GSAP: greensock.com/docs/v3/Install...
    Codesandbox: codesandbox.io/
    How I record my screen: www.screen.studio/
    [ Do you speak Dutch? 🇳🇱 🇧🇪 ]
    Join the largest and most vibrant no-code community!
    www.nocodecommunity.nl/
    [ My socials ✌️ ]
    Twitter: / iljavaneck
    Instagram: / by.ilja
    Awwwards: www.awwwards.com/ilja-van-eck/
    Webflow profile: webflow.com/@iljavaneck
  • ХоббиХобби

Комментарии • 19

  • @jonasarleth
    @jonasarleth Год назад +4

    The Text Shadow Trick is amazing!

  • @lukasrudrof4011
    @lukasrudrof4011 9 месяцев назад +1

    Very well explaned. Please more of this!

  • @aster.dunsmore
    @aster.dunsmore Год назад +1

    Loving these tutorials

  • @wearestudiotonic
    @wearestudiotonic 10 месяцев назад +1

    That text shadow trick is so smart! Love it.

  • @cr7ck5
    @cr7ck5 Год назад +1

    Super impressed with how consistent you've been since you started uploading. All quality tutorials as well!

  • @muktadirrudro7552
    @muktadirrudro7552 11 месяцев назад +1

    Great Explanation man. Would love to see more new stuffs

  • @Jack-hq8ce
    @Jack-hq8ce 9 месяцев назад +1

    You are a hero bro keep going your videos are magic

  • @dennissnellenberg
    @dennissnellenberg Год назад +1

    Keep them coming!

  • @dieg0liv
    @dieg0liv Год назад +2

    Wow, using text shadow to duplicate the text? Never thought about that! Very clever. Will definitely use this! Thanks for the tutorial!

  • @user-nh9lv1lk2v
    @user-nh9lv1lk2v Год назад +1

    Great tutorial, thanks!

  • @ben-celinski
    @ben-celinski 8 месяцев назад +1

    This is so clever! And very good tutorial, appreciate teaching slowly and step by step

  • @bamoj
    @bamoj Год назад +1

    Smmmmmarrrtttt af!
    thanks for sharing!

  • @Grifanos
    @Grifanos 10 месяцев назад

    So, cool approach, thanks for sharing with us 👍 Keep going!

  • @dickyafisena8595
    @dickyafisena8595 Год назад +1

    thank you for turtorial 🔥

  • @NoahShreve
    @NoahShreve 8 месяцев назад

    I've always made the wrapper just relative, set the duplicate to absolute and transformed it down 100%... but this text shadow method is genius

  • @learncode5110
    @learncode5110 Год назад

    Bro awesome please bring tuts animation using framer

  • @lommeldesignbranding6254
    @lommeldesignbranding6254 Год назад

    Loving this. But having an issue. When cloning the project, none of the effects carry over.
    Do I need to code everything from scratch, like you do here? (i know nothing of code)

  • @arnabiscoding
    @arnabiscoding Год назад

    great video! You should increase your voice volume.