#Getting started
-
git clone https://github.com/copleykj/ConnorAtherton.git
-
mrt update
-
meteor run
An easy way to animate SVG elements.
Home Page: http://connoratherton.com/walkway
License: MIT License
#Getting started
git clone https://github.com/copleykj/ConnorAtherton.git
mrt update
meteor run
Currently, all animations are scheduled to execute as soon as possible. It would be better to have more control over when an animation should start.
Is there any way to reinitialise the animation on click a button?
Walkway looks amazing, is it supposed to work on any SVG path or shape?
When I call draw on a path I exported from Illustrator, the SVG does not draw but just appears immediately. The callback to draw() is still successfully called however.
I added the below path to example/index.html. All other shapes do the "walkway" correctly, but this path just appears immediately.
<svg version="1.1" id="branch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="576px" height="720px" viewBox="0 0 576 720" enable-background="new 0 0 576 720" xml:space="preserve">
<path d="M567.33,492.045c-2.484-0.357-4.945-0.857-7.383-1.479c0.416-13.219,0.684-26.436-0.096-39.646
c-1.564-26.566-7.203-52.955-15.348-77.391c-4.152-12.455-8.938-24.637-14.783-35.927c-5.99-11.567-13.281-21.9-20.816-31.815
c-2.572-3.383-5.176-6.728-7.777-10.077c-1.631-8.256-3.721-16.297-6.195-23.942c-0.896-2.773-4.449-1.558-3.539,1.258
c1.648,5.098,3.127,10.384,4.416,15.795c-3.656-4.78-7.264-9.622-10.711-14.651c-0.83-1.213-1.654-2.448-2.479-3.694
c-0.104-1.54-0.174-3.063-0.193-4.562c-0.031-2.643-2.793-2.994-3.502-1.051c-2.367-3.564-4.795-7.079-7.41-10.304
c0.268-0.91,0.533-1.789,0.791-2.6c0.898-2.826-2.654-4.042-3.541-1.258c-0.051,0.162-0.104,0.339-0.154,0.504
c-1.682-1.811-3.447-3.487-5.334-4.956c-3.07-2.392-5.957-5.134-8.768-8.013c0.062-0.289,0.139-0.571,0.197-0.862
c0.521-2.556-2.057-3.832-3.15-2.222c-1.041-1.11-2.076-2.229-3.113-3.349c-0.084-1.36-1.115-2.543-2.139-2.303
c-4.492-4.812-9.055-9.469-14.148-13.097c-1.004-0.715-2.02-1.393-3.041-2.055c1.422-2.334,2.773-4.733,4.035-7.198
c1.309-2.555-1.871-4.922-3.168-2.388c-1.312,2.562-2.727,5.061-4.232,7.483c-3.973-2.395-8.018-4.591-11.984-7.028
c-0.326-0.201-0.645-0.416-0.969-0.624c0.084-0.315,0.176-0.623,0.25-0.942c0.686-2.914-2.82-4.155-3.527-1.295
c-3.766-2.721-7.389-5.723-11.234-8.294c-0.719-0.481-1.453-0.926-2.182-1.386c5.285-11.512,2.424-13.184,0.307-15.942
c-0.555-0.721-1.549-0.955-2.225-0.37c-3.592,3.102-7.164,6.279-10.691,9.546c-14.188-6.382-29.432-9.521-44.391-10.5
c-0.451-1.904-0.891-3.814-1.307-5.734c-0.633-2.935-4.176-1.687-3.539,1.259c0.309,1.429,0.646,2.844,0.977,4.265
c-0.645-0.026-1.284-0.038-1.927-0.057c-0.664-0.713-1.684-0.893-2.397-0.065c-1.611-0.023-3.221-0.012-4.828,0.023
c-0.652-1.15-1.83-0.859-2.539,0.095c-2.076,0.083-4.15,0.208-6.223,0.378c-0.236-1.827-0.531-3.592-0.918-5.264
c-0.676-2.917-4.219-1.672-3.541,1.258c0.326,1.409,0.6,2.858,0.83,4.334c-2.385,0.249-4.768,0.551-7.145,0.895
c-0.377-1.809-0.768-3.585-1.158-5.304c-0.66-2.925-4.201-1.68-3.539,1.258c0.336,1.489,0.682,3.035,1.02,4.606
c-3.134,0.511-6.26,1.098-9.379,1.735c0.153-0.19,0.312-0.373,0.465-0.565c1.691-2.139-0.906-5.484-2.596-3.346
c-1.078,1.364-2.19,2.673-3.315,3.962c-1.125-1.289-2.237-2.598-3.315-3.962c-1.689-2.138-4.287,1.207-2.596,3.346
c0.153,0.193,0.312,0.376,0.466,0.566c-3.12-0.638-6.246-1.224-9.38-1.735c0.338-1.571,0.683-3.117,1.02-4.606
c0.662-2.938-2.88-4.183-3.54-1.258c-0.39,1.719-0.78,3.496-1.157,5.304c-2.378-0.344-4.76-0.646-7.146-0.895
c0.23-1.476,0.504-2.925,0.83-4.334c0.679-2.931-2.865-4.175-3.54-1.258c-0.387,1.672-0.682,3.438-0.918,5.264
c-2.073-0.17-4.147-0.296-6.224-0.378c-0.708-0.955-1.887-1.245-2.538-0.095c-1.607-0.035-3.218-0.046-4.828-0.023
c-0.714-0.83-1.734-0.649-2.399,0.065c-0.642,0.019-1.281,0.03-1.925,0.057c0.329-1.42,0.668-2.836,0.977-4.265
c0.636-2.946-2.906-4.194-3.54-1.259c-0.415,1.92-0.855,3.831-1.307,5.734c-14.958,0.979-30.202,4.119-44.39,10.5
c-3.527-3.267-7.1-6.444-10.691-9.546c-0.677-0.585-1.671-0.351-2.225,0.37c-2.117,2.758-4.979,4.43,0.307,15.942
c-0.729,0.46-1.463,0.905-2.183,1.386c-3.846,2.571-7.468,5.574-11.234,8.294c-0.707-2.86-4.212-1.619-3.527,1.295
c0.075,0.319,0.167,0.627,0.25,0.942c-0.323,0.208-0.642,0.423-0.969,0.624c-3.967,2.437-8.011,4.634-11.984,7.028
c-1.505-2.423-2.919-4.921-4.231-7.483c-1.298-2.534-4.478-0.167-3.169,2.388c1.262,2.465,2.613,4.864,4.036,7.198
c-1.021,0.663-2.038,1.34-3.041,2.055c-5.095,3.628-9.657,8.286-14.148,13.097c-1.023-0.24-2.056,0.943-2.14,2.303
c-1.036,1.12-2.071,2.239-3.113,3.349c-1.094-1.61-3.672-0.333-3.15,2.222c0.06,0.291,0.136,0.573,0.198,0.862
c-2.812,2.878-5.697,5.621-8.769,8.013c-1.887,1.469-3.651,3.145-5.333,4.956c-0.052-0.166-0.104-0.342-0.155-0.504
c-0.886-2.784-4.438-1.567-3.54,1.258c0.258,0.812,0.523,1.69,0.791,2.6c-2.615,3.225-5.044,6.74-7.41,10.304
c-0.71-1.943-3.471-1.591-3.503,1.051c-0.019,1.499-0.09,3.022-0.193,4.562c-0.823,1.246-1.647,2.48-2.479,3.694
c-3.447,5.029-7.054,9.872-10.711,14.651c1.289-5.411,2.768-10.697,4.416-15.795c0.911-2.816-2.642-4.032-3.539-1.258
c-2.474,7.645-4.563,15.687-6.194,23.942c-2.602,3.35-5.206,6.694-7.777,10.077c-7.536,9.915-14.826,20.248-20.816,31.815
c-5.846,11.29-10.631,23.472-14.783,35.927c-8.145,24.436-13.783,50.824-15.348,77.391c-0.779,13.211-0.513,26.428-0.097,39.647
c-2.437,0.621-4.898,1.12-7.383,1.478c-2.325,0.333-2.351,5.068,0,4.73c2.542-0.365,5.052-0.879,7.535-1.499
c0.542,16.25,1.147,32.499,0.184,48.743c-0.93,1.239-1.841,2.511-2.731,3.817c-1.555,2.28,1.031,5.64,2.596,3.344
c15.169-22.253,36.374-34.48,55.708-49.483c9.271-7.195,18.134-15.322,25.727-25.312c8.808-11.587,14.181-27.129,19.895-41.39
c5.443-13.583,10.218-27.586,18.971-38.257c5.704-6.954,13.169-9.846,20.449-12.94c20.085-8.537,37.862-22.029,53.725-40.092
c12.526-14.264,23.732-31.51,28.343-52.17c0.09,0.025,0.179,0.055,0.277,0.066c12.897,1.383,24.322-3.614,35.109-12.448
c4.613-3.778,9.025-7.928,13.502-11.924c4.478,3.996,8.891,8.146,13.503,11.923c10.787,8.834,22.211,13.831,35.109,12.448
c0.098-0.011,0.188-0.041,0.277-0.066c4.609,20.66,15.816,37.906,28.342,52.17c15.863,18.062,33.641,31.554,53.725,40.091
c7.281,3.096,14.746,5.986,20.449,12.941c8.754,10.67,13.527,24.674,18.971,38.256c5.715,14.262,11.088,29.803,19.895,41.391
c7.594,9.99,16.455,18.117,25.727,25.312c19.334,15.002,40.539,27.23,55.709,49.483c1.564,2.297,4.15-1.062,2.596-3.344
c-0.891-1.307-1.803-2.578-2.732-3.816c-0.963-16.245-0.357-32.495,0.184-48.745c2.484,0.621,4.994,1.135,7.535,1.5
C569.682,497.113,569.656,492.377,567.33,492.045z M445.832,266.411c2.188-7.871,5.209-15.224,7.398-23.054
c1.791,1.742,3.627,3.4,5.535,4.899c0.715,0.562,1.418,1.137,2.107,1.726c-5.471,15.043-8.109,31.195-10.293,47.479
C445.461,288.16,442.619,277.978,445.832,266.411z M394.887,181.449c0.99,1.249,0.047,4.732-2.016,9.27
c-1.721-0.998-3.461-1.941-5.223-2.829C390.045,185.706,392.459,183.558,394.887,181.449z M393.982,196.927
c4.73,3.217,9.273,6.791,14.109,9.951c-3.227,8.267-9.439,14.879-15.404,19.439c-2.86,2.188-5.97,4.249-9.212,5.824
c-1.599-2.428-3.257-4.788-5.081-6.975c-0.582-0.697-1.175-1.382-1.773-2.059C382.641,214.475,389.699,204.846,393.982,196.927z
M288.042,224.636c-3.438-1.997-6.802-4.408-9.637-7.492c-0.595-1.072-1.188-2.145-1.767-3.233
c3.699-4.62,7.557-9.015,11.403-13.425c3.847,4.41,7.705,8.805,11.403,13.425c-0.578,1.087-1.171,2.16-1.766,3.231
C294.845,220.227,291.48,222.639,288.042,224.636z M250.322,194.323c2.285,4.644,4.509,9.345,6.466,14.189
c-0.839,6.987-2.502,13.338-6.058,18.077c-2.191,0.339-4.39,0.591-6.591,0.776c0.831-10.965,2.084-21.833,4.336-32.542
C249.092,194.657,249.706,194.484,250.322,194.323z M216.422,210.904c1.397-1.509,2.843-2.925,4.387-4.13
c2.769-2.162,5.758-3.858,8.812-5.306c-1.992,6.139-4.127,12.201-6.385,18.185C221.035,216.646,218.756,213.738,216.422,210.904z
M277.543,187.989c0.312,0.397,0.632,0.784,0.947,1.178c-2.534,2.479-5.099,4.911-7.664,7.354c-0.038-2.45,0.113-4.935,0.386-7.412
c2.022-0.51,4.044-1.025,6.068-1.528C277.352,187.721,277.439,187.856,277.543,187.989z M298.541,187.989
c0.104-0.132,0.191-0.268,0.262-0.408c2.024,0.503,4.047,1.018,6.069,1.528c0.272,2.476,0.424,4.96,0.386,7.41
c-2.564-2.442-5.129-4.875-7.663-7.353C297.909,188.772,298.229,188.387,298.541,187.989z M327.608,194.823
c2.252,10.71,3.505,21.578,4.335,32.542c-2.201-0.185-4.399-0.437-6.59-0.776c-3.555-4.739-5.219-11.09-6.059-18.077
c1.957-4.844,4.182-9.545,6.467-14.189C326.378,194.484,326.992,194.657,327.608,194.823z M346.463,201.468
c3.055,1.447,6.044,3.144,8.812,5.306c1.543,1.205,2.989,2.621,4.387,4.129c-2.335,2.834-4.613,5.743-6.814,8.749
C350.59,213.669,348.454,207.606,346.463,201.468z M358.514,182.954c7.191,1.553,14.367,3.562,21.332,6.407
c-6.062,5.789-11.959,11.879-17.543,18.394c-5.23-5.622-11.309-9.374-17.701-12.175c-1.537-5.025-2.97-10.102-4.277-15.234
C346.396,180.802,352.461,181.647,358.514,182.954z M323.779,180.036c0.627,2,1.204,4.008,1.744,6.021
c-0.459,0.926-0.919,1.853-1.379,2.78c-1.984-0.541-3.979-1.043-5.973-1.552c-0.086-2.348-0.195-4.664-0.365-6.911
C319.797,180.227,321.787,180.108,323.779,180.036z M303.795,181.974c0.118,0.636,0.23,1.275,0.34,1.917
c-1.656-0.382-3.31-0.765-4.965-1.139C300.711,182.476,302.252,182.212,303.795,181.974z M272.29,181.974
c1.542,0.239,3.082,0.502,4.622,0.777c-1.654,0.374-3.306,0.757-4.961,1.138C272.059,183.249,272.172,182.609,272.29,181.974z
M252.305,180.037c1.991,0.072,3.981,0.19,5.972,0.338c-0.17,2.247-0.279,4.562-0.365,6.91c-1.993,0.509-3.988,1.011-5.972,1.552
c-0.46-0.928-0.919-1.854-1.378-2.78C251.101,184.044,251.678,182.037,252.305,180.037z M217.571,182.954
c6.052-1.306,12.117-2.151,18.188-2.609c-1.308,5.132-2.74,10.208-4.277,15.233c-6.393,2.801-12.472,6.554-17.701,12.176
c-5.584-6.514-11.481-12.604-17.542-18.393C203.203,186.516,210.379,184.507,217.571,182.954z M181.198,181.45
c2.428,2.108,4.841,4.257,7.238,6.441c-1.762,0.888-3.502,1.831-5.223,2.829C181.151,186.182,180.207,182.698,181.198,181.45z
M182.102,196.928c4.283,7.918,11.341,17.547,17.361,26.18c-0.599,0.677-1.191,1.362-1.773,2.059
c-1.824,2.187-3.482,4.547-5.082,6.976c-3.242-1.576-6.351-3.637-9.211-5.824c-5.965-4.56-12.179-11.172-15.405-19.439
C172.828,203.718,177.372,200.145,182.102,196.928z M117.318,248.257c1.909-1.499,3.744-3.158,5.535-4.899
c2.19,7.83,5.211,15.184,7.398,23.054c3.213,11.566,0.371,21.749-4.748,31.05c-2.184-16.284-4.822-32.436-10.292-47.479
C115.901,249.394,116.603,248.819,117.318,248.257z M43.458,477.843c-7.45,5.122-15.346,9.108-23.552,11.663
c-0.538-18.763-0.775-37.504,1.672-56.157c4.236-32.305,13.467-64.167,27.16-91.787c6.837-13.788,15.763-25.64,24.693-37.208
c-4.423,28.55,2.944,71.484,0.809,72.748c-14.493,8.577-14.873,32.166-8.04,49.499c-19.253,3.539-21.181,28.866-23.152,49.549
C42.976,476.903,43.15,477.467,43.458,477.843z M72.043,450.049c-4.428,5.826-9.223,11.238-14.318,16.124
c-0.301-11.386,5.778-21.026,12.861-27.02c0.822-0.696,0.976-1.815,0.735-2.763c1.718,2.49,3.618,4.64,5.671,6.312
c0.08,0.065,0.16,0.107,0.24,0.155C75.543,445.31,73.817,447.715,72.043,450.049z M93.351,413.854
c-1.866,4.356-3.924,8.579-6.131,12.673c-7.41-7.164-11.348-24.24-5.25-33.882c0.108-0.172,0.189-0.35,0.256-0.531
c2.928,6.438,6.474,12.508,10.712,18.08c0.514,0.677,1.117,0.82,1.656,0.633C94.19,411.844,93.779,412.856,93.351,413.854z
M97.557,318.327c-6.505-13.421-1.936-30.772-0.574-46.101c1.898-2.72,3.794-5.445,5.685-8.191c1.068-1.551,2.164-3.03,3.29-4.447
C111.078,279.519,115.417,312.376,97.557,318.327z M108.084,378.011c-0.728,1.23-1.408,2.499-2.064,3.787
c-3.123-12.361-6.731-27.81,2.147-37.466c3.432-3.731,7.739-6.248,11.634-9.054c3.775-2.721,7.4-5.7,10.855-9.018
c0.038,0.045,0.065,0.093,0.107,0.138c5.298,5.59,13.379,13.752,14.596,23.256C134.734,354.693,115.042,366.261,108.084,378.011z
M153.322,294.802c-1.729,6.713-4.83,12.779-7.254,19.141c-0.891-0.872-1.782-1.741-2.613-2.72
c-0.241-0.283-0.498-0.455-0.759-0.551c5.104-9.548,7.779-20.844,7.02-32.952C153.862,281.765,155.305,287.096,153.322,294.802z
M147.662,259.661c-0.589-0.097-1.028,0.133-1.319,0.534c-3.18-9.992-8.198-19.139-13.668-27.19
c4.992-5.379,10.044-10.484,15.819-14.401c0.279-0.19,0.563-0.369,0.845-0.554c6.275,9.396,13.829,17.48,22.192,23.502
c-2.71,12.088-3.095,24.878-6.39,36.697C161.773,268.626,156.578,261.116,147.662,259.661z M167.897,335.905
c-2.386,1.898-4.81,3.609-7.265,5.193c1.151-15.492,9.98-26.366,16.105-39.189c1.104-2.312,2.031-4.666,2.839-7.046
c3.414,6.887,6.112,14.097,7.611,22.21c0.104,0.565,0.317,0.975,0.591,1.251C181.269,324.898,174.396,330.735,167.897,335.905z
M202.666,300.57c-0.037-0.229-0.093-0.461-0.193-0.698c-3.595-8.539-6.689-18.282-4.303-27.56
c2.546,7.058,7.341,11.937,14.143,10.605C209.744,289.214,206.442,295.089,202.666,300.57z M216.719,264.403
c-4.347-1.17-6.577-4.881-6.655-10.657c-0.005-0.401-0.076-0.746-0.19-1.042c1.422-0.171,2.848-0.405,4.273-0.713
c0.411-0.088,0.713-0.308,0.929-0.599C216.44,255.497,216.923,259.923,216.719,264.403z M241.773,269.421
c0.395-6.069,0.7-12.131,0.993-18.178c1.943-1.056,3.799-2.151,5.574-3.315c6.85,0.571,13.609,1.869,19.973,4.991
c0.661,0.324,1.312,0.67,1.959,1.023C261.575,261.971,251.717,268.074,241.773,269.421z M305.812,253.942
c0.647-0.352,1.298-0.698,1.959-1.022c6.363-3.123,13.124-4.42,19.975-4.991c1.773,1.164,3.63,2.258,5.572,3.314
c0.293,6.046,0.598,12.109,0.992,18.178C324.367,268.074,314.51,261.971,305.812,253.942z M359.365,264.403
c-0.205-4.48,0.279-8.907,1.643-13.011c0.217,0.292,0.518,0.511,0.93,0.599c1.426,0.308,2.852,0.542,4.273,0.713
c-0.115,0.296-0.186,0.642-0.191,1.042C365.941,259.521,363.711,263.232,359.365,264.403z M373.611,299.872
c-0.1,0.237-0.156,0.469-0.193,0.698c-3.775-5.481-7.078-11.356-9.646-17.653c6.803,1.332,11.598-3.547,14.143-10.605
C380.301,281.59,377.207,291.333,373.611,299.872z M408.188,335.905c-6.5-5.17-13.373-11.007-19.883-17.581
c0.273-0.276,0.486-0.686,0.592-1.251c1.498-8.113,4.197-15.323,7.611-22.21c0.807,2.381,1.734,4.735,2.838,7.046
c6.125,12.823,14.955,23.697,16.105,39.189C412.996,339.514,410.572,337.803,408.188,335.905z M410.943,278.249
c-3.295-11.819-3.68-24.609-6.391-36.697c8.363-6.021,15.918-14.105,22.193-23.502c0.281,0.185,0.564,0.363,0.844,0.554
c5.775,3.917,10.828,9.022,15.82,14.401c-5.471,8.051-10.488,17.198-13.668,27.19c-0.291-0.401-0.73-0.631-1.32-0.534
C419.506,261.115,414.311,268.625,410.943,278.249z M422.762,294.802c-1.982-7.706-0.539-13.037,3.607-17.083
c-0.76,12.108,1.914,23.404,7.02,32.952c-0.262,0.096-0.518,0.268-0.76,0.551c-0.83,0.979-1.723,1.849-2.613,2.72
C427.592,307.581,424.49,301.515,422.762,294.802z M470.064,381.797c-0.656-1.287-1.338-2.557-2.064-3.787
c-6.957-11.75-26.65-23.317-37.275-28.355c1.217-9.504,9.297-17.666,14.596-23.256c0.041-0.045,0.068-0.093,0.107-0.138
c3.455,3.317,7.08,6.297,10.855,9.018c3.895,2.806,8.201,5.322,11.633,9.054C476.795,353.988,473.188,369.436,470.064,381.797z
M470.127,259.588c1.125,1.417,2.221,2.896,3.289,4.447c1.891,2.746,3.787,5.471,5.686,8.191c1.361,15.329,5.93,32.68-0.574,46.101
C460.666,312.376,465.006,279.519,470.127,259.588z M488.863,426.527c-2.207-4.094-4.264-8.316-6.131-12.674
c-0.428-0.998-0.838-2.01-1.242-3.027c0.539,0.188,1.143,0.045,1.656-0.633c4.238-5.572,7.783-11.643,10.711-18.08
c0.066,0.182,0.148,0.359,0.256,0.531C500.211,402.287,496.273,419.363,488.863,426.527z M504.041,450.049
c-1.773-2.334-3.5-4.74-5.189-7.191c0.08-0.049,0.16-0.09,0.24-0.156c2.053-1.672,3.953-3.82,5.67-6.311
c-0.24,0.947-0.086,2.066,0.736,2.762c7.082,5.994,13.162,15.635,12.861,27.02C513.264,461.287,508.469,455.875,504.041,450.049z
M556.178,489.506c-8.205-2.555-16.102-6.541-23.551-11.664c0.307-0.375,0.48-0.939,0.41-1.693
c-1.973-20.684-3.9-46.01-23.152-49.549c6.832-17.334,6.453-40.922-8.041-49.5c-2.135-1.264,5.232-44.197,0.809-72.747
c8.932,11.568,17.857,23.421,24.693,37.208c13.693,27.621,22.924,59.482,27.16,91.787
C556.953,452.002,556.717,470.742,556.178,489.506z"/>
</svg>
and the code I added to the JS:
var svg4 = new Walkway({
selector: '#branch',
duration: 500,
easing: 'linear'
});
svg4.draw(function(){
console.log('finished branch!');
});
I was animating a group of SVGs with walkway when I noticed that one particular SVG was causing a complete crash in FireFox (34.0.5) - I mean the browser hangs and dies with a force quit required.
I have singled it out to the following path:
I replaced the path with another similar one and it worked fine but it just begged the question what is the issue with this one?
You can see the pen here: http://codepen.io/lewismcarey/pen/rayxbJ
The website looks as if there was nothing but the name (only thing that is not in white). After either setting body height or removing floats you can see the background color. Chrome works version works fine. Problem occurs in Firefox 44.0.2.
The next tagged release would break many existing projects as the animations would not keep running but immediately complete on visibilitychange.
This should not be the case by default and just be enabled with another parameter when creating a Walkway instance.
It could also make sense to provide an argument (function) to override the behavior when the visibility of the tab changes. Should the animation reset or complete? Or should the visibilitychange in the current master be removed and developers have to add the desired behavior to their own code?
Because like you said in another issue, Walkway should not depend on any viewport things and just be used for the actual animation.
Hello, sorry for the disturbance, but despite a lot of attempts from me in both editing the html and the svg itself, I can't seem to make the animation to work. It just appears instantly.
Here is my code:
For SVG:
<svg version="1.1" id="logo" class="polyion" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;"
xml:space="preserve">
<style>
#logo>polyline
{
fill:white;
stroke:black;
}
</style>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="108.9,14.1 305.8,87.7 256.3,198.7 136.1,48.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="113.7,385.3 128.1,317.6 158.6,358.5 118.9,382.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="128.1,317.6 208,385.9 223.7,307.1 136.1,316.7 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="208,385.9 305.8,87.7 385.6,253 217.9,378.5 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="358.5,160.8 385.6,253 421.1,127.3 366.3,156.6 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="421.1,127.3 416,185.9 502.8,157.1 425.1,128.8 "/>
</svg>
For JS:
<script src="http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var svg = new Walkway({
selector: '#logo',
duration: '4000',
});
svg.draw();
});
</script>
Hi,
Thanks very much for merging the fix to package.json
, and tagging the new release. Are you able to push v0.0.4
up to NPM so that it can be installed without the Git URL?
Thanks!
Thanks for your awesome library!
I'm wondering whether there's a release planned in the near future. I'd happy to see new features published to NPM, especially #35, which fixes annoying npm warnings during installation.
Walkway looks like almost exactly what I need in leaving Vivus.
One thing I can't figure out so far is whether I have the ability to show a specific frame. What I want is to render the frames one at a time, so that I can screenshot them, rather than to have them animated in the browser.
Does Walkway support this kind of use?
Hey Connor,
I'm playing around with walkway.js atm and there seems to be a problem when the page is loaded via a link in a new tab. (cmd+click
link)
In Chrome/Safari, the SVG does not render at all, while in Firefox, the rendering seems to be incomplete in varying degrees.
Screenshots of the problem:
Steps to reproduce:
Reproducable in:
Currently querySelectorAll
is used for the selector so we can already draw a set of elements at the same time.
But in some cases it might be helpful to instanciate Walkway on a set of elements and draw just single elements using a filter / id selector). This could be done with an optional parameter (selector to filter the current elements of the instance) for draw
and redraw
.
Like creating a Walkway instance for all elements with a class animated
and then animate a single one using an id selector.
I've done a similar approach using an associative array / object with multiple Walkway instaces and calling draw
of the instance when the animated element enters the viewport.
The Readme says a custom easing function can be passed in the config object, but it doesn't seem to get used.
Checked the source and I don't see anything that could support a custom easing function.
Am I going mad?
Here is my example.
var svg = new Walkway({
selector: '#my-svg',
duration: 1000,
easing: function(t) {
console.log('never gets called');
return t;
}
});
In SPAs (single page applications) and in other cases it probably makes sense to clear the current elements and remove the event listener.
At least it also makes sense to remove the event listener when not needed anymore (for example when the visibility was changed and all elements were drawn or in a destroy/cleanup method).
Also in my opinion it makes sense to add an option to disable the visibilitychange eventlistener or not add it and provide also an optional pause / pauseOnVisibilityHidden or similar method.
Your opinions on this?
In the selector option, do I have to provide the entire svg element, or can i target only one path element inside the svg?
Thanks
Some package management systems that take advantage of Bower (such as rails-assets) need versions to be tagged in the repository. Could you tag the existing version as v0.0.1 or something similar?
The Readme says a custom easing function can be passed in the config object, but it doesn't seem to get used.
Checked the source and I don't see anything that could support a custom easing function.
Am I going mad?
Here is my example.
var svg = new Walkway({
selector: '#my-svg',
duration: duration,
easing: function(t) {
console.log('never gets called');
return t;
}
});
title says all :)
No errors coming through on console. But checked using latest walkway on my personal site and looking at both of your demos it is most certainly not working. Yours are just not coming out right and mine just does no animation at all at least any perceivable animation. btw you are getting 404 for typekit on your personal site.
Thank you for useful project. ๐
Does this work with other elements exported from Sketch? I see rect
and other elements, but I'm unable to get any kind of animation on them. Also, does this work with any kind of text?
Here's a link to something I tried with a diamond exported from Sketch: https://gist.github.com/anonymous/38af460432c6835ca632
element is unused in window.requestAnimationFrame = function(callback, element) {
and there is probably just the signature with callback in the official reference iplementation
Seeing the following issue on a Pingdom API call:
================================================================================
scheduler caught exception:
403 Forbidden
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/abstract_response.rb:48:in `return!'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:230:in `process_result'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:178:in `block in transmit'
/home/vagrant/.rvm/rubies/ruby-2.1.4/lib/ruby/2.1.0/net/http.rb:853:in `start'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:172:in `transmit'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:64:in `execute'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:33:in `execute'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient.rb:68:in `get'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/uptime.rb:24:in `make_request'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/uptime.rb:11:in `calc'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/client.rb:19:in `uptime'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/jobs/pingdom_uptime.rb:18:in `metrics'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/runnable_job.rb:24:in `block in schedule!'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:230:in `call'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:230:in `trigger_block'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:204:in `block in trigger'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/scheduler.rb:430:in `call'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/scheduler.rb:430:in `block in trigger_job'
Verified that my information was correct, and have looked into the plugin to no avail. Any ideas?
I notice you have this page:
http://connor-personal.herokuapp.com/walkway
And this one:
https://connoratherton.com/walkway
Looks like the second one is the official page now. Would probably make sense to redirect the old one.
Hi,
I know that the license of this repository is MIT, because appears inside pacakge.json, nonetheless it would be good if you can a LICENSE file and/or a note in the README, because it would be clearer.
Thanks.
current version is 0.0.4 on bower.
What I would really like to achieve is to animate letters, like you are writing by hand.
I've converted text to outlines with AI, but I can only animate borders/lines of each letter, because, of course, path fill is transparent.
If I set fill to some color, naturaly, the effect is not the intended one, because the letters are already present, I am only animating the border lines.
Is it possible to animate letters to simulate the hand writing effect?
FYI, I am trying to animate this font: http://www.fontsquirrel.com/fonts/allura
Edit: I guess it is all down to the font itself and the generated code. If I set stroke width to 3 or 4 pixels, font width is ok, but it leaves parts of each letter blank.
If I set stroke width to something higher, around 10px, there are no blank parts, but the font gets very fat and look unnatural.
When I leave my polyline with default width scaling the library works fine. However when I introduce vector-effect="non-scaling-stroke"
to it (which keeps the line width consistent across all aspect ratios and SVG sizes), the library animates the line incorrectly.
Clearly the line length calculation (distance between points) doesn't work when the line is scaled?
Without vector effect (working):
With vector effect (not working):
SVG to reproduce
<svg class="line-chart" preserveAspectRatio="xMaxYMin meet" viewBox="0 0 500 200"><polyline fill="none" stroke="#ffdebc" stroke-width="2" points="0,31.151015419361215 20.833333333333332,95.79551150138761 41.666666666666664,93.57810025862017 62.5,101.39948216678847 83.33333333333333,116.36552130454557 104.16666666666667,107.56839313850095 125,123.65082075060661 145.83333333333334,126.8350258447492 166.66666666666666,125.56409462044603 187.5,151.8270861649812 208.33333333333334,75.90138801468669 229.16666666666666,81.88742105812197 250,70.50733121756468 270.8333333333333,121.80405066398154 291.6666666666667,199 312.5,149.0294677305178 333.3333333333333,113.05074179286761 354.1666666666667,115.25886072811352 375,112.20492249631282 395.8333333333333,74.85404003035873 416.6666666666667,115.35093319263832 437.5,96.52858939299156 458.3333333333333,90.46699799336331 479.1666666666667,0" vector-effect="non-scaling-stroke" style="stroke-dasharray: 889.288, 889.288; stroke-dashoffset: 0;"></polyline></svg>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.