The interactions are very nice. I like the two first… what did you use to script the svg anim (drawing the outline first then the depth)?
Text-typing doesn’t seem to work here (chrome)
Yes! I’ve never really been able to achieve a full 3D card flip. I’m losing the perpective when I try. http://sab.webflow.com/html/perspective There’s a link to the tutorial I followed.
Are you going to make your sandbox free to duplicate or generate a public link so we can analyse how you’ve done things?
How to recreate this site in Webflow. Specifically the svg’s used.
Also would love an alternate version of your first interaction from a slide over to a content push, especially for mobile nav menu displays.
Second vincents request for a 3d card flip effect. Would love to know how to do this in Webflow.
The SVG drawing uses Vivus (vivus.js - svg animation). Fairly simple to implement, you just have to convert an SVG image to inline then add a little bit of script.
I’ll have a look at your suggestion too & see if it’s something i can figure out
And absolutely - once i’ve created a few more i’m going to create a cloneable version of the site, as well as adding some instructions to each of the pages. Will keep you posted!
Page pre-loading is on my to-do list. Currently trying to figure out the necessary mark-up to get it functional…i’ll keep you posted.
The Andy Wolf site is pretty nice. I built a similar site layout with angled dividers here: manchester-music-social.webflow.com . Also cloneable if you go through my public profile
The animation effects on that particular site are pretty inspiring too…might take some research to figure those out, but i’ll give it my best shot!
@vincent - sorry, forgot to clarify on the way the drawing animation works!
All elements in your SVG image need to have a stroke property - a blocked filled circle for example won’t work. The javscript interprets the strokes in the file and “draws” them out. You can select whether to have the lines drawn one by one, all at the same time etc.
Implementing it to your taste takes a bit of work, but the demos on the Github page are a good starting point for most things. You could prospectively just take the code for the 1st demo on the site (which is the same one in my demo) and replace the SVG file. Instant result!
Thanks, I stumbled upon Vivus many times in the past months. I admit I’m waiting for a better solution to animate SVGs, one with no code manipulation actually. It will come (:
yeah I have to agree it’s an overly complicated solution for what it is.
What i’m hoping to create in the next couple of weeks is a “simple” Vivus implementation that I can import and export across projects.
Hopefully i’ll be able to create a ready-made script and a handful of instructions for adding your own SVG content. It should be as simple as adding the script, adding your SVG and you’re ready to go…that’s the plan anyway!
@topelovely - the whole thing is a work in progress. I think thats made pretty clear in the comments above - it will eventually have an instruction section on each page.
For the time being however I am just sharing to ask if anyone has any suggestions for things to be built, as has been done in the comments above.
I’m just making some updated to bits & pieces: some of the scripts & assets are hosted on my web servers at present, so i’m going to move these to somewhere more central (maybe dropbox, github etc) so that people cloning the site doesn’t destroy my bandwith
Will be sure to update this post as soon as I have everything tidy & ready for people to clone.
