Here’s a cool image effect I came across!
Anyone think this is possible in RW?
2 Likes
Yes, it is. The Grid layout can be created with Source Grid (and presumably Flux and Bento too, but I‘ve got no experience of those). The phasing in of images (and different delays) can be done with ‘Fade’ in Stuart’s Animate stack. The type animation can probably be done with ‘Slide Up’ in Animate too.
The content remains within the grid, won’t float diagonally across the screen.
Scrollmate has the slide effect on scroll, but only vertically or horizontally. Diagonals it can’t do.
If grids could be made to float … wow, that would be cool.
Ah, I didn‘t see the scroll effect. Hmmm… You’ll have to wait for LockUp 2.0, which I‘m hoping to release in a few weeks. Everything there will be animatable on scroll, load, hover and click. I’ll see if I can replicate this in the demo.
3 Likes
That effect and the website in general is a classic example of a web designers wet dream and a clients worst nightmare. Although the client most likely doesn’t realise that, yet. They will, when the site stops converting.
In my opinion.
3 Likes
I wasn’t complimenting the site, just the scroll effects which are cool and very smooth.
But in terms of the point of the website, what do they add?
I’ve only looked at the site on mobile, where’s it’s a horrible experience. Maybe desktop is less horrible. But still, I bet that effect has a bigger negative than positive effect on the user.
99% of effects like this are for the benefit of the designer not the client. No one visits a website, sees “cool” animation effects and on the strength of it contacts the site owner about doing business with them.
Just an opinion.
1 Like
I appreciate aesthetics in a site and subtle shifts bring it alive, like hover, scroll effects, parallax etc. They all add something (of course in moderation). Although this site makes me dizzy, I like the landing page effect and scroll. That would be enough for me. For an artist and creatives site it could work nicely. For a commerce or travel page where functionality or the transfer of information is key, it wouldn’t. I do notice and appreciate clean well designed sites.
I’m not entirely sure what the business behind that site does. I think they’re a building firm.
I rest my case ;-)
2 Likes
Thanks- Steve. I’ve added this to my Apple Notes. It’s a quote Im sure will come in handy someday. ;-)
2 Likes
No bother. You know me, I’m full of it!
2 Likes
… from Russia…
A lot of business sites are not for converting, though — they’re for decision support. Having a polished and funky site makes the business look well resourced and dynamic. It’s to impress: it feels like a stylish title sequence on a blockbuster movie. The information itself is pretty dull and predictable — if it didn’t have the animations, it would be as dead as a dead thing on a dead night, web 1.0.
I’d say you’re confusing “a lot” with “some”. But hey, it’s just not-picking. My point still stands.
For me there is an aesthetic element also to web design. When a site lacks coherence in how it looks (functional, clear, aesthetically pleasing, I leave. When I can feel the effort and care put into its design, I appreciate it cos the designer is thinking about me as a viewer. Web design is also an art form and I’m sure when you create a site for customers, aesthetics will be a part of it… how they want to ‘look’ and be presented?
If the goal is to convert, look at your wife … my girls do it every day with makeup and hair. Dressing things up … and it works no?
I was looking at it again and still like how it’s done.
Hey, each to their own.
As far as Im concerned, when the “design” gets in the way of the content, the design is wrong. And if the client has nothing to say on the website, so wants a lot of animations to make up for that fact, well, I just say no.
But everyone is different.
1 Like
Yep… and that’s a good thing
1 Like
As James suggested, that is a straightforward overlapping Source Grid and you could create that exact effect using an animate stack (or some code) to animate on scroll in a diagonal direction. Aniate does horizontal and vertical I AFAIK.
“a straightforward overlapping Source Grid” as in a straightforward shooting party.
For custom animations HypePro could be the answer but you need to build it manually. You also need a vertical responsive version.
Below a draft
Could a stack version be of interest to others too?:)
3 Likes