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'
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.
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?! 😄
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
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!
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.
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?
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!
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.
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 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 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!
@@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 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.
can you make the lottie animation as a background and scale down the frame?
Wow This is exactly What I want to try!! Thank you so much!!
Thanks for this. Exactly what I was looking for.
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'
Sir, you are a legend. Thank you for your time.
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.
Oh my gooooood! Thank you so much!!!! you helped me so hard! Thumbs up, Subcribtion done!
ありがとう！
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?! 😄
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.
you are the best thank you!!!! i was searching for it
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
Yea
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!
Would love to see how you did the text animation too! Can you share the AE File or could you create a tutorial?
@VandrapMedia It’s a simple fade effect with layer masks. Nothing fancy at all
thanks@@DesignPilot
Nice and useful toturial 🙏🏻😀❤️
Why don't you create webflow animation course? I would be very helpful.
There are plenty of tutorials already
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.
There is no max duration or FPS. Whatever is a comfortable file size.
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?
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!
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.
@@DesignPilot you're right! my bad hahahaha did it here, was coming back to comment, but you were faster! cheers! :)
thanks dude
why does scroll animation play when scrolling backwards.... i want it to play only once..
It won’t work like that
@@DesignPilot ye just checked both samsungs' and apples scroll animation and they play backwards as well, ig thats ok 🤔
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?
Nope I’m not aware
@@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?
@arturbobinski2287 not sure
This is amazing ❤
Hi Chetan, Can you build a website for me?
🔥
so much useful tutorial for me thank you chethan
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?
Try with a few small images and probably 1080p resolution
@@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!
@@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.
@Oday_tone Not sure. You can reach out to the LottieFiles team and raise an issue
@@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.
legend
Hi Chetan, Is it possible to make the exact thing on rive and made it on framer?
Nope