Interactive Elements Sandbox (made with Webflow Interactions & Javascript)

Hi guys

I’m currently putting together a webflow sandbox for future projects, focusing on interactive elements (mainly Javascript & Webflow Interactions).

Here’s the first couple of bolt-ons i’ve managed to integrate into Webflow this morning:
http://webflow-bolt-ons.webflow.com/

So far we have:

  • Animated menu icons & “slide over” fullscreen menu
  • Animated SVG Logo Illustration
  • “Text Typing” Animation
  • Javascript Header Background Animation

I’ll continue to add to the list over the next few weeks, incorporating as many cool little interactive elements as I can build.

Quick questions to you fine people:

  • Is there anything you’d like to see built? I’ll try & incorporate suggestions where possible :slight_smile:
  • Would it be helpful to add written instructions & a cloneable version of the site for the community to use?

Cheers!
Evan

5 Likes

Rave on! :wink:

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?

awesome work there @EvanJones !

Would really like a cloneable version of the site to see how u put all this together.

Some suggestions;

How to create something like this in Webflow; Page Preloading Effect | Codrops

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.

Thanks Vincent!

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 :smile:

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!

1 Like

@Amreet_Gill cheers - much appreciated!

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 :smile:

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!

Very cool animated SVG, really like those! Let me know when you have a cloneable version, would be very cool to use. Good job

1 Like

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!

“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.”

I’m interested (:

Please can you kindly check your page. It is not scrolling.

@topelovely I’m not sure what you mean?

None of the pages are meant to scroll anywhere at present, they’re just examples of javascript & interactions bolt-ons?

See the screenshot of the message on of your pages: Screenshot by Lightshot

@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.

That’s cool, Evan! Could you give a share-link to dig into the sand-box?

@Alexey_Kargapolov - absolutely!

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 :smile:

Will be sure to update this post as soon as I have everything tidy & ready for people to clone.

2 Likes

This is awesome. Definitely interested in a clonable version, let me know when it’s good to go!

1 Like

I’m getting a 404 on this currently :confused:

Was really keen to see what all the fuss was about!

Hey @quarshcreative

I got rid of this one as it was all a bit messy. Working on a new one though now i’m a bit more clued up on my Javascript…i’ll keep you posted :slight_smile:

1 Like

Always a good idea to have a spring clean up every now and then :slight_smile: