0

I am trying to implement something on my website that is similar to the "Process" elememt of the page found here: https://blacksmith.agency/

Can someone please help me put a name to the element on this page and push in the right direction in terms on implementing it?

closed as off-topic by jazZRo, Mayo, Devin, JonW May 30 '17 at 8:40

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – jazZRo, Mayo, Devin, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

1

If you're talking about the left panel animation, I would call it "On scroll morphing". Shapes are moved and resizing according to user scroll.

To implement that kind of animation I would start by designing with precision each step/chapter of your illustration before starting to find a way to create a smooth morphing on line and dots. If you're asking for technical advices about how to implement this kind of animation I'm afraid you're not on the right place.

If you are referring to the whole page, this could be considered as a one page presentation. The main structure and the navigation between steps of the "process" section is really similar to slides on presentation tools like Keynote, Google Slides or Powerpoint.

1

The element you are referring to does not seem to have an official name, however searching in google for "scroll controlled svg animation" will definitely get you in the right direction.

If you are starting out, it may be best idea to use an existing JS library such as: http://scrollmagic.io/

This blog post lists several Sites that use this same technique, and several Libraries that you can use to implement on your own: http://www.vandelaydesign.com/scroll-animation-effects-online-animation/

Not the answer you're looking for? Browse other questions tagged or ask your own question.