Anyway in doing this interaction on Webflow?

Hi Guys,

I really like the interactions on the circle graphics midway down the page on the following site: (the circles flipping)
http://www.staelsborc.com/

I was wondering if it was possible to have a similiar interaction on a webflow website?

M

Its not possible only within the webflow designer. But if you want to use some code, check this thread:

Thank you Daniel! Sorry I should have searched more thoroughly

No problem. You ll need to change some code when you want the script to work properly on hover instead of click but it should work the same way. If you have any trouble, feel free to reply again.

Hi @Daniel_Schultheiss ,

Ive got it working 80% and I used your tutorial on the other forum thread. The problem I am having is that when it flips the text block on the back flips but disappears. Please see in link below.

http://woodlandscaravanpark.webflow.io/

Im hoping it is possible to have text on the back card?

https://preview.webflow.com/preview/woodlandscaravanpark?preview=dfa1c5e805913717f0246cb7e4f12041

Id appreciate any ideas :smile:

Thanks
M

Its hard to recreate the mistakes because I cant see the changes that I ve made within your preview (because I cant publish the site) - but first of all:

the “Front - Card” needs to have a HIGHER z-index than the back-card. Change that :smile:.

I ll check if I can make some “try & error” investigations within my browser but if thats wont work maybe you could make your site to be cloneable?

Thanks for the quick reply!

So you would like me to clone the site then share it?

Yeah maybe set it to “PUBLIC” and select “ALLOW OTHER USERS TO CLONE THIS SITE”.
Then post a link to your public profile.

After that set it back to “private”. That would be awesome.

If you dont know how to do that:

Go to your Dashboard and your site - select the little config-icon in the bottom right corner.

Select the site to be visible for “PUBLIC”

Check the button

Select your site from the top dropdown menue and add some random description text

Check the selector on “allow users to clone this site”

Press the “Create Public Page” button

After that go to “Account Dropdown” and copy paste the link for your public profile and send it to me or post it within this thread.

For some reason i dont have that option of site visibility?

Wups…we ll I dont know what the problem may be, maybe I m missing something?
Is this your personal account? What plan do you have? @cyberdave maybe you can help us out of this ;P.

Hi @matt041105 and @Daniel_Schultheiss, the issue with the cloning, is that the site is based on a paid template, and cloning of paid templates is not allowed at the moment.

I hope this helps !

Ah :confused: this makes things a little difficult!

Hi @matt041105, thanks for contacting me via support on this. I see that in your case, you should be able to duplicate the site and make transfer of the duplicated site to another webflow user.

See this article: Dashboard | Webflow University

Regards,
Dave

1 Like

Hey Matt,

I think I got it … first of all I would suggest to never give a class to a column.
Try to put a div as a next element within the column and name that.

Second thing is, you HAVE to name front and back always exactly like that.
When you want to have different background images within that, give it a sub class
e.g. “front tariffs”.

I recreated this structure in one of the columns, try to build the others like that:

.front and .back must have width and height values. Both also absolute positioned within the relative .card-grid element. front has a higher z-index than .back.

You can then distinguish between the different topics with a second class given to the .back element. e.g.

It should work fine then.

Daniel

You can check this example. I edited the lower right (last) teaser module “tariffs” with the new struture and values.
http://testfuermat.webflow.io/

we managed to fix that issue, site got transferred - but as we realized I cant transfer it back to him because I dont own a pro plan…just personal :frowning:. i hope that matt still got his cloned version …

edit: never mind. everything okay :stuck_out_tongue_winking_eye:

1 Like

Yes i do, thank you very much @Daniel_Schultheiss. A big help :smiley:

2 Likes

Hi @Daniel_Schultheiss

I was wondering if it was possible to make the circles flip when you scroll down that page? Particularly on devices?

If you look here, i think you’ll see what I want to achieve! http://woodlandscaravanpark.webflow.io/explore-the-park

Hmmm, sorry I have to pass on that one. :confused:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.