Create APPLE’s SCROLL EFFECT in Webflow using Lottie Files and After Effects!

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

КОМЕНТАРІ • 48

  • @Infoatcanersoez
    @Infoatcanersoez Рік тому +2

    Sir, you are a legend. Thank you for your time.

  • @thejamesnewman
    @thejamesnewman 11 місяців тому +3

    Thanks for this. Exactly what I was looking for.

  • @hiddenheartbehindhurtfulwords
    @hiddenheartbehindhurtfulwords 4 місяці тому +2

    Wow This is exactly What I want to try!! Thank you so much!!

  • @ZEB005
    @ZEB005 Місяць тому +1

    ありがとう!

  • @user-lw1ex2oo8p
    @user-lw1ex2oo8p Рік тому +1

    Bro,
    This is super lovely. I spend almost two days breaking my head this video solved most of the problems i was having with lottie. Thank you brother'

  • @moisescarmona5718
    @moisescarmona5718 5 місяців тому +1

    you are the best thank you!!!! i was searching for it

  • @ronnyt5914
    @ronnyt5914 Місяць тому +1

    thanks dude

  • @uxalok
    @uxalok Рік тому +1

    This is amazing ❤

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

    Oh my gooooood! Thank you so much!!!! you helped me so hard! Thumbs up, Subcribtion done!

  • @frictiongraphics116
    @frictiongraphics116 Рік тому +1

    Nice and useful toturial 🙏🏻😀❤️

  • @aryanagrawal1011
    @aryanagrawal1011 Рік тому +1

    legend

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

    can you make the lottie animation as a background and scale down the frame?

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

    Can you show us how design cool website putting some texts like you? You design skill is cool I don't know where should I put my text on site to be looked cool.

  • @learncode5110
    @learncode5110 Рік тому +3

    Hey Hi Chetan! awesome tut just loved your explanation and finally learned the apple scroll was much grateful, I just wanted to know how to animate the text effect as you have done in after effect have you teach such text animation in lottie course? coz that text effect is super dope!

    • @VandrapMedia
      @VandrapMedia 7 місяців тому +1

      Would love to see how you did the text animation too! Can you share the AE File or could you create a tutorial?

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

      @VandrapMedia It’s a simple fade effect with layer masks. Nothing fancy at all

    • @learncode5110
      @learncode5110 7 місяців тому +1

      thanks@@DesignPilot

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

    Awesome Video, thank you! Any chance you have a tutorial how to do this not using Webflow but rather a normal HTML/CSS style build site like WP or similar?

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

      Nope I’m not aware

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

      @@DesignPilot got it, thank you. I've been running into an issue with this however, keep rendering and it gets to 100% after all images but then errors with out of memory, line 88. Did you ever experience this or know whats wrong?

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

      @arturbobinski2287 not sure

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

    Thx for explanation! I have question regarding file size and loading time of the website. I tried to export 60 frames of animation from C4D and put it in the after effect, export everything like you said with transparent background, but size of json file was 35MB and this cannot be uploaded the webflow. Resolution was 1920x1080px. What do you think what is the best way to do it, because Apple is doing even longer with more frames and still is working fine?! 😄

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

      I would say reduce the fps to 24 or 30 and the resolution as well. Apple does things a bit differently so they are able to make it work.

  • @ashokreddy41
    @ashokreddy41 Рік тому +1

    so much useful tutorial for me thank you chethan

  • @another.designer
    @another.designer Рік тому +1

    Loved this tutorial.
    I Have a question.
    What should be maximum duration & FPS of a video/animation to use for lottie?
    Because a video of 60FPS will take more render time, bigger file size and more CPU than a video of 30FPS.

    • @DesignPilot
      @DesignPilot  Рік тому

      There is no max duration or FPS. Whatever is a comfortable file size.

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

    Is there a way to make this sticky eg 2 columns, one with the animation on the left and the text changing on the right. So they both change when the user scrolls? Thanks

  • @smooothslice
    @smooothslice Рік тому +1

    🔥

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

    It doesn't create a proper lottifile, and when I try to render it, all I get is an incredibly broken example picture. How do I fix this?

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

      Try with a few small images and probably 1080p resolution

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

      @@DesignPilot Thank you for your quick reply, your tutorials are a real treat for me.
      I think it's because in your other lottiefile tutorials you unchecked the option to include images and render them, so when I followed that, I experienced the image breakage.
      I'm currently testing with 960*540 resolution. If it works, I'll try again at 1080p. Thanks!

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

      @@DesignPilot I think it's coming to the end of the render and idling...
      Do you have any tips or tutorials on how to make things smoother when it comes to making an imagesequence into a lottiefile?
      I mean, like a tutorial to optimize it.

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

      @Oday_tone Not sure. You can reach out to the LottieFiles team and raise an issue

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

      @@DesignPilot Now I realize that with just 40 image sequences, the lottiefile is eating up 50% of my Ram and becoming unresponsive at the end of the render...
      Does this happen often? It's only 40 images at 1080p.

  • @TiagoRosa
    @TiagoRosa Рік тому +1

    not sure why you put the 500vh. I believe in webflow when you add the Lottie and create the scrolls animation, you have to do nothing else. right? ;) great content, btw!

    • @DesignPilot
      @DesignPilot  Рік тому +1

      If you want to trigger the animation AS YOU SCROLL, you need to have enough amount of scroll area. A Lottie basically a div and just plays the animation even if you don’t scroll.

    • @TiagoRosa
      @TiagoRosa Рік тому +1

      @@DesignPilot you're right! my bad hahahaha did it here, was coming back to comment, but you were faster! cheers! :)

  • @playpiano2264
    @playpiano2264 Рік тому

    Hi Chetan, Is it possible to make the exact thing on rive and made it on framer?

  • @sykowhite9465
    @sykowhite9465 Рік тому +1

    why does scroll animation play when scrolling backwards.... i want it to play only once..

    • @DesignPilot
      @DesignPilot  Рік тому

      It won’t work like that

    • @sykowhite9465
      @sykowhite9465 Рік тому +1

      @@DesignPilot ye just checked both samsungs' and apples scroll animation and they play backwards as well, ig thats ok 🤔

  • @adnanmehedii
    @adnanmehedii Рік тому +1

    Why don't you create webflow animation course? I would be very helpful.

    • @DesignPilot
      @DesignPilot  Рік тому

      There are plenty of tutorials already

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

    Did everything the way you did it but my render freezes at 100%. I thought it was still rendering so i waited 2 hours but nothing happens. Anyone else getting that problem?

  • @mcaniolan3874
    @mcaniolan3874 Рік тому

    Hi Chetan, Can you build a website for me?