Applet Orchard

Guest Tutorial #2: Web Animations and Mo.js with Sarah Drasner

[ad_1]
In this guest tutorial, Sarah Drasner demonstrates how to use the Mo.js library to create a smooth colorful “burst” animation in the browser.

Sarah is an award-winning Speaker, Consultant, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s given a Frontend Masters workshop on Advanced SVG Animations, and is working on a book for O’Reilly on SVG Animations. She’s formerly Manager of UX Design & Engineering at Trulia (Zillow). Last year Sarah won CSS Dev Conf’s “Best of Best of Award” as well as “Best Code Wrangler” from CSS Design Awards. She has worked for 15 years as a web developer and designer, and at points worked as a Scientific Illustrator and a Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini. Sarah has also taught a literacy program for the Cartoon Art Museum in San Francisco.

Source code:

Mo.js:

Sarah Drasner’s website:
Twitter account:
Web Animation Workshops:

For more Guest Tutorials and Interviews:
For more Coding Challenges:

Help us caption & translate this video!

Posted

in

by

appletorchard

Tags:

Comments

27 responses to “Guest Tutorial #2: Web Animations and Mo.js with Sarah Drasner”

  1. Will Cavalcanti Avatar
    Will Cavalcanti

    very very interesting, thanks for the tutorial, and for the nice dance at the final Dan

    Reply
  2. Nick Bell Avatar
    Nick Bell

    Awesome tutorial Sarah! This was really fun to watch.

    Reply
  3. qqwe61946 Avatar
    qqwe61946

    Babel can use rest parameter and 3 bot syntax. but current chrome and Edge browser not default support . but we can marge object{} by Object.assign method.

    const circ = new mojs.Shape(Object.assign({}, circ_opt));
    const circ2 = new mojs.Shape(Object.assign({delay:500}, circ_opt));

    Reply
  4. billgohan Avatar
    billgohan

    Sarah rocks! 😀

    Reply
  5. Filipe Ribeiro Avatar
    Filipe Ribeiro

    Can I use an animation created with mojs as my logo or its creations are protected with a license?

    Reply
  6. Fayola Online Avatar
    Fayola Online

    Mo.js looks hype. Makes me want to play around with Javascript now.

    Reply
  7. Robin Atherton Avatar
    Robin Atherton

    Can you show how you use mo.js in the processing editor or j5 editor? I have problems including the library.

    Reply
  8. alonetrio Avatar
    alonetrio

    what about a CODEF presentation ?? http://wab.com for the demo gallery.

    Reply
  9. Brian sofa-king Avatar
    Brian sofa-king

    i really enjoy this video.

    Reply
  10. Craig Avison-Maher Avatar
    Craig Avison-Maher

    This video was kinda fun. Watching all the way through was really pretty. And writing this comment was kinda fun.

    Thank you for the demo 🙂 I may just use mo.js on the next exciting client I get

    Reply
  11. xylofiso Avatar
    xylofiso

    Don't know what this codepen website is, but I signed up for it, typed in the code exactly how Sarah has it, and I got nothing.  Oh wait I think I know what it is.  Sarah….your head is in the way….nevermind, I clicked the link.

    Reply
  12. Tom Woehlke Avatar
    Tom Woehlke

    Is there a way to make mo.js store things like the cycle number and use that value to make the animations evolve over time? Or ping websites and use response time variables in the animations?

    Reply
  13. UI Developer Avatar
    UI Developer

    Yes mo.js is good after a long time of boring p5.js videos this guest video is refreshing.

    Reply
  14. Andres Garcia Avatar
    Andres Garcia

    i get an error message with CodePen.IO as well as atom and it has to do with the const being available in ES6 … am i doing exactly whats on the tutorial and receive those errors

    Reply
  15. Maher F Avatar
    Maher F

    I tried working with mo.js after watching this video, it was a nightmare to get it working! docs are not completed yet and It doesn't work if you include the js in the header. took me too long to find the work around.
    diffidently a great project tho, I got it working now and been playing around with. so cool!

    Reply
  16. Akshay Kumar Avatar
    Akshay Kumar

    Hi Daniel, this is pretty stupid question but I'm a newbie at javascript & just got started with it but could you tell me why use Mo.js if you have P5.js that you are yourself working on developing, I mean I get that Mo.js has pretty good support for motion graphics, I went to their site mojs.io & saw the example on the bottom, it was great & all but the javascript that it had was mind boggling, I mean I know how complex coding can be but that was insane, again just a newbie, it would be so nice if you could just clear these few things out for me.

    Love your content btw, currently learning javascript from your older videos, I have a great time learning from them 🙂

    Reply
  17. David Johnston Avatar
    David Johnston

    How I wish web browsers were built to never ever allow animation on web pages. JS in SVG is the new attack vector for all you aficionados of browser vulnerabilities.

    Reply
  18. Angus Miguel Avatar
    Angus Miguel

    can i set a burst to a function and bind it to a , i.e., click?

    Reply
  19. onlyme0349 Avatar
    onlyme0349

    "You should have a shape that's maybe erect"
    I already like this girl 😉 2:50

    Reply
  20. Barbara Corcoran Avatar
    Barbara Corcoran

    Awesome video, I think I need to start learning to code.

    Reply
  21. Dark_R3puls3r Avatar
    Dark_R3puls3r

    Does Daniel have an e-mail or something to contact him?

    Reply
  22. Blue Eagle Avatar
    Blue Eagle

    @Sarah Drasner:
    Thank you for coming on to share your knowledge and helping us learn more.

    One thing I missed right from the get-go was an introduction to Burst, and what the various parameters were. All I got was enter this, and use these parameters, without getting to know what the parameters were specifying.

    Also, the entire walk-through seemed a bit rushed. Don't be afraid to slow down and take pauses. At the pace you're going at here, there's waaay too much information for me to absorb in that short amount of time.

    Reply
  23. Sr Bob Avatar
    Sr Bob

    One thing I've dreamt for years is that P5.js and Processing could somehow implement some of the 12 principles of animation for motion graphics.
    Looks like mo.js is coming pretty close to making my dreams come true.

    Reply
  24. Caraxian Avatar
    Caraxian

    i love this channel. even when watching videos about things i dont usually care about ( graphics this time ) i learn things.

    Reply
  25. Pablo Silva Pazos Avatar
    Pablo Silva Pazos

    I love that Sarah codes like at a normal human being speed. Daniel makes me think Ill never be that pro. Jokes aside, congratulations to both of you, I love these kind of live-coding videos. 🙂

    Reply
  26. Ryan McMullen Avatar
    Ryan McMullen

    awesome video! can't wait for future guests

    Reply
  27. Connor Edwards Avatar
    Connor Edwards

    Bit boring in my opinion. Anybody can make nice looking animations using a framework. It would be more interesting if it were done from scratch using a raw HTML5 canvas.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *