LOGIN
Anton Voltchok
Software Engineer & Design Lead at Collaborizm
 · New YorkU.S.
Edit
Delete
Share
Report
TASK
Open
  ·  Close Task

We’re looking for anyone who knows a bit about web related technologies to step up and help us out. If you’re not a professional app developer and just want to learn, that’s ok too, this task is an easy one. We’re busy working on large development goals and don’t have time to work on some of the smaller fun tasks. So we’re looking for people to contribute & build some cool stuff.

Any contributors that submit some meaningful work on this task will be able to add Collaborizm to their resume’s / job experience.

So the task we have for you guys deals with #SVG , #CSS and a tiny bit of Javascript for doing the necessary math. If you look at our homepage, you will see some objects I animated floating in space. So what we’ll be doing is animating the Earth with code based on the SVG properties stroke-dasharray and stroke-dashoffset. To those unfamiliar here are a few examples using this technique:

Ok so we don’t need to get that crazy like the above, just wanted to show you guys what’s possible. Anyways, I want the earth image on the home page which currently has hand drawn “connections” (curved lines connecting different countries together), to be replaced by another earth image without the ‘connecting lines’, and I want you guys to animate those lines so it looks like they are jumping from one country to another along a curve.

So what we need is something as basic as the example below:

Cleaned up SVG

<svg width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

CSS

.path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

Javascript for getting path length

var path = document.querySelector('.path');
var length = path.getTotalLength();

dashed exampled:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Here’s a very good tutorial on the subject to get you guys started.
https://jakearchibald.com/2013/animated-line-drawing-svg/

So to sum it up:

  • Concept is to try to animating the Collaborizm homepage globe’s connections (curved white lines) to look like they are jumping from country to country
  • For practice you can use a 500 x 500 pixel circle, I’ve made a code pen below as an example:

http://codepen.io/AntonVolt/pen/xOqYdJ

If anyone’s up for the challenge let me know how it goes!

Javascript
1 like 
Like
Share
Load 4 previous comments
Bi Sh
Design Invention Research
 · KathmanduNepal
Edit
Delete
Share
Report

So instead of This current static one,

,
we want the connection to be animated… starting form orination and reaching to destination. for example 4 connection are visible at current static picture. If we animate these 4 Lines just he Other floating objects… may in in one second starting and reaching to destination and repeat… will that serve current Task?

1 like 
Anton Voltchok
Software Engineer & Design Lead at Collaborizm
 · New YorkU.S.
Edit
Delete
Share
Report

Bi Sh It can be any combination that you would like, however the one requirement is it has to loop, if you notice the satellite/Arduino board/etc… icons on the homepage are on infinite repeated loop.

There also doesn’t have to be 4, could be three, or even 2 if it looks ok. I would imagine it as when 1 connection is close to reaching the destination, another connection fires off, and this is repeated until the last connection in which case the animation starts the loop again.

So to whoever is following this task, here’s a little hint, the timing and looping of the animation can be controlled with the following:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

animation-delay --> so if you have 3 lines, each being animated for 1 second, you would set animation-delay of 1 second on the 2nd connection, and animation-delay of 2s on the 3rd connection, then set the animation-duration to 3s total. Then as I mentioned, it loops endlessly so it requires the property/value => animation-iteration-count: infinite

If anyone has any questions specific to the task I’ll be happy to help

1 like 
Bi Sh
Design Invention Research
 · KathmanduNepal
Edit
Delete
Share
Report

so, for now… suppose Three links… from A to B, form C to D, and E to F… trailing animation suppose taking around 3 seconds to reach the destination, once it reaches destination it again starts. As you suggested… if three links then 1 second delay between A, C and E. Will try my hand on this…

2 likes 
Anton Voltchok
Software Engineer & Design Lead at Collaborizm
 · New YorkU.S.
Edit
Delete
Share
Report

Bi Sh I’m looking forward to seeing it, feel free to post your code and link a codepen(if you use it)

0 like 
Bi Sh
Design Invention Research
 · KathmanduNepal
Edit
Delete
Share
Report

previously i tried few animation games in Flash… and during my engineering days in India i simulated almost all kind of curves and equations in C… graphics projects… never tried Java… switched to Humanities (Psychology etc) and missed Java. But theoretically i know lot of its capability, use and potentials. Wanted to try myself… a year back tried some one line code that was able to generate Revolving 3D earth with Real Time Links and Status and Animations… even Realtime Clouds and Weather etc. Definitely want to try this here, as a separate supporting project as you suggested.
Regarding this Task, i want to do this… can you please briefly outline the steps if i have to start form zero…
… i’m going through the links… can i modify there and see the result? or need separate IDE?

0 like 
Anton Voltchok
Software Engineer & Design Lead at Collaborizm
 · New YorkU.S.
Edit
Delete
Share
Report

Bi Sh

For anyone who would like to partake in this challenge, one of the links I posted above is what I made in CodePen as an example for anyone who would like to take a stab at this.

Codepen is an online IDE for Javascript/CSS/HTML.
http://codepen.io/AntonVolt/pen/xOqYdJ => You can make an account there and copy what I started.

HTML/CSS/Javascript are currently what everything on the internet is mostly made out of. Also a gigantic number of iOS/Android apps are hybrid and are also made with those same 3 languages. The good news is if you programmed previously a little it shouldn’t take too long to catch up, and there are an endless amount of free materials on the internet. HTML you’ll learn fast because it’s very basic, so focus on CSS (the styling / movement) and Javascript (the functionality).

Plus if you learn these you will likely be of a lot of value to many projects since everything im one way or another is connected to the internet these days

1 like 
Leave a reply...
DISCOVER
CHAT
ALERTS
-2
DISCUSSIONS
-1
FEED