GPT-4 and Framer: Create Framer Components with AI

[@roxDELETED]

This is pretty powerful! Thank you for sharing your gold.

[@Zubairkhan-rb1fx]

If i hv to vertically scroll for specific section not for overall page, how i can achieve that? It would be very kind of you, if you can give some hint. Thanks

[@chaya973]

When are you launching your website? I've looked at a lot of Framer tutorials and I like your teaching style. Would sign up if there is enough good content in order to build myself a nice portfolio or learn enough to freelance.

[@danhollick]

Hey, so the website is live at advancedframer.com but the course will be live in the next month or so. Maybe a bit longer depending on recording times. You'll definitely get enough out of it to learn to freelance.

[@mohamedabdelghanymustafa2939]

wow, greaaaaaat

[@alejandronoboa2402]

Can you make a video or recommend a method to make a working form in framer? I have been struggling with it and framer form choices are pretty limited, I tried to make a country selection camp for a landing page form and I couldn't find anything just a github made component but I couldn't place it in the form in framer

[@danhollick]

Hey! I actually just filmed a lesson explaining how to do this in my course, which will launch in the next couple of weeks. The method is pretty similar actually, we use GPT-4 to generate us a react form and then I show you how to customise it.

[@taunado]

Thank you

[@abdullahqureshi5]

Hey Dan, great video! How do we work with responsiveness in code components? Sometimes it does not work that well even with conditional styles for mobile, tablet and web.

[@danhollick]

That's a great question! It's actually quite tough because you can't easily use media queries. I actually need to do a bit more research on this!

[@abdullahqureshi5]

​@@danhollick Yes! I had some trouble with this. I am also exploring ways to make it work. Haven't really found someting concrete. We can't use external css and as you said can't use media queries. I tried to define widths and tried to play around but not much luck there. But still cracking at it.

[@yasaamoin4882]

Can you do a video on FramerGPT? It's either available to ChatGPT Plus users on a specific website or will be launching soon

[@pedrodegli]

Nice

[@jonardtirol4798]

Nice, Do you know how to also render 3d objects with threejs using code components? I have tried with gpt 4 but I have no experience fixing the errors

[@danhollick]

Yeah, I've done it once or twice. I don't have a simple example lying around but you can check out my remix link for this ASCII shader effect which uses threejs: three-ascii.framer.website/

[@phongho.design]

helpful 🫶

[@lovreperaic2757]

do you have solution to make lottie files play by scroll? nice tutorial btw!

[@aarav2shah]

hey Daniel, I can't preview my code, as the file is not showing up in the override section. Can you help me in this regard? thanks in advance.

[@danhollick]

Hey Aarav. When you say override section, do you mean the assets tab? Will need a little bit more detail.

[@aarav2shah]

@@danhollick Sure. In the assets tab, I can see my code override file that I created, but when I try to select it in the code override section, on the right hand side interface of framer (where all the options are), I'm unable to choose that code as a file and as override. Basically, I'm unable to preview that code. It'd be amazing if you could help.

[@danhollick]

@@aarav2shah that's because in this example we didn't create a code override, we created a code component. To use a Code component, you drag it from the assets tab on the left into your document. You can't use code components as code overrides.

[@AtomicPixels]

its now addPropertyControls and requires defaultProps to work

[@AndreasWalter1984]

Lmao a react solution for showing that scroll effect is like using magneto to sell one downloadable product. How about a small vanilla script? 😮

[@danhollick]

Framer is React based so its using react for everything under the hood.

[@marlonux]

Yeah try to understand a little of what something is before commenting on it. Framer is a react based publishing platform