Integrating your RIVE Animations on the Web!
Вставка
- Опубліковано 31 лип 2024
- bit.ly/3mEJWp7 - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com
-- Today, I'm going to show you how to take the Rive animation we created from a week ago, and get it implemented on the web with fully interactivity through JavaScript.
Watch the first lesson here:
• Create the Most AMAZIN...
Codepen demo for this project:
codepen.io/designcourse/pen/b... (not responsive!)
rive.app/
0:00 - Introduction
1:02 - An Awesome Offer
1:40 - Rive Project Overview & Exporting
3:28 - Integrating the Rive Web JS Library
4:25 - Writing the HTML
5:50 - Writing the CSS
7:18 - JavaScript
20:46 - Final Project Preview
20:59 - Final Thoughts
#rive #javascript #animations
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! - Навчання та стиль
"How do you get this on the web tho?" ^^^-- Your answer!
Web3
Rive should include this video in their docs. Excellent video answering/addressing literally the most important question I had for Rive as a whole. Linode shirt and non-default editor theme made me instantly know this would be worth watching.
Super excited about testing this out! You killed it Gary!
Such an awesome music background and the video! One can see, that you put your heart into this. Respect!
Ah thank you, taking a quick look at the docs, I was confused if rive worked on static pages or not. This really cleared that up. Must give learning Rive a go!
I feel really lucky to find this! Thank you so much for creating this cool tutorial!
Awesome! Must recommend this to my friends 😁 Thanks again !
Always something new♥️
Nostalgia of the good old flash days...
Awesome!!
"always read the docs"
- someone who is wise.
thank you!
Let’s goooo!!!!!
Awesome Awesome STUFF✌️
Love it
Thanks 🙏👍
Thanks 👍👍👍👍
This is cool, I wish Rive would let us bring in our own SVGs and such like Bodymovin/Lottie. This appears to be a lot easier to handle.
FInally, this is very helpful video
Hey, great tutorial, thanks!
I had a quick question: is it possible to embed the .riv file into the html file to have a self contained html file?
😀 Genial
How do I make the RIve animation scale according to the window size
hello!
I'm researching if the animation can be edited in code using id or something to change the colors, maybe someone knows?
0:13 That is me 👀
good job
What your vscode theme?
awwwwwwwwwesome...... stuff 😋😋
i wish to be able to do all that one day .. insha ALLAH
the code itself doesn't look great, but the tutorial is great!
Thank you for your tutorials on rive!
Is there a way to add the .riv files/animation into websites without doing code? For an animator who wants to show and make sure the files are working as intended before handing them to coders.
The intro is always epic. how are you doing this??
Huh? A video camera 😂
@@DesignCourse lol. you really are a creative guy ♥️
If I send a .riv file to a developer, can they figure out on their own the Inputs/Listeners/StateMachines in the code?
nice kemper
Can you do responsive design with rive?
👍👍👍👍
I would have put you 2 thumb up if youtube allowed it :-D
Hi❤
At 8:35 I just laid down and cried. =[
5th
Much simpler to just use lottie files
Do i get adsense approval if i build a 3d website like Bruno Simon ???? Please answer ASAP.
what a horrible background music