Interactive SVG Animation with Greensock

Full interactive SVG here: codepen.io/iss...
A little interactive SVG animation made just in time for Halloween. The SVG is made interactive; clicking on the moon reveals the spooky creatures hidden in the haunted mansion. Animated with the power of Greensock.
Music by Kevin MacLeod at incompetech.com
Find me at
/ isseto
/ trufffle
/ trufffle_

[@binutil]

It does not do justice to this awesome work to get so low views and like..

[@Issey.Trufffle]

YOU'RE awesome!!

[@codeIMperfect]

​@@Issey.Trufffle No, You're awesome 🙄🙄

[@RMusicKRT]

Honestly, I'm amazed by your drawing skills.

[@cyberfolk1088]

GENIUS! THIS DESERVE MILLION VIEWS

[@Issey.Trufffle]

😄😍

[@cretualexandru9508]

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!

[@Issey.Trufffle]

Wow Cretu thank you so much!!! I really appreciate it! Your message means a lot. :) you’re awesome!

[@PixelatedBrain7]

amazing 👹

[@Issey.Trufffle]

Thank you!! 👹

[@PixelatedBrain7]

@@Issey.Trufffle 👹😂

[@Jon_crypto_]

Wow! Issey you are very talented, please continue posting content on KZbin. This is very insightful! thank you!

[@martintoro8602]

Such a great patience and dedication.

[@Issey.Trufffle]

😬

[@durin127]

This is a pure work of art!

[@Issey.Trufffle]

Wow thank you!!

[@barefacedquestions]

This is so cool. I've always admired your Codepen. How is it possible to be so good at illustration, animation and creative coding?

[@vhan425]

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 😁😆

[@karenwang6930]

wow this is amazing, exactly what I want to learn and achieve. Great work!

[@nirmalsh1]

Wow! Issey you are too good

[@Issey.Trufffle]

Aww wow thanks!! Really appreciate it!! You’re too nice! 😊

[@Alessandro-nq3tm]

Amazing, do more of these videos ! :)

[@linkernick5379]

Oh, this is so amazing! I see, GreenSock is very powerful library, definitely worth to learn it. (In such skillful hands of course)

[@Issey.Trufffle]

Aww thanks!! Yeah it's a lot of fun to play with. Takes just a bit of practice :D

[@youssefmuhamad3213]

Awesome!

[@evanwilson9906]

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!

[@ThomazMartinez]

wow now this is talent

[@abdellatifahammad7735]

great job that's just wow

[@germainrodriguez5230]

I thought I was on KZbin not a jewelry store... This is a gem!!!!

[@Issey.Trufffle]

Hehe 💎 🙊

[@KhanhNguyen-hd7ws]

it's beautiful

[@ВладимирНетот]

So Cool! I want more videos like this one! (=

[@Issey.Trufffle]

:) Any suggestions?

[@ВладимирНетот]

@@Issey.Trufffle for instance lessons like "How to make such a beautiful 3D animations from scratch" =)

[@AbhayBagoriyahacker]

Awesome 😍

[@scriptster6805]

It is unbelievable that true art like this is not recognized enough on youtube . So amazing en beautifull!! How long did you work on this?

[@Issey.Trufffle]

Aw thank you!! You’re too kind haha. I think it took me 3 days to a week on this one. I was super focused on putting it out so I went all in 😅

[@itsme-gp3ce]

what a great imagination and talent..i can't stop watching ..great job

[@827023685]

really beautiful. loved it.

[@ZacVrono]

Mind BLOWN! Never thought of doing this. Totally makes sense that you can, guess I thought it would lag, but nvm.

[@Issey.Trufffle]

I thought it would too in the beginning, so I've progressively tried adding complexity to animations to test where they'd go. Pleasantly surprised :)

[@serafinrt]

Amazing! Great Job!

[@sanchitsreekumar8562]

Damn that was great

[@Issey.Trufffle]

😉thanks!

[@6infinity8]

Amazing result!

[@Alicia-12-t2m]

Captivating

[@shivamthapliyal2305]

How can I press like button a million times?? This is very amazing!!!

[@Issey.Trufffle]

Haha Thanks Shivam, you're awesome! :D

[@shivamthapliyal2305]

how to get in touch with you?

[@Issey.Trufffle]

You can find me on Twitter twitter.com/isseto or on Facebook at facebook.com/trufffle

[@paweonorin2978]

i love this so

[@ghgh3036]

Thanks for the uploading video

[@kevintale2608]

Wow c'est incroyable ce que tu as fait !

[@Issey.Trufffle]

Wow merci ca fait plaisir :P

[@kevintale2608]

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 !

[@Issey.Trufffle]

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!

[@kevintale2608]

Issey Roquet Ça marche ! Je peux t'ajouter sur fb car j'aurai sûrement des questions ^^

[@Issey.Trufffle]

Pourquoi pas. Cherche mon nom sur fb

[@MAzaaruTheen]

how to use pen tool some curves are difficult to me ? this video inspired to me

[@Issey.Trufffle]

Hi! Have you tried using the “Curvature tool” in illustrator instead of the Pen tool? Glad this video helped inspire you!! 😊

[@MAzaaruTheen]

@@Issey.Trufffle thanks for reply & I will try curvature tool.

[@younglnln9542]

Super Awesome!!!!!!

[@allensmilko]

God job !

[@LindaYone]

Amazing!! Would love a tutorial!!

[@tunezandlyricz]

click --> settings --> playback speed --> 0.25

[@דיאנהאודינצוב-ע6ל]

Cool

[@Wapskill]

Cool!

[@robertborghesi4349]

Awesome work (Y)

[@mojama7]

That's cool

[@rayhanali1041]

Turn this in a course I’ll buy it full price.

[@Issey.Trufffle]

Haha noted!! ☺️

[@rayhanali1041]

@@Issey.Trufffle haha I’ll buy it now lol

[@sebastianramirez9081]

Wow! Amazing, suscribed ;)

[@unica1133]

WOWWW

[@MindGem]

Can you manipulate gradients on the svg via js?

[@amulpatel]

wow.

[@pomade34]

Bon boulot mec !

[@Issey.Trufffle]

Merci mec!

[@weshuiz1325]

tutorial?

[@KevinbodiNo]

What inspired you into making such awesome things?

[@Issey.Trufffle]

Thanks! I guess just wanting to make fun things for no reason that I hadn't seen produced on the internet yet :P

[@asdfkerub]

but how is it on mobile? Jk. Great vid

[@Issey.Trufffle]

Haha!! 😁 and thanks!

[@xthene]

the artwork and animation are awesome ... but in what ways are the animations "interactive"?

[@Issey.Trufffle]

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

[@wtfdatzdanny]

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?

[@KNDlifeacademy]

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

[@Issey.Trufffle]

Hey! You might want to check out Lottie by Airbnb. It might be what you're looking for :) airbnb.design/lottie/

[@gerardocoss5126]

how obtain the html with the positions of svg?

[@ianman6]

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!

[@ianman6]

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.

[@Issey.Trufffle]

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

[@Issey.Trufffle]

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.

[@ianman6]

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!

[@Issey.Trufffle]

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!

[@xilophompilo]

how to capture the image this way????

[@Issey.Trufffle]

Hi Alberto! I used Quicktime for screen recording on my Mac, but you can use OBS studio for free on both Mac/Windows :) Hope it helps!

[@xilophompilo]

@@Issey.Trufffle so cool, the 'fell' (don't know a better word) of your video is so nice. 10 out of 10. thanks!

[@Issey.Trufffle]

@@xilophompilo Thanks for watching it the way to the 'fell' :D haha You're too kind!

[@stevenkennedy8609]

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.

[@Zichigo]

😘

[@eduardoxmenezes]

like-fav-share

[@НикитаМикулич-м8ш]

Кто здесь с Absolute RP? :D