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

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

КОМЕНТАРІ • 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 😊

  • @estate0007
    @estate0007 Місяць тому

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

  • @Finn_Maddy
    @Finn_Maddy Місяць тому +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  Місяць тому

      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 Місяць тому

      @@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 Місяць тому +1

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

  • @melinaelisabet9040
    @melinaelisabet9040 29 днів тому +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  29 днів тому

      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

    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  Місяць тому

      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 Місяць тому +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  Місяць тому

      @@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 Місяць тому +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  Місяць тому

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

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

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

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

      thanks! this one here: ua-cam.com/video/h8wa_qABv-o/v-deo.html

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

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

    • @andreaegli
      @andreaegli  Місяць тому

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

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

    keren sekali, love it

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

    Very nice! Love it

  • @zafit02
    @zafit02 Місяць тому

    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

  • @jamey7337
    @jamey7337 Місяць тому +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  Місяць тому

      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 Місяць тому

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

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

    very very Amazing Thank you

  • @nimade1
    @nimade1 26 днів тому

    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? :)

  • @izhaarmianbscs-1402
    @izhaarmianbscs-1402 29 днів тому

    amazing❤‍🔥

  • @pex-pl
    @pex-pl Місяць тому +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  Місяць тому +1

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

  • @ignacioalbertomansilladelr1621
    @ignacioalbertomansilladelr1621 19 днів тому +1

    where is the code?

    • @andreaegli
      @andreaegli  18 днів тому

      You can download the template, the code is on there

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

    Spectacularis !!

  • @Akram-y4e
    @Akram-y4e Місяць тому +1

    Hey, how it's going?

  • @Wares_hashimi
    @Wares_hashimi Місяць тому +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❤❤❤

  • @CJ-f7u
    @CJ-f7u Місяць тому +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 UA-cam created the scripts in his video a little while back and made the assets load asynchronously as well for websites.

    • @andreaegli
      @andreaegli  Місяць тому +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 Місяць тому +1

    Andrea....How cool your smile.