- 34
- 48 576
Pixeto
India
เข้าร่วมเมื่อ 17 ก.พ. 2023
Not Your Average Design Agency
Let's chat: hey@pixeto.co 📩
Let's chat: hey@pixeto.co 📩
Why Unicorn-studio is the Future of WebGL Animations in Webflow!
Learn how to create stunning WebGL animations without writing a single line of code using Unicorn Studio! In this tutorial, we’ll explore the basics of this powerful no-code WebGL editor, break down its interface, and show you how to integrate your animations seamlessly into Webflow projects. Whether you're a designer or developer, Unicorn Studio makes it easy to add interactive and animated scenes to your websites. Don’t miss out on this game-changing tool for your Webflow workflow!
Demo landing page - unicorn-studio-demo.webflow.io/
Try unicorn studio- www.unicorn.studio/
More tutorial- www.youtube.com/@tryunicornstudio
Know more : www.pixeto.co/
📌 Don't forget to subscribe for more tutorials on Webflow, custom animation techniques, and essential digital marketing strategies.
👍 If this video helps you create immersive web designs, please like it and share it with your network of Webflow enthusiasts.
📣 Follow us on Social Media:
Webflow:
link.pixeto.co/webflow
LinkedIn:
www.linkedin.com/company/pixeto/?originalSubdomain=in
Instagram:
pixeto.co?hl=en
Awwwards:
www.awwwards.com/pixeto/
Dribbble:
dribbble.com/pixeto
#webflow #unicorn-studio #webgl
Demo landing page - unicorn-studio-demo.webflow.io/
Try unicorn studio- www.unicorn.studio/
More tutorial- www.youtube.com/@tryunicornstudio
Know more : www.pixeto.co/
📌 Don't forget to subscribe for more tutorials on Webflow, custom animation techniques, and essential digital marketing strategies.
👍 If this video helps you create immersive web designs, please like it and share it with your network of Webflow enthusiasts.
📣 Follow us on Social Media:
Webflow:
link.pixeto.co/webflow
LinkedIn:
www.linkedin.com/company/pixeto/?originalSubdomain=in
Instagram:
pixeto.co?hl=en
Awwwards:
www.awwwards.com/pixeto/
Dribbble:
dribbble.com/pixeto
#webflow #unicorn-studio #webgl
มุมมอง: 11 416
วีดีโอ
Webflow + Heatmaps: The Secret to Better Design & Conversions!
มุมมอง 227หลายเดือนก่อน
In this video, we reveal how to use Hotjar heatmaps to track user behavior and boost conversions on your Webflow website. From understanding what heatmaps are to setting them up and analyzing insights, we’ll walk you through the process step-by-step. Start optimizing your design today! Know more : www.pixeto.co/ 📌 Don't forget to subscribe for more tutorials on Webflow, custom animation techniq...
How to Migrate your Website to Webflow: Everything you need to know!
มุมมอง 3172 หลายเดือนก่อน
Ready to move your website to Webflow? Our complete guide has got you covered! In this video, we walk you through each essential step for a smooth Webflow migration-from planning and backups to restoring your CMS, managing SEO, and handling integrations. We also answer some of the most common client questions to ensure you’re prepared for a seamless transition. Topics Covered: 0:00- Inro 1:20- ...
Why Rive is the Future of 2D Animations in Webflow!
มุมมอง 13K3 หลายเดือนก่อน
Discover how Rive enables you to create lightweight, interactive 2D animations for your Webflow projects. Learn why Rive stands out from other tools like Spline and how to integrate it seamlessly into your website for a smooth user experience. Rive basic tutorial: th-cam.com/video/UNPgrK-qtsA/w-d-xo.htmlsi=YfDzyVahPl6DToPo Know more : www.pixeto.co/ 📌 Don't forget to subscribe for more tutorial...
No BS Image Optimisation For Webflow
มุมมอง 6063 หลายเดือนก่อน
How to Optimize Images for SEO in Webflow? Image optimization is crucial for boosting your website's SEO and performance, and in this video, I'll walk you through a simple, step-by-step process for optimizing images in Webflow. From exporting images in Figma to using Webflow’s built-in compression tools, adding alt text, and improving your Google PageSpeed Insights score, this tutorial covers i...
Webflow SEO: The Beginners Guide!
มุมมอง 2164 หลายเดือนก่อน
Webflow SEO for Beginners: How to Boost Your Rankings! Struggling to get traffic to your Webflow website? In this beginner-friendly guide, we'll teach you the essentials of Webflow SEO for Beginners. Learn how to improve your site’s performance, accessibility, and design for better rankings on Google. Whether you're new to Webflow or looking to optimize your SEO strategy, this video has actiona...
Webflow keyboard shortcuts 🚀
มุมมอง 5904 หลายเดือนก่อน
Boost your Webflow efficiency with these 5 powerful shortcuts! Whether you're wrapping elements, switching device views, or quickly duplicating classes, these tips will supercharge your workflow. know more- www.pixeto.co #webflowtutorial #webdesign #webflow
Dominate Webflow with These 10 Expert Custom CSS Tips!
มุมมอง 3566 หลายเดือนก่อน
Dominate Webflow with These 10 Expert Custom CSS Tips!
Beyond Typed.js? Creative Text Animation in Webflow
มุมมอง 6706 หลายเดือนก่อน
Beyond Typed.js? Creative Text Animation in Webflow
Complete Webinar setup in Webflow | Google calendar invite from CMS | Zapier Automation | Pixeto
มุมมอง 1697 หลายเดือนก่อน
Complete Webinar setup in Webflow | Google calendar invite from CMS | Zapier Automation | Pixeto
How to Add Custom CSS animations in Webflow?
มุมมอง 3098 หลายเดือนก่อน
How to Add Custom CSS animations in Webflow?
Add Sound Effects To Your Webflow Website Using Howler JS!!
มุมมอง 1.3K8 หลายเดือนก่อน
Add Sound Effects To Your Webflow Website Using Howler JS!!
How to Add Social Sharing Buttons to your Blog Page in Webflow?
มุมมอง 9769 หลายเดือนก่อน
How to Add Social Sharing Buttons to your Blog Page in Webflow?
Website Design for SaaS Business | Case Study | Pixeto
มุมมอง 211ปีที่แล้ว
Website Design for SaaS Business | Case Study | Pixeto
Easy Pricing Table on Webflow (With and Without Code) | Pixeto
มุมมอง 2Kปีที่แล้ว
Easy Pricing Table on Webflow (With and Without Code) | Pixeto
Smooth Webflow Reveal Animations Clonable | Pixeto
มุมมอง 10Kปีที่แล้ว
Smooth Webflow Reveal Animations Clonable | Pixeto
Auto Pause Vimeo Slider with Veenu Jangra | Pixeto
มุมมอง 408ปีที่แล้ว
Auto Pause Vimeo Slider with Veenu Jangra | Pixeto
Lmk if you would be interested in connecting with a collective of designers, DEAD Designer Society (Dedicate Everything And Deliver) . My goal is to have a designer of every niche/category, we work heavily on culture shifting projects, help each other with whatever is out there wheelhouse. It’s kind of the reason I started connecting the dots, we can’t know it all but we could all know each other, lmk 🙏🏼 appreciate you regardless
Why are there only 28 "likes"??!! Incomprehensible... Thank you so much for sharing your knowledge and this service with us!!!! I hope you get a lot more "likes" down the road! Bonne continuation, and I look forward to seeing more tutorials on your channel... And by the way, all the best for 2025!
Borhiya video
Luv to see this working w WordPress based sites!
Amazing ❤
Does it give the code?
Yes, you can get the code when you are in the premium plan.
These are the effects that pretty much everyone has been waiting for, no question about it. Once they drop for the public, designers are gonna need to get creative to make their versions stand out, since they’ll be popping up everywhere online.
Great work on the tutorial! Loved hearing about the new tutorial and your examples are great for explaining how it works.
will also work with web gpu ?
Does this do physical gravity stuff with 3d elemtns
Great question! Unicorn Studio focuses on creating WebGL animations and effects, but at the moment of recording this video, it doesn’t support physical simulations like gravity elements.
Thanks a lot for the tutorial! Is there any option to keep the background music playing when user move to different page accross the website? And also how to make the song play again after it ends? If you could help with that I would be very grateful!
I'm assuming you're from Assam. This content is fire! Pls keep em coming bro!
Great content, best of luck with views & subs, matter of time..
Why use hover when hover state is not available on mobile browsers??
so you need to know coding to use this.
Those effect are dianolical wild
Nice, that's cool tool but not fully live for all.
How to get access to Unicorn studio?
can i export it to elementor ?
Yes, you can export it as a . Know more - unicornstudio.notion.site/Embedding-a-scene-on-your-site-9d7ac17966e547a094ef01f0ae692a92
great job is it possible to do in rive some simple vector action that we can do in figma, illustrator or inkscape : some boolean path operation like here th-cam.com/video/Xr8HqSwqn2E/w-d-xo.html or repeat an Object Around a Shape like here th-cam.com/video/3jve45Z60iU/w-d-xo.html in rive ?
Hi, thanks for the video. Questions: how does Unicorn perform? Speed? Is it possible to customize part of the workflow by using JS? Thanks
Unicorn Studio performs well in terms of speed. You can customize the workflow using JS, especially with the pro plan, which lets you modify shaders and filters.
Would it be impossible for you to create a tutorial on a smooth webGL page transitions with Webflow. CMS projects using barba and GSAP?
Thanks for the suggestion! We actually have some exciting plans for GSAP animations, including smooth page transitions. Stay tuned for upcoming tutorials!
@@pixetoco Yes please do series for gsap, make it a playlist
Amazing work! Been trying to figure this out for webflow for years!
Awesome bro❤
Hey man you’re creating great stuff 👍 Could you please create a video on how to get clients for Webflow or your entire agency process?
Definitely-this is something we have in the pipeline. Stay tuned!
Link
here- before-after-image-pixeto.webflow.io/
Can I do the same Webflow free version?
No, you'll need to add one tracking code to the page/project settings, and in the free version of webflow you can't do that.
Amazing video! When I submitted my form to test it, it's labelled as "Field 3" for the date picker. Do you know how to change that? There was a name/text input box but it said I had no child elements or invalid tag :(
First off, really top tier production. As for the tutorial, I think using a simple button hover state as the first example may cause confusion as to its usefulness bc CSS can handle that. What i feel would be great to see (maybe in the next video?) is a direct comparison so the old way of building out and implementing such complex interactions. Thanks dude 3:36
This video is meant to be an introduction to Rive, so we started with a simple hover state to keep it approachable. Toward the end, we did give some context about the complex interactions Rive can handle. That said, your idea for a direct comparison is great-we'll definitely look into that for future videos! In the meantime, for more in-depth tutorials, you can check out Rive's TH-cam channel. Appreciate the suggestion!
ah yes, 2024, the year of AI slop
Ah, another creator going the AI route, we've thought about it too. For us, it's more of a tool to save time on setting up the space, camera, lighting, and the many other things that go with it. Just experimenting to see if it's something worthwhile 🤔
@@pixetoco I just think I'd rather you not record yourself doing anything and only make a short video with just the visuals (which is exactly what you did for the second half of this video), if your worry is really about saving time on setting up the camerawork. Maybe your viewers don't care about it, or would rather see an AI person talk to them instead of just showing visuals, but if that's not the case then this could feel less genuine.
is it more lightweight than lottie, because lottie animations have been really staggering on my website..
Yes, its very lightweight.
Link
here- webflow.com/made-in-webflow/website/before-after-image-pixeto
Thank you broh. interested in Rive✨ wanna dive in. subscribed 👍
What about adding a simpple email link?
7:00
Hi! I want the cloneable!
Here- webflow.com/made-in-webflow/website/before-after-image-pixeto
Thanks bro❤
Thank you for the lesson! Maybe you know how to fix problem of adding Rive to Webflow - in Webflow animation plays only with mouth pressed, but inside Rive state machine animation plays on mouse hover (not click). And second problem - the animation of following mouse (which is also plays inside Webflow only with mouse button pressed and not playing on hover) plays only inside artboard. Is that it? I mean to make character eyes follow mouse in any place of the screen I must create 1920x1080 artboard for that character? Or maybe following distance may be expanded inside Webflow somehow?
For the first issue. In Rive, try adjusting the State Machine triggers to ensure they are set for 'hover' (double check the listener). And for the second one, Yes. You'll need to use the full width artboard to have that effect because artboard size does influence the range.
what if you need to add button that will provide the copy link of that blog?
You can create a function [eg: function copyToClipboard(text) { navigator.clipboard.writeText(text) .then(() => { alert("Link copied!"); }) .catch((err) => { console.error("Failed to copy text: ", err); }); }], You would then call copyToClipboard(window.location.href); to copy the blog link. You can learn more here- www.w3schools.com/howto/howto_js_copy_clipboard.asp
hi, have you been able to figure it out?
Thanks a lot brother. This was really great
Yeah f u Rive. 32 dollars per month and this stupid seat model again. Makes me so angry
Hate Webflow. As anti-consumer as it gets
I had a different impression so would be interested to hear your opinion
Top video kept it simple! Getting a follow from me.
hi, what if I want it to be center aligned? I can't make it work. Thank you
Is there a way to keep the original aspect ratio of the Rive asset, just like an image? sizing is so frustrating.
Yes, you can maintain the original aspect ratio of a Rive asset! Rive provides layout options for scaling and fitting animations. You can check out this guide for detailed info on how to control the sizing: help.rive.app/runtimes/layout. Using the 'Fit' and 'Alignment' settings should help keep the aspect ratio intact.
pls no bg music
hi. great short tutorial. May i know is it the Rive free or need to subscribe plan?
Thanks for watching! Rive offers a free plan, which includes access to most features. However, if you need more advanced features such as team collaboration, version history, and larger file exports, you might want to check out their paid plans. You can find more details on their pricing page.
@@pixetoco thank you for the info. I want to try out free plan first and will think about the subscription later.
Thanks
Thanks for the video! Will give it a try soon.
Great video! how do we change the place holder text?
Just add one attribute value="YYY-MM-DD" (replace YYY-MM-DD with your desired date). Thanks for watching.