Homepage Animation Tweaks

ysdn-2016 / ysdn-2016.github.io

Grad show site for the YSDN class of 2016

http://ysdn2016.com/

3 stars 2 forks source link

Homepage Animation Tweaks #99

Closed kvngco closed 8 years ago

kvngco commented 8 years ago

@mileeco perhaps we can look into this

Since it's an .svg, we can't account for a variety of viewports. However, we should err on the safe and:

bring up the Intermission logo from centered to a few rows above
block scrolling before animation finishes (nav already on top so it's ok)
add ellipses to end of first phrase (gives cue that there's more coming)

mileeco commented 8 years ago

Fine with any of these. I think disabling scroll until finish was discussed before but I think it was complicated on technical side (might be wrong)? Thoughts on this @iamnbutler?

mileeco commented 8 years ago

Related: https://github.com/ysdn-2016/ysdn-2016.github.io/issues/95. Posted this issue before

iamnbutler commented 8 years ago

Brought over from #95. Original text by @mileeco:

Hoping this can be tackled before the launch. I was wondering if the shapes in the intro can appear at different times instead, instead of them all sliding in together? (reference mocks on InVision: https://projects.invisionapp.com/d/main#/console/5888771/131770112/preview) It feels weird that all the shapes are sliding in at once, it's like sliding in a layer with all the shapes pasted on it...

It'd be ideal to have them slide in from different angles, like how this site has it: http://ysdn2016.com/shapes/. If not just showing shapes at different times (popping in) would be fine too

iamnbutler commented 8 years ago

This will likely be done with CSS animation, unless we go with a canvas solution (like what Ross created before.) In the case of canvas, I don't have an experience with that so I'll have to figure out how it works.

For now, I'll covert the shapes to CSS so we can animate them independently
I actually have an idea for doing the "wiping" transition with CSS, so I'm going to try that now.

iamnbutler commented 8 years ago

I remember now why we chose to move away from CSS. As soon as we start using CSS again for shapes things no longer scale as the window scales.

Either we use break points to resize the grid and align the shapes to the grid (you will need either as many break points as the grid has points, or have some points cut off as the browser scales.) OR
We can attempt a JS solution, but I don't know how to write one that won't lag a lot when resizing the browser.
I think this is why we discussed using canvas for this solution. Can you weigh in here @rosszurowski?

rosszurowski commented 8 years ago

I think canvas would be cleanest, but unfortunately I won't have time today to look at it—I'm working downtown. If we push it back another day, I should be able to get it done tonight.

The only other method I can think of is that there are a few new CSS properties for aligning a repeating background with the edges of an element. Maybe try searching for those?

But that doesn't solve the "aligning the shapes the the grid dilemma. Maybe you could make the shapes align with those same properties?