overgrown

read at overgrowncomic.com

[overgrowncomic]

Overgrown, my major project webcomic I've been working on most of this year can be read at: overgrowncomic.com!

It's a short comic about a girl who gets trapped in a faery realm and has to complete three tasks to escape.  An exploration of webcomics and utilising html/css/javascript etc to enhance the storytelling and make it more interactive. It should take 5-10 minutes to read, works best on mobile (portrait) or medium desktop screen.

Also contains: queer characters (aro lesbian, wlw), friendship themes, faeries, pretty forests, and other good stuff

[layaart]

Bea from my webcomic Overgrown, I haven’t drawn her in a while! 🌿 @overgrowncomic

[overgrowncomic]

I bought myself some of my own merch from redbubble.... couldn’t resist the socks!!! 

[webcomiclibrary]

Step into the Faerie Ring- A Webcomic Masterpost

A Vein of Stardust (Tapas) (Warning: Death)

Created by Emrys Seren ( @emrysseren​) (Twitter) (Facebook) (Patreon)

Summary: Serenity’s mother is dead. Serenity herself is the illegitimate child of a powerful magical family that, due to her lack of magic, wants nothing to do with her. That’s to be expected–so why is the powerful and centuries old wizard Pen offering her a home? And why is there a star in the back yard?

Broken (Spider Forest) (Tapas) (Smackjeeves) (Warning: Blood/Gore, Body Horror, Epilepsy, Needles/Syringes, Suicide Mention, and Violence)

Created by Kristina ( @yubriamakesart​​) (Twitter) (Instagram) (Patreon)

Summary: Broken is about a fairie general and his army struggling to protect their city-state after an alchemical anomaly brought eldritch monsters into their dimension.

The Changeling’s Sister (Tapas) (Webtoons) (Warning: Abuse and Violence)

Created by Yondoloki (Twitter) (Facebook) (Instagram) (DeviantArt)

Summary: Rose’s twin sister is kidnapped by a fairy and replaced by a doll. She is the only one who sees the difference, and the doll treats her horribly, until she one day has enough of it and goes searching for her real sister.

Cornerwitches (Tapas) (Warning: Alcohol, Death, Nonsexual Nudity and Violence)

Created by Sam ( @charminglyantiquated​) (Instagram) (Ko-Fi)

Summary: Fairy tales, witches, magic, mermaids, and LGBTQ romance.

Courage (Or Lack Thereof) (Site) (Smackjeeves)

Created by Mister Loki (Site) (Twitter) (Instagram)

Summary: A compilation of short comics revolving around fairies and their (less than epic) lives. Short, sweet and to the point.

Crypts and Cantrips (Site) (Tapas) (Webtoons) (Smackjeeves) (Warning: Abuse, Needles/Syringes, Rape/Sexual Assault, Transphobia and Violence)

Created by Kieran Thompson ( @kytri​​) (Site) (Twitter) (Pillowfort) (DeviantArt) (Patreon) (Ko-Fi)

Summary: A fantasy adventure comic inspired by tabletop RPGs. Kitov Sige is an apprentice scribe with some innate magical ability and a dream of travelling the world and going on adventures.

Don’t Get Burned (Tapas) (Webtoons) (Smackjeeves)

Created by Breezy Mott ( @mottinthemainpot​) (Twitter) (DeviantArt) (Ko-Fi) (Patreon) Jazz Mott (Twitter) (Instagram) and Zoe Mott

Summary: A faun, a fairy, and a shapeshifter are teleported to an unfamiliar world and embark on an epic quest to return home safe, sound, and burn free. Drawn by three sisters with some guest contributions from friends.

Feral Gentry (Tapas) (Smackjeeves) (Facebook) (Warning: Blood/Gore, Body Horror, Death, and Violence)

Art by Anayte Delahay ( @artnaite​​) (Twitter) (Instagram) (Patreon) (Ko-Fi) and Written by Matti Delahay (Twitter)

Summary: Tuomi is a fairy who has lived for a long time in hiding among humans, with only his plants to keep him company. His peaceful yet lonely life changes when he meets Cypress, a strong-willed fairy who is intent on bringing Tuomi back among his own kind. But change is rarely easy, and the summer is ever so short…

Finding Home (Tapas) (Warning: Abuse, Alcohol, Dubious Consent, Mental Illness, NSFW, and Sexual Nudity)

Created by Hari ( @haridraws​) (Site) (Twitter) (Instagram) (Patreon)

Summary: On a long journey, two very different people thrown together by circumstance grow closer than they expected. But they’re just friends… right?

Gunnerkrigg Court (Site) (Warning: Blood/Gore, Death, and Violence)

Created by Tom Siddell (Twitter) (Patreon)

Summary: “Antimony Carver is a precocious and preternaturally self-possessed young girl starting her first year of school at gloomy Gunnerkrigg Court, a very British boarding school that has robots running around alongside body-snatching demons, forests gods, and the odd mythical creature.”

Ignition Zero (Site) (Warning: Violence)

Created by Noel Arthur Heimpel (Site) (Twitter) (Instagram) (Patreon)

Summary: Ignition Zero is an urban fantasy comic about a group of friends who get mixed up with faeries and spirits! It takes place in the fictitious city of Glory, Maryland in the fall of 2011, and covers the adventure Robbie, Orson, Neve, and Martin have with their friend, a spirit they call Ivory. Only Ivory–and those they’ve been defending her from–may not be what she seems. There isn’t always a clear right or wrong side to a story…

My Dragon Girlfriend (Tapas) (Webtoons) (Warning: Alcohol, NSFW, Sexual Assault, and Sexual Nudity)

Created by Courtney “Fawnduu” (Twitter) (Patreon) (Ko-Fi)

Summary: Christy is saved from a terrible date by a very unusual girl.

Overgrown (Site)

Created by Laya Rose ( @layaart​) (Site) (Twitter) (Facebook) (Instagram) (Patreon) (Ko-Fi)

Summary: Overgrown is a short comic about a girl who goes for a walk in the forest and gets trapped in a faery realm. She has to complete three quests to gain her freedom (but that’s if she even wants to go back to her normal life…)

The Sadist and the Slave (Smackjeeves) (Warning: Abuse, Death, Drug Use, Needles/Syringes, Rape/Sexual Assault, Transphobia, and Violence)

Created by Breezy Mott ( @mottinthemainpot​) (Twitter) (DeviantArt) (Ko-Fi) (Patreon)

Summary: Forbidden lovers fall into a horrifying pit of despair when a life altering choice is made. Their fate turns for the worst as they are quickly thrown into a world of terrors.

Speak of the Devil (Site) (Warning: Blood/Gore, Death, NSFW, and Violence)

Created by M. Lee Lunsford (Site) (Twitter) (Patreon)

Summary: Speak of the Devil is an urban fantasy detective mystery comic set in the fictional city of Eidolon. The city is filled with various people, known as Balisks, Salir, Whisps, Fae, and Humans. We follow Sunday Blackburne, an investigator for hire who gets caught up in the conspiracies of this corporate run world, and fights against it from the underground.

Sweet Talk (Site) (Warning: Blood/Gore, Death, Rape/Sexual Assault and Violence)

Created by J.MORK (Site) (Twitter)

Summary: Sweet Talk is a supernatural drama about friendship, love, and getting revenge. On a night of chance encounters, a vampire and werewolf stumble upon each other in dark Minnesota forest and become unlikely friends. ST follows their story as they try to resolve their troubled pasts together.

We Lurk in the Woods (Tapas) (Warning: Blood/Gore, Death, and Violence)

Created by Khantaya (Twitter) (Instagram)

Summary: We Lurk in the Woods follows the adventures of Alex and Toby, two teens growing up in the sleepy, seaside town of Sunside View… At least, that’s what it seems at a glance. Creatures, conspiracy and danger lurk beneath the quiet facade and Toby and Alex are drawn deeper into the mysteries of their home town…

Wherefore Art Thou..? (Tapas) (Webtoons)

Created by Hope Hjort ( @dearhopedeer​) (Site) (Twitter) (Facebook) (Instagram) (Patreon)

Summary: Jae is a jock and a bully, enjoying the life of making other people miserable together with his little clique. Especially class loner Will seems to be a preferred victim with his high temper and lack of friends. One night, a freak incident changes everything they knew to be normal. Both Will and Jae find themselves drawn to the other, looking for comfort and help. Suddenly they both have to learn how to handle being in love with someone they never expected to.

Where the Wolves Are (Site​) (Warning: Blood/Gore and Death)

Created by Samn Judge (Site) (Twitter) (Facebook) (Instagram) (Patreon) (Ko-Fi)

Summary: Where the Wolves Are is a webcomic about young queer monsters growing up and fighting bad guys in a the seaside city of Brighton. Eebs, their pack member and good friend has gone missing, but is it a hook up gone wrong or something more sinister? With the adults busy attempting to ward off a war it’s up to the girls to buck up and find their friend themselves.

Whither (Site)

Created by Danie ( @whitherling) (Twitter) (Instagram) (Patreon) (Ko-Fi)

Summary: Emelind is a changeling, a stranger to the world she’s been cast into–and she desperately wants to go home. However, as she works towards her goal, it becomes apparent that everyone around her cherishes a wish for something… and every one of those wishes has its cost.

Want to learn about more webcomics? Check out The Webcomic Library here!

Do you create a webcomic? Submit your comic to the library by emailing me at [email protected]

(Also here’s a template for peeps to submit their comics with!)

Want updates on what I’m up to between masterposts? Follow me on Twitter here! You can also follow me on Pillowfort!

Did I miss anything in my list? Have a masterpost you wanna see? Just wanna say hi? Send me an ask here!

Like my work? Want to help me expand what I’m doing? Buy me a Ko-Fi here!

If you enjoy any of these webcomics I encourage you to reblog this post or reblog their works. Most if not all of the comics mentioned rely on word of mouth to grow their audiences. All of these wonderful creators deserve to have their stories seen and heard and you can help by spreading the word!

[overgrowncomic]

Read on at overgrowncomic.com [in the intended format]

It’s here - my honors project webcomic, Overgrown! It’s a short comic about a girl who gets trapped in a faery realm and has to complete three tasks to escape.  An exploration of webcomics and utilising html/css/javascript etc to enhance the storytelling and make it more interactive. It should take 5-10 minutes to read, works best on mobile (portrait) or medium desktop screen.

Also contains: queer characters (aro lesbian, wlw), friendship themes, faeries, pretty forests, and other good stuff

[wow tumblr really doesn’t like those gifs, huh]

[overgrowncomic]

My overgrown stickers are now on my store! Link in the source.

[overgrowncomic]

I’ve uploaded a bunch of new Overgrown designs to my redbubble! There’s even socks! Link in the source.

[layaart]

It’s been almost a year since I finished overgrown! I made some sticker designs.

[sketch-bird]

a promise made 🌿

bea and emilia from @layaart’s beautiful hyper/webcomic, overgrown! 🌸

[weebisexual]

floral aro moodboard for anon

[overgrowncomic]

Super excited that Overgrown is nominated for an SJV award! (I won this category last year with Mistlands, too!)

[overgrowncomic]

hey, according to google analytics 1000 users have read Overgrown! and almost twice as many sessions, nice (I suspect the user/session ratio is skewed so much from the uni exhibition computer registering as one single user when many people would have read it)

[overgrowncomic]

I love Overgrown. It's whimsically poignant. When Our Hero gets back to her room it felt like a Wizard of Oz/Life of Pi type situation where the protagonist returns to the real world and several things from the fantasy world line up with real-world situations. Is that what you were going for? Our Hero cleaning her room reminded me of clearing the courtyard, and planting the seed seemed to line up, but what about the scale from the beast? Was silencing the phone kind of like defeating the beast?

Hi, thank you so much! Yes, those were the exact intentions! beast/phone was a bit more of a vague metaphor than the other two, haha. I didn’t want to give it too much of a ‘phones/technology is bad!!!!’ vibe since I obviously don’t feel that way lmao

I used a vague hero’s journey structure for the whole thing, too

[overgrowncomic]

I made a little tiny zine of page one! the end part folds out. obviously not the format it was made for, but a helpful thing for me to have at zinefest/artist alley etc, and it’s quite cute

[overgrowncomic]

how many fandom (tv show/movie/podcast/book) references can you find in bea’s room (there’s about…20 that i just counted, tho a lot are very vague and possibly not recognisable lmao)

[overgrowncomic]

#oooh!#the ones i recognize are: doctor who/the thirteenth doctor (love her!)#(poster & tardis)#alice isn't dead and ars paradoxica#great taste in fiction podcasts!#warcross and sadie (i haven't read either book though :( )#3% that's the brasilian(?) netflix show right? and mad max (haven't watched either one)#the purple eye thing could be night vale?#let's talk about love (i think. haven't read that one either)#one of the books could be afterworlds (which i also haven't read)#and the 'key' book could be from the engelsfors trilogy (i don't know what the english covers look like but that's a series i have in fact#read)#i feel like i should be able to recognize the orange/white book......#ok how did i do? which references did i miss?

ahh yes you got all those right! the key is engelsfors, yes, though looking at my copy on my shelf it’s just greyish with red text lmao, i don’t know why I added the red stripes. the orange/white book I think I meant to be When Dimple Met Rishi? though I couldn’t remember what the spine looked like. the dark blue book is bitterblue, otherwise all the other books you guessed or are just not supposed to be anything.

In the first image we also have a little poster of Rayla from the dragon prince,  and the TAZ bureau of balance logo, and a pic of Lights by the door. In the second image there’s a poster of Aurora, a small mabel podcast logo, a within the wires poster, years&years palo santo album cover poster (kinda?) and rose from star wars.

[overgrowncomic]

Hello, I am interested in making a hypercomic the same way you went about it using GSAP and scrollmagic, and while I know that I should play around and code what I can, was there anywhere you went to for reference trying to get to grips with the two libraries and how to animate and display frames with them, or did you work it by google and the docs on the actual sites? Congratulations, I adore Overgrown and love all the other references you introduced me to because of it!!

Hi, thank you so much! For me it was a long process of googling lots of people’s examples of them doing various things and just, slowly figuring it out. I’ll give you a few links and tips and stuff here???? though not necessarily in order, and I don’t know how much you know already…

I’d say with GSAP start with this getting started video for an introduction to how it works - essentially you’re changing a css value either to or from what the original css is. (when using it within the scrollmagic the structure of the tweens and timelines can be slightly different, btw)

With scrollmagic, I kind of jumped in the deep end (I think i started with the image sequence thing) which was confusing - don’t get distracted by all the examples because most of what I did was actually using the simplest stuff!  This is a good video showing exactly how the scroll triggers work. here’s a few more tutorials etc

My first (working) exploration of various simple things is here  - and you can download the code if you want! though full disclosure i haven’t gone back to look at the code and it’s possibly very messy, haha.

So it took me a while to figure out how to do frames and image stuff - but what I ended up doing for a significant amount of parts is super simple, just placing multiple images on top of one another, and then changing the opacity from 0 to 1 on the top image. 

So here’s the html:

section with image as a bg, containing the other image, plus the text bubble.

and the javascript (with the scrollmagic controller etc beforehand):

the timeline, with the two animations - making the second image (.friendappear1) go from opacity:0 [to what it’s initial setting is, which is 1] in .5 seconds, and the text (.friendappear2) doing the same thing in .2 seconds, starting at the .3 mark (so the whole thing takes .5s)

then create the scene, setting the trigger, duration (0, so it just happens automatically taking .5s rather than controlled by your scrolling), and the trigger hook is .2 so it happens when the trigger is almost at the top of the screen. 

set the tween, with the timeline name. (if you want to pin it on the screen for the duration (if it had one) you’d put setPin(’#friendappears’) below here)

then add to the controller. (indicators are the labels on the side, super helpful while you’re working on it.

Some other random tips and thoughts:

I tend to use the same word for the id trigger, class (with a 2,3 or a,b  if there’s more than one needed), and timeline name, just to keep everything related for myself. 

With two images like the above, I just made the section have one image as the background and one image within the section. With more than two, I put the extra images all in there and then ya gotta do relative positioning and make the top / margin-top value -[whatever the image height is] so they’re on top of each other. absolute positioning also sometimes works but some browsers don’t like it..

having a transparent png of the character/object you want to animate on top of a background image can also work, though sometimes aligning them against the background can be trickier. works well for something that you want to move smoothly across, though such as the running bits i did at the end of pg 7 (the sections there also have overflow:hidden so it disappears off the background)

if you’re planning on making this work on desktop and mobile, be aware that the trigger hook might need to be changed since it can have a different effect on the different orientation screen. you can do a @media thing the same as with css.

if you do some parallaxy things (like I did the end of page 1 & 2) sometimes things can get…quite complex in the way you line everything up with the duration and length and everything and making it so it works

it’s really like….once you understand the basic structure it’s really simple, aside from the occasional little technical blip that can be hard to figure out, so it’s good to be able to troubleshoot the code.

Well this is just a random bunch of things, i hope it’s somewhat helpful??? I’m definitely willing to answer any more specific questions if you have them!

[layaart]

emilia and bea from @overgrowncomic, at some point when they meet up in the real world post-comic????