Create a website like this

Hi, It’s possible to create something like this in Blocs?

Blocs by itself… no, with blocs… you probably could.

To be fair, if you are asking this question then… no. :neutral_face:

1 Like

According to Walid Beno, whom posted the concept on dribble, his comments suggest that its composited and rendered in After Effects. Do you have a link to an actual site that used this concept?

You could do something faux using various videos in Blocs with additional scripting to control various aspects. A more dynamic approach would be use 3D models and a library like Three.js. But with that approach you would be better suited directly in a code editor to do that either post export from Blocs or without using Blocs entirely. You could leverage a library like GSAP with custom scripting to control literally everything including the Three.js aspects.

Or you can just use After Effects and never make a website. I’m not sure this concept was ever actually made into a website, although it could be as described above. :wink:

1 Like

you can do it with hype I think

@anon34927337 I think you’re right. It needs an animation app to create the all the moving elements. Once they are created, you can add them to a blocs site with no problem. I think there is often confusion about animations. Many people think that because a web development app contains animated options, that you can build a complete animation like in After Affects or Hype. However, these are two different types of app intended for two different purposes. To a degree, you can even use Keynote to create animations and plug those into Blocs. They work quite well. HERE is a simple example created with Keynote. However, if you want all the bells and whistles that CAN be created, you will need more than a website development app - you will need to use a dedicated app to create the elements and then just add them to Blocs.

Does Hype support WebGL / 3D features inherently (not CSS Transforms)? I don’t believe so without additional libraries and coding. Look at the vehicles that make turns in the streets. More specifically does Hype offer dynamic lighting as a feature in any regard within the app, vector or otherwise?

I suppose you could build it with SVG vectors and instead do some sort of faux 2.5D if you can get the result performant enough. You could utilize gradient overlays on the streets to darken the cars as they progress down the streets. Also use clip masks with gradients on the vehicles themselves so as they turn the gradient moves to present a faux lighting effect. But you can also see the cars reflecting off each other a bit, note the rollover in the first card. If done in Hype you could use its motion path feature, if done with GSAP you can use its MotionPathPlugin.

I would guess that you would still require some custom scripting even in Hype to complete things. Im not overly familiar with Hype but I watch its development progress. I’ve yet to see truly immersive experiences made with HYPE that you can create with GSAP and various libraries via custom scripting.

If you really wanna have fun (go nuts) use a single DIV and do it all with CSS/SASS for creation and animation. :wink: