Can we just talk about the snack game at JSConf?
It's on point.
Also Malte's dance party that's going on in the background.
Killing it.
It's amazing.
So I want you all to get pumped right now because the journey we're going to go on is
going to blow your minds.
So we're going to talk about something that I've talked about recently which is sequential
art, and SVGs.
And so my name is Zahra, and I work at Bustle, a feminist group which a focuses on inclusivity,
positivity, and empowerment.
What I love working about media is I get to be a digital storyteller as well as an intellectual.
One of the things that we pride ourselves on at Bustle is breaking out of the standard
article format.
For example, one of the storytelling formats that we've experimented with is this interactive
flowchart.
It's a choose-your-own-adventure that breaks you out of the monotony of the article, and
lets and I think the best way to convey something is through
telling a story whether that's through educating, or entertaining, or persuading.
And if you think about it, we tell so many stories in our lives, whether that's through
movies, photographs, or tweets, and what all of these have in common is that they break
the story into pieces arranged in a very specific way where you move sequentially through time.
One of the best known forms of telling stories in a sequential format that pre-dates the
Internet and the moving image is, of course, comics.
Eisner uses the term comics.
And Scott McCloud gets at this in understanding comics Scott McCloud says, where taken individually,
the pictures on the left are just pictures but when they become part of a sequence, even
that sequence is only two, the art is of the image is transformed into the art of comics.
He goes on to define what we talk about when we talk about comics.
He says
comics have been around for a very long time.
In fact, they predate the Internet by centuries.
Here's a comic from 32 centuries ago. -- and think other side of the world, archeologists
have found ancient paintings in Mexico created 2700 years later organized similarly.
Even though this isn't a modern comic, what we're looking at is still a story that goes
on a deliberate chronological order where you start on the left and you go to the top
right.
There's no panel borders like we're used to, but there are clear divisions of scene.
Now I have no idea when or where the first comic was created in history but the one mention
that's a huge deal in the history of comics and sequential art is the invention of printing.
Printing turned the art form that would be a diversion for the rich and powerful and
allowed it to be enjoyed by anyone.
So given the legacy of comics as a art form, how has the Internet changed our relationship
to sequential art, and what it it mean for us to go from print comics to post-print comics
in the digital age.
For us at Bustle, one of the first steps that we took to comics is an made the story called
Sunday Comics, which we produce once a week, sometimes they were told over a series of
a few weeks, and sometimes they were just one offs.
They were for fun to make, and some fun to watch.
So we thought how do we take this further.
And bring a similar experience to the web without making them difficult to produces.
We didn't want to just adopt the shape of the previous technology of comics that we
were already acquainted with.
For example, you could just scan in an article and say you brought comics to the web.
But to me, that was not very interesting.
I wanted to bring a single unbroken reading line while taking advantage of all the things
that the browser had to offer.
I set out to create stories in the form of sequential art on an infinitive canvas along
the y-axis.
So this is the comic experience that we had in its final form.
We wanted it to recontextualize the sequential art while emotionally engaging the audience.
For example, notice that there's this interesting parallax effect where things that are closer
scroll more quickly than things in the background.
Everything is designed to take advantage of the beautiful Retina displays.
And when you move your mouse, things move around with you and you can change your perspective
from within the frame.
It gets the viewer involved and you have to interact with it to see everything in its
full glory.
Sometimes you even have to move it around to see the text.
If you're on a laptop or a phone, you can go to bustle.com/comics right now and check
it out by yourself while I'm going through this.
So how do we do this?
And, of course, the answer is: The solution to most things on the web.
I'm just kidding.
There's zero React involved.
[ Laughter ]
It's SVGs.
It's not on brand.
React not on brand.
Okay.
So SVGs are a good tool to have and especially for storytelling because they're resolution
independent, and so they're sharp on in display which means you don't have to do any image
replacement for different resolutions.
And, of course, they're easily scalable for responsive designs, to you don't have to produce
a bunch of different asserts for different screens and they're super easy to animate,
which makes them the most fun.
The fact that SVG allows us to create these incredibly rich narratives is mind-blowing.
They're truly one of the coolest things that you can play around with as a developer.
So how is this built?
The first step was to get the parallax working, and if you're thinking to yourself, why parallax,
first of all, why not, and second of all, it creates a depth of scene and a sense of
physicality.
When police report, why not allow your visitors to visit your site on their own initiative.
Instead of getting static images, you got a 3D presentation controlled by your own scrolling.
If given the chance, why not use the opportunity to tell stories in an engaging and interactive
way?
In practice, instead of calculating in parallax movement in JavaScript, we challenged ourselves
to do as much as in CSS as possible, shout out to CSSConf EU.
So activate 3D space in an element that needs to be given, then enables 3D space for each
tiled elements.
So you define the height in the perspective style properties of the parent element and
that would lock the perspective to its super creating a 3D viewport with a fixed origin.
The scrolling speed of the parallax elements is achieved by applying the translate-z function
to the transform-property of the child element, come places the elements along the z-axis
by placing them farther away or closer to the user.
After experimentation, we picked the maximum distance to be background layer.
The maximum layer sits at that distance and we evenly distribute the remaining layers
from background to foreground.
And here's what it looks like Illustrator where there's seven years, and those layers
are distributed evenly between the foreground and the background.
Because we're using perspective to achieve the parallax movement effect, when we move
things farther along the z-axis, they're narrowly going to get smaller, but illustrators have
already drawn to scale to make this inappropriate, so we need to do a depth correction so that
it answer to be rendered at its original size.
On the left, we have the scale transform applied versus on the right there is no scale transform.
The good news is that as things move farther away, they get smaller at a predictable rate
so we can apply a scale transform to render it at its original size.
This way we get the parallax effect of moving things along the z-axis without the size distortion.
The advantage of this is we just set a few CSS properties and the browser takes care
of everything else, and there's very minimal JavaScript required to set up the comic.
So, again, this is how the scene will look, with and without depth correction.
So on the right we can see what happens when we translate things on the z-axis without
applying the scale.
And on the right, is the depth correction with the depth correction with the scale applied.
It also means that we're going to apply a larger scale factor to compensate.
Now even though this seems like fun and games and browser support is generally excellent
for SVGs, it's a whole other story when you apply CSS transforms to them.
This is especially painful when it comes to animations because scale, position, and rotation,
and skew are so fundamental.
When you apply transforms to an element inside the SVG, their browser bugs and inconsistencies.
This gif is from an excellent article in CSS Tricks can be which shows how the same animation
looks on different browsers.
IE and Opera, don't honor transforms at all on SVG elements, instead you must assign the
attribute.
We could use tools like animation platform, but what's the fun in using a third-party
library instead of figuring out how to do it on your own.
So our solution was to explore the SVG where each element becomes becomes an SVG on its
own and this allows us to transform it reliably across all browsers.
This is what the SVG looks like with six layers making up the scene on the right.
And then on the left, we have that same SVG with each of those six layers exploded into
their own SVG elements and they're all stacked on top of each other to make it look like
the original.
Another cool thing about these comics is the movement in them.
As you move your mouse, or your phone, everything moves with you.
The closer the layer it is to you, the more it moves, the farther away it is, it moves
less and less, just like in the real world where things that are farther from us move
farther away.
These were one of the Sacramento that we wanted to add because we didn't want the designers
to think about how to animate the movement and just have it done for them automatically
based on the numbers of layers they use.
What's good is that the effect gives you a sense of being in the scene.
And as an anecdote, the designers started putting things in their illustrations where
you have to interact with it to see what's going on in the whole story.
So how did we manage to get the page to respond to the mouse and the gyroscope movements?
With the help of our good friend from our math days, logarithm scale, which is a non-linear
scale when there's a large range of quantities, earthquakes, for example, which is not unlike
shaking your phone, or moving your mouse in the real world.
So this is how it's like the mouse moving on a logarithmic scale that we actually used
to transform each layer.
And then you apply the shift to an event listener based on device orientation or mouse movement.
As a visual example of how log scale works, as the mouse moves in the center, the layers
move quite a bit but as you get closer to the edges of the browser, they move less and
less because you don't want things to fly off the screen, again, just like in an earthquake.
What's also cool is you have to move your mouse around to see what's in the mirror,
or to see what's in the background behind in the window on the left.
And an important goal of this project was to allow our designers to be productive in
the tools they already know.
One of the reasons for using SVGs is that our designers are -- Adobe Illustrator.
One thing we could have done was spend half a year building an online comics editor but
Adobe's already done for that by making a graphics editor and our designers already
know how to use them.
And one thing that's cool for me personally is even though they each have their constraints,
they each have their process for design.
Allison Gore starts with a loose plan, figures out how the panels are set up and relate to
each other, and then moves on the Illustrator and deconstructs the layers to figure out
how their interaction works.
These are some examples of her work.
It's cool to see the behind-the-scenes.
Austin sometimes draws out his main characters in paper and then moves in to Illustrator
to draw out the whole scene.
An interesting thing about Austin's work is he uses a lot of color and I asked him about
it, he says it's because he's from New Orleans and he group surrounded by beautiful colors.
And since he moved to New York City, he myself how colorful things are, so he tries to remind
himself of home and work.
Allyssa tries to get forms on paper to list their most iconic moments.
And she also draws out the scene and writes out lots of notes even before drawing the
scene out in Illustrator.
She draws lamps, and says, this is what the Netflix logo looks like, or this is what my
table should look like.
Allyssa also believes that you shouldn't draw everything out for the audience, and let them
figure out things on your own.
She thinks that minimalism goes a long way when it comes to comics.
Don draws out some parts of the story and tries to make sense of the story before doing
anything else and sometimes ends up working with the writer to change the story entirely
based on her first impression of not making any sense.
She tries to figure out the characters' emotions on details.
She also feels like she's playing God when trying to figure out when the character in
the background, or what does the color look like, or what the character looks like, or
what their hair looks like.
Bear likes to draw her characters with different emotions from different viewpoints whether
she lays things out.
It's been very rewarding to work on these things because for relatively little engineering
work, we can help designers create these experiences that they've never made before and that our
viewers have never seen before.
And I'm personally a huge fan of the meeting the audience, your designers, and your collaborators,
where they are today.
And so the most important lesson that I want you to take away from this talk is meet your
users where they are.
I know we all have instincts to rewrite everything and create all these new tools but it's really,
really important to think about how to leverage existing tools.
And SVGs are a perfect example of that.
You probably already work with designers.
They already know Illustrator.
What are some ideas that you have that if you were to get out of SVGs, what would you
do?
I showed you two examples here with interactive flowcharts and comics.
Both of these have super simple rules that designers can follow.
Figure out your layers, export to SVG, done.
It's also to note that setting constraints is okay.
Some of the designers were definitely a little hesitant about not having enough control over
the animation, or the depth, or the movement, or wanting to be able to animate certain things
differently.
But the answer I always gave was the same as, I'm sure, some of you have given once
or twice, PRs are welcome.
But all joking aside, I think having constraints and having to work within limits creates more
opportunity for creativity and innovation.
The way they're using parallax to enhance the story in these two examples is mind blowing.
And, again, it's been super rewarding being a part of it.
So the question that I have for all of us is, what are some things that we can do by
using Illustrator as a development tool almost?
Or are there other file formats that people already can use to harness the power of JavaScript
to enhance, and augment?
Thank you.
[ Applause ]
Where's the party?
Malte to the rescue!
That was awesome.
Mind blown!
That was amazing.
We're going to wait a little bit for a few minutes, again, to let other people from the
other room to attend the talk from the very beginning but we have more coming up which
is awesome.
Thank you very much, Zahra, that was amazing.
ZAHRA: Thank you.