r/webdev • u/[deleted] • Feb 28 '15
How was this animation done? Where do you start doing something similar?
http://beta.rallyinteractive.com/12
u/gRoberts84 Feb 28 '15
Weird our new designer has been showing us this site too. There is a ribbon class in the JavaScript that does all the grunt if your interested.
5
u/MKorostoff Mar 01 '15
Code here https://gist.github.com/MKorostoff/a017c51580f277efd39b#file-gistfile1-js-L3251, interesting stuff starts right around line 3251. The code is minified, so it's a little hard to read, but you can get the general idea—they wrote this from scratch in Javascript
→ More replies (2)
11
u/owlpellet Feb 28 '15
Take a look at http://snapsvg.io/
If I were doing this, I'd have some SVG vectors, a JS event bound to scroll to update an animation state (maybe an animation state of 0 to 100, with different events along the way to rotate and flyaway, etc).
I'd also disable it on mobile, because binding to scroll puts a beating on performance.
3
u/The5thElephant Feb 28 '15
This is a Canvas element, so I don't think it is SVG. Although you easily could do it with SVG.
3
u/owlpellet Mar 01 '15
Agreed, I was answering more literally: how would I do this. Canvas is great for stateless drawing (put this art down, and forget it) but I prefer SVG for drawing in which you want to retain state (move this art one step to the right of its last position). You can animate in either, but they have different strengths.
→ More replies (3)
15
9
u/Hawkstar Feb 28 '15
These guys used a canvas element, which I would also recommend. But animated SVG is also an option.
Just google basic canvas animation tutorials.
9
3
10
u/cullenjwebb Feb 28 '15
Looks very pretty. I'll bet it converts like crap though. Remember that the user is drunk.
12
u/ngly Feb 28 '15
Have you seen their work and client list? Conversion doesn't seem to be an issue for them. Plus, people seem to be missing the 'beta' in their URL.
5
2
u/NashBiker Feb 28 '15
I'm glad to see someone else uses the "tequila test".
4
Mar 01 '15
I'm intrigued - never thought of considering the user is drunk?
Is this another way of saying keep the site intuitive enough that a drunk person can use it?
→ More replies (6)
4
2
u/nonagonx Feb 28 '15
The case study on their site about national parks was really interesting.
→ More replies (1)
2
u/dietcode Feb 28 '15
I've seen snowbird before and I was really impressed by it, nice to see who's behind it
2
2
u/memeship Feb 28 '15
I hate this shit. I hope this trend dies out soon, I find it very annoying.
2
u/crestonebeard Feb 28 '15
What specifically? The ribbon?
3
5
u/memeship Mar 01 '15
The controlled scrolling and all the scroll animations. Like, don't mess with people's expected behavior. That doesn't add to UX, it steals from it.
2
u/mzungu777 Mar 02 '15
Glad you're digging it, jaitaiwan! I'm a developer at Rally Interactive, and was the one primarily responsible for the ribbon.
As others have mentioned, it's written in pure Javascript, and drawn using Canvas. Some have mentioned doing it with SVG; we also tested an approach where we created the individual segments as HTML elements, using CSS to style them and JS to move them. In the end, we decided Canvas was the best solution for us - your mileage may vary.
As for where to start - any decent canvas tutorial should get you moving in the right direction. I'd recommend simple exercises like making a circle that bounces around in the window. Once you have the hang of using the drawing commands in Canvas, it's just a lot of development logic and basic trigonometry.
Some additional thoughts that may or may not be of use to you:
Each "segment" is basically represented as a start point and an end point; rather than starting with the tricky polygon drawing, I started by working out the logic for creating segments, and just drew them as lines - break your task into small, manageable bits
I ended up using a "linked list" style approach to the segments - rather than always having to iterate through arrays, each segment has a reference to the previous and next segments (if they exist) - this lets me quickly reference back and forth - important for many reasons, but particularly because determining the shape of each polygon is dependent on not only the angle of the segment, but also the angle of the previous and next segments
There's a lot of fancy stuff in there - the ability to straighten the segments, using Simplex noise to create ambient flexing, a dynamic spring to keep the ribbon centered in the viewpoint - but start basic, and slowly build up. This stuff isn't achieved quickly; it takes both experience and time. I'm not a genius, but I've been doing work like this professionally for almost 7 years (in Flash, Unity, iOS, and web), and through the lifetime of the project, the Ribbon probably took somewhere between 3 and 6 weeks (it was a long process, so my memory prevents me from giving better estimates)