What Techniques Are Used On This Site

Hi,

I am trying to reproduce some elements of this site before chosing which platform I am going to create it on. Is this something Webflow can do with ease?

Thanks!

No platform is capable of doing that natively. You will need custom javascript to get all of those functionalities up and running, and Webflow definitely allows you to do such thing.

1 Like

taking a quick look, I’d say you could do this with the built-in interactions, it just needs a bit of a think-through on how you’re going to do it, that’s all.

3 Likes

Sure there is stuff in there that webflow IX can do. I meant the navigation between the “portfolio items”. But even that might be possible to achieve with IX2. I’m just a lazy person that don’t like to use IX for everything. Sometimes, JS makes the process much faster

1 Like

I am pretty sure everything here can be done in Webflow. Not “with ease” - Sarah is correct, you will need a good experience working with interactions to achieve this, but it is possible.

3 Likes

The code you need would be available from Hakim El Hattab such as via, with other custom JS.

1 Like

Thanks very much to all of you for the answers! I’m glad to hear it’s possible.

I would like to, prior to comitting to Webflow, have a test period during which I would like to reproduce some of the elements from this site. My free trial account is all setup.

So, starting from the beginning, how could I create for exemple, the “Piano Trio Fest” words in white on the background which react to mouse over by stretching/shrinking as I move the pointer around. Question is, how should I even start with something like this? I’ll keep adding elements as I go along, but I need to take it step by step as I am new to this, and Webflow can be overwelming.

Any help is welcome, of course.
Cheers,

This video will point you in the right direction for the “Piano Trio Fest” text.

2 Likes

Thanks for the tip, it does help. But I see that on the original site the letters are SVG generated and the interaction is controled by JavaScript on mouse hover, as far as I can tell. How can I create the SVG in Webflow? Or would I be better off just using text boxes, or just creating the SVG for the text on a program like Illustrator?

You can’t “create” svg files in Webflow, you can control them though, so you’d need to create the svg letters in Illustrator and then export them and upload them to Webflow where you can control the effects desired.

1 Like

To add to Aaron’s words you will NOT be able to achieve this effect with simple transformation of the svg images here. You will need to cut your svg objects into pieces where only middle piece would stretch this and that way so that the edges are not distorted. That is if you want to reproduce the effect exactly the way it is on that site.

1 Like

Thanks again for the responses, and Wow, this is turning out to be a chalenging project/hobby :smile:
I understand what you mean, but how can I cut the SVG’s and still have them looking whole?

When you create your svg objects just make them consisting of separate elements.

1 Like