GSAP 3D MODEL IMPLEMENTATION ON A MINIMAL LANDING PAGE - Elementor Wordpress Tutorial Flex Container

Поделиться
HTML-код
  • Опубликовано: 21 янв 2025

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

  • @mustaphasekeur
    @mustaphasekeur Месяц назад +1

    Thank you for the simplicity of the explanation and putting the translation on your videos ✌🏼👋🏼, you deserve a subscription to your channel 😊

  • @izhaarmianbscs-1402
    @izhaarmianbscs-1402 Месяц назад

    amazing❤‍🔥

  • @dbruddy
    @dbruddy 2 месяца назад +1

    Very nice! Love it

  • @estate0007
    @estate0007 2 месяца назад

    I like your pullover. The colors are even matching to the wood and fabric of the chair 😄

  • @Finn_Maddy
    @Finn_Maddy 2 месяца назад +2

    I absolutely love your content! Have you considered creating a dedicated series on this topic? It’s in high demand right now, both in the company I work for and in my freelance projects. I’d love to explore it further and discover new aspects I might have missed. Your hard work and videos could gain even more traction with such a series!

    • @andreaegli
      @andreaegli  2 месяца назад

      Thank you so much! On the topic of 3D? I might because this video did very well, I was actually testing the waters to see if it's worth going a bit deeper on the subject cause I love it too ;)

    • @Finn_Maddy
      @Finn_Maddy 2 месяца назад

      @@andreaegli You're welcome! Yes, on the topic of 3D, It’s such an exciting area with so much potential! I think a series would be a hit, especially since you’re passionate about it. The demand is definitely there, and your approach could make it even more accessible and inspiring for people like me. Looking forward to seeing what you come up with! 😊

  • @erhamotionvideo7517
    @erhamotionvideo7517 2 месяца назад +1

    Apart from having programming skills, it turns out you are also a very talented artist

  • @mofunnel
    @mofunnel 2 месяца назад +1

    very very Amazing Thank you

  • @erhamotionvideo7517
    @erhamotionvideo7517 2 месяца назад +1

    keren sekali, love it

  • @teuccio73
    @teuccio73 2 месяца назад +1

    Spectacularis !!

  • @melinaelisabet9040
    @melinaelisabet9040 Месяц назад +1

    Hi Andrea! Thank you very much for your tutorials, I also loved your good vibes. You know, I uploaded a file of a notebook that a designer made for me, but I see that it's missing some covers or the buttons look weird. It shows me the program screen and it looks fine, but when I upload it, it looks ugly. Does the server need some extra resource? Is there some specific configuration that is needed? Or is it exporting it wrong?

    • @andreaegli
      @andreaegli  Месяц назад

      Thanks so much, Melina! I think I forgot to mention it. I used a plugin called file upload types to add my custom file type .glb and then just uploaded the file to the media library. It worked like a charm ;)

  • @marianturcek1867
    @marianturcek1867 2 месяца назад +2

    Hi Andrea. Very nice effect and great tutorial. I have a question. If I download a 3d model with animation from sketchfab, it won't show the animation. For example, a hummingbird in flight will appear on the web as a static 3D object. Can you please advise me if I need to modify the code or if it doesn't work in elementor? Thank you.

    • @andreaegli
      @andreaegli  2 месяца назад

      Hey! Thanks 😊 you need to download the file in .gib format and then upload it to the medial library in Wordpress. From there you can copy the file path and add it to the code snippet 😉 how this helps

    • @marianturcek1867
      @marianturcek1867 2 месяца назад +1

      @@andreaegli Hi Andrea. Understand, but elementor doesn't support native glb files. I uploaded it through the WP file manager plugin. Then I enter the path to the file, it displays it, but without the animation, as if it only loads the first frame. I don't know how to give him the play keys, or if there is anything else that needs to be added.. 🤷

    • @andreaegli
      @andreaegli  2 месяца назад

      @@marianturcek1867 ah, yes! I used file upload types plugin. This is the code snippet for the 3D model:
      this worked for me, without looking at your setup, I can't tell why is not working....

    • @marianturcek1867
      @marianturcek1867 2 месяца назад +1

      @@andreaegli autoplay animation-name="Running" and it works. Thanks Andrea. with this tip of yours, websites will have a completely different life. :) Have a nice day.

    • @andreaegli
      @andreaegli  2 месяца назад

      @@marianturcek1867 wooohhoo!!!! awesome! same to you ;)

  • @zafit02
    @zafit02 2 месяца назад

    Andrea, I tried the fix you uploaded for Lenis Scroll, but the CSS html { scroll-behavior: auto !important; } breaks the anchor links, it scrolls directly without smoothness

  • @maikuebel
    @maikuebel 2 месяца назад +1

    Great! What is the effect for the text "Collectible works....." ? Its not "HIGHLIGHT TEXT ON SCROLL", or?

    • @andreaegli
      @andreaegli  2 месяца назад +1

      thanks! this one here: ruclips.net/video/h8wa_qABv-o/видео.html

  • @-NAVEENRAJK
    @-NAVEENRAJK 2 месяца назад +1

    The content is great but how do you create the 3d model like which platform ?

    • @andreaegli
      @andreaegli  2 месяца назад

      You skipped the part where I was talking about that, watch the beginning of the video 😉

  • @ignacioalbertomansilladelr1621
    @ignacioalbertomansilladelr1621 Месяц назад +1

    where is the code?

    • @andreaegli
      @andreaegli  Месяц назад

      You can download the template, the code is on there

  • @nimade1
    @nimade1 Месяц назад

    Love the video!
    How is it possible to display it on mobile?
    When I try to load my site on mobile it just wont work - maybe you have a solution? :)

  • @jamey7337
    @jamey7337 2 месяца назад +1

    Might just be me, but how do you upload the file to wordpress? I've tried changing the .htaccess file and other methodes to try and upload the .GLB, but it doesnt work. (I hope you havent said this in the video.. I would be embarresed.. btw I love your videos!)

    • @andreaegli
      @andreaegli  2 месяца назад

      No, it's not just you :))) I think I forgot to mention it. I used a plugin called file upload types from wpforms to add my custom file type .glb and then just uploaded the file to the media library. It worked like a charm ;)

    • @jamey7337
      @jamey7337 2 месяца назад

      @andreaegli thank youuu!! Hahahah, have a nice day:D

  • @Wares_hashimi
    @Wares_hashimi 2 месяца назад +1

    Nice 🎉🎉 please tell me are you writing your code by chatgpt if you write with chatgpt please make tutorial for us how to write prompt for code❤❤❤

  • @pex-pl
    @pex-pl 2 месяца назад +1

    great tutorial - it's a pity that the size of .glb files practically eliminates the point of using them on mobile devices...

    • @andreaegli
      @andreaegli  2 месяца назад +1

      Thanks 😊 I’m sure there are workarounds to that, we just have to think outside the box 😀

  • @Akram-y4e
    @Akram-y4e 2 месяца назад +1

    Hey, how it's going?

  • @CJ-f7u
    @CJ-f7u 2 месяца назад +1

    This isnt GSAP, its 3.js ..
    GSAP cant render out models, you have to create the canvas , cameras , lights as well as their positioning , color casting and atmospheric elements .. it's all done in 3.js ..
    The assets are all game / VfX models and you have to use glb because its the smallest size for this models , the 1k texture packs are the smallest these can go to.
    A guy here on RUclips created the scripts in his video a little while back and made the assets load asynchronously as well for websites.

    • @andreaegli
      @andreaegli  2 месяца назад +1

      Are you referring to the example I showed? If so, I know it's three.js I already said that I'm working on smth similar but it takes time, I'm not a seasoned dev. Could you share the name of the guy with us?

  • @rajeshkurup-u8b
    @rajeshkurup-u8b 2 месяца назад +1

    Andrea....How cool your smile.