hey, Issey. i don't usually leave comments but...i just randomly got here and i can say that this video brought me joy. don't stop posting, and advertise as much as you can - there are a lot of "creative free soul birds" out there, who doesn't know where to start - and your content might be a beautiful beginning for them. keep up the good work!
I want to watch more these kinda videos! It totally blew my mind 🤩🤩 I'm web developer but there's no one to teach like this awesome animation. So I'm happy to know your channel 😁😆
I'm working with GSAP myself, and this is great inspiration. I've only been using it for a few weeks now, but i love it! I can't wait to add GSAP to some of my isometric illustrations. :) Good Job!
Issey Roquet Je suis en train de me mettre à Illustrator et aux SVG, j'ai déjà un peu d'expérience avec GSAP, j'ai utilisé cette librairie pour un jeu. Tu as du bien t'amuser à faire ça, bravo !
Ca doit etre sympa aussi a utiliser pour un jeu! C'est la qu'on se rend compte comment GSAP est super flexible. Merci encore!! Amuses toi bien aussi avec Illustrator et SVG! Et n'hesites pas si tu as des questions!
I haven't dabbled as much in the interactive part for this one, but basically since everything is selectable and animated in code, you can add interactivity to it if you wish. I kept it super simple here, just used the moon as a button to trigger the animations and "awaken" the haunted house or put it to sleep. Like an On/Off Button. The point was to show you can mix interactive elements such as buttons with illustration and animations, and add story to a web/app page. :) But you're right, some people have done much more interesting "interactive" work :)
awesome job! I always wanted to create something like this, but greensock is a bit intimidating for me. do you happen to know of any resources that'd be able to help ease me into animating avg illustrations with greensock?
Hey there! Really great job!! I wonder if you can give me some insight, but what I want to know about is, if you have an idea about this of course, the best way to integrate animations into apps, I usually work on after effects, and I don't do coding, I just make the design and the animation, but I want to know what are the best formats and best ways to integrate ( generally a complex animation, but also would help if you have idea about simple animations aswell) the animations into the app, for now I just deliver PNG sequences and GIF files, I would really appreciate your help! Thanks
Wonderful! I want to do something like this, but the scene is an urban garden with people working it (all flat design). It would be used as a 'coming soon' page for a web app. Is it possible to do with SVG+Greensock an animated scene that loops indefinitely as a welcome animation? Thanks!
Also, how long did this amazing project take you to complete? Sorry, new to web development and design in general, and am quickly becoming obsessed with web animation.
You can absolutely! Just make sure you add {repeat: -1} and it will loop indefinitely. Often times using {yoyo: true} helps as well to go from A -> B -> A, which most GIF-like animations do. You can check out the link in the video description to see it in effect in Javascript. :) Don't hesitate to message me for questions! :P
This one took me a week to do. But once you get a hang of how Greensock animation works, it's pretty fast. Take the time to set up your vector illustration to get it ready for animation, it will save you loads of time.
Hey, thanks for your reply! Good to know. Any tutorials you recommend on making your SVG 'animation-ready'? Is preparing it for Greensock animation the same as preparing it for After Effects animation, or is it simply grouping and adding classes to objects you want to control? Thanks!
It's simply grouping, subgrouping, more subgrouping, and adding classes - you don't have to care too much about separating into different layers like you do for After Effects, since you're just just animating classes. It's mostly just anticipating how things are going to animate. For example, since you can reuse the same animation code with just one class name (a swinging motion, a path, an ease, etc..), it can save you lots of time. You want to avoid going back and forth between the illustration and code too much, because it can mess up classes and colours. So if you added a new shape in a certain colour for example, once you copy that shape into the code, the new SVG colour class of that shape (usually "st0", "st1","st2", "st-some number" etc.) can override previous ones - if your illustration is pretty complex and has a lot of shapes, doing this a lot can become tedious. So you'd want the illustration to be as close to being the final version as possible, before adding your own classes in the HTML for animation, and then animate. That's what I meant by 'animation-ready'. Note: you can group, regroup and re-arrange things in HTML code. It's usually just much faster being able to see groups in Illustrator. Chris Gannon has quick tutorials on youtube that might come in handy, although I don't remember if he had any specifically for prepping illustrations. It usually comes with experience, trial-and-error, and developing your own process. :) Happy animating!
Hey Issey, do you have an email I could reach you at? I'd like to consult with you about my personal website skillpro.io - I'm in the process of building a Node.js + Express & React website, and would like to incorporate SVG animations. I'd be interested in either paying you for some work or having you as part of my network on the website.
