Stopping a function and starting another - javascript

I'm trying to make a small animation (using Velocity.js) that alternates between two looping states when an svg is clicked. The first state is horizontally from scaleX(1) to scaleX(2.5) back to scaleX(1) at scaleY(1), the second is vertically scaleY(1) to scaleY(8) back to scaleY(1) at scaleX(2.5). When the svg is clicked the animation starts in it's horizontal state, clicked again, the state that was just active (horizontal) should stop, and the alternative state should start (vertical), every click changes to the alternate state. Ideally the state change is seamless in the sense that svg should scale to the correct scale on the axis that is not animating whilst the new active state is animating.
This is a gif of what i'm trying to achieve, the blue dot symbolises a click:
My current outcome is embedded, the problem i'm having is that only one state change occurs so I need to stop the previous animation. The other problem is that in the transition, the scaling does not happen at the same time, i.e the new active state's animation does not happen at the same time as scaling of the axis that is not animating in the new state. Any pointers in the right direction would be greatly appreciated.
// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
var Rightscale = {
chooser: 0,
svg: $('#right').find('svg'),
init: function() {
this.bindEvents();
},
bindEvents: function() {
Rightscale.svg.on("click", function() {
console.log(Rightscale.chooser)
if(Rightscale.chooser === 0) {
Rightscale.chooser = 1;
Rightscale.horizontal();
} else {
Rightscale.chooser = 0;
Rightscale.vertical();
}
})
},
horizontal: function() {
Rightscale.svg.velocity({
scaleX: 2.5,
scaleY: 1
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
vertical: function() {
Rightscale.svg.velocity({
scaleY: 8,
scaleX: 2.5
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
}
$(document).ready(function() {
Rightscale.init();
});
#right {
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
<g>
<path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
<path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
<path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
C281.3,115.4,265.1,129.3,235.6,129.3z"/>
<path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
</g>
</svg>
</div>
</div>

I'm not sure if this is the desired effect you wanted. But I added a line in your click handler that stops current animations.
// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
var Rightscale = {
chooser: 0,
svg: $('#right').find('svg'),
init: function() {
this.bindEvents();
},
bindEvents: function() {
Rightscale.svg.on("click", function() {
Rightscale.svg.velocity("stop", true);
console.log(Rightscale.chooser)
if(Rightscale.chooser === 0) {
Rightscale.chooser = 1;
Rightscale.horizontal();
} else {
Rightscale.chooser = 0;
Rightscale.vertical();
}
})
},
horizontal: function() {
Rightscale.svg.velocity({
scaleX: 2.5,
scaleY: 1
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
vertical: function() {
Rightscale.svg.velocity({
scaleY: 8,
scaleX: 2.5
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
}
$(document).ready(function() {
Rightscale.init();
});
#right {
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
<g>
<path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
<path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
<path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
C281.3,115.4,265.1,129.3,235.6,129.3z"/>
<path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
</g>
</svg>
</div>
</div>

Related

Anime js does not recognise or follow svg path

I am using animejs for the first time. I tried out a few tutorials from the documentation which worked file. I then tried to use an SVG with a div that followed the SVG's path exactly as shown in this Codepen how for some reason the div does not move at all.
Note: I am using animejs from a cdn. I have also tried downloading the file and using it, but I get the same problem.
Here is my code...
window.onload = () => {
var path = anime.path("path");
anime({
targets: "div",
translateX: path,
translateY: path,
rotate: path,
duration: 3000,
loop: true,
easing: "linear",
});
anime({
targets: "path",
opacity: 0,
duration: 6000,
loop: true,
direction: "alternate",
easing: "easeInOutExpo",
});
}
body {
background: grey;
}
div,
.green {
position: absolute;
background: green;
top: 0.5rem;
left: 0.5rem;
width: 1rem;
height: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<body>
<section>
<article>
<svg>
<path
fill="#000"
stroke="#000"
d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
/>
</svg>
<div class="green"></div>
</article>
</section>
</body>
The path variable returned from anime.path("selector"); is function. As described in docs you should call it with "x", "y" or "angle"
var path = anime.path("path");
anime({
targets: "div",
translateX: path("x"),
translateY: path("y"),
rotate: path("angle"),
duration: 3000,
loop: true,
easing: "linear",
});

Drag a knob to 360 degree using green sock

I am trying to drag a circular knob from 0 to 360 degree using green sock library.
Adding a codepen below in which I have used bounds property which bound drag rotation from 0 to 359 degree but because of this when I start to drag from last quadrant(between 270 to 360 degree) then, the drag jumps to 1st quadrant(0 degree) and starts to drag from 0 degree. In the 1st, 2nd and 3rd quadrant the drag works properly but the 4th quadrant has some problem.
I want to keep the bounds but also wants to drag if I drag between 270 to 360 degree. Please have a look over the codepen and help me out with this. Thank you.
Steps to reproduce
1. Drag till the last quadrant(between 270 degree to 360 degree) similar to clock between 9 - 12 and leave the mouse.
Press from last quadrant where you left the mouse, here you can see the drag starts from 0 degree.
var rotationOffset = 90, //in case the dial's "home" position isn't at 0 degrees (pointing right). In this case, we use 90 degrees.
RAD2DEG = 180 / Math.PI, //for converting radians to degrees
adjusting;
TweenLite.set("#spinner", {
transformOrigin: "center"
});
Draggable.create("#spinner", {
type: "rotation",
sticky: true,
bounds: {
minRotation: 0,
maxRotation: 359,
},
trigger: "#svg",
onPress: function(e) {
if (!adjusting) {
//figure out the angle from the pointer to the rotational origin (in degrees)
var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
//set the rotation (with any offset that's necessary)
TweenLite.set(this.target, {
rotation: rotation + rotationOffset
});
//now we'll end the drag and start it again from this new place, but when we start again, it'll call the onPress of course so to avoid an endless loop, we use the "adjusting" variable to skip it in the triggered onPress.
adjusting = true;
this.endDrag(e);
this.startDrag(e);
adjusting = false;
}
},
onDrag: function() {
var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
$("#percent").text(rotation.toFixed(2))
}
});
#svg {
position: fixed;
width: 100%;
height: 100%;
touch-action: none;
}
#spinner {
cursor: pointer;
}
.big-circle {
fill: dodgerblue;
stroke: black;
stroke-width: 6;
}
.small-circle {
fill: black;
}
.line {
fill: none;
stroke: black;
stroke-width: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<div id="percent">0</div>
<svg id="svg" viewBox="0 0 1000 1000">
<g id="spinner">
<circle class="big-circle" cx="500" cy="500" r="200" />
<circle class="small-circle" cx="500" cy="500" r="12" />
<polyline class="line" points="500,500 500,300" />
</g>
</svg>
codepen of knob
* UPDATED *
I have updated the above codepen link with working solution if anybody comes in future to check similar problem. Thank you.
Any reason why you're using bounds and trigger parameters?
If you remove them, your code will work accordingly.
var rotationOffset = 90, //in case the dial's "home" position isn't at 0 degrees (pointing right). In this case, we use 90 degrees.
RAD2DEG = 180 / Math.PI, //for converting radians to degrees
adjusting;
TweenLite.set("#spinner", {transformOrigin: "center"});
Draggable.create("#spinner", {
type: "rotation",
sticky: true,
/*bounds: {
minRotation: 0,
maxRotation: 360,
},
trigger: "#svg",*/
onPress: function(e) {
if (!adjusting) {
//figure out the angle from the pointer to the rotational origin (in degrees)
var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
//set the rotation (with any offset that's necessary)
TweenLite.set(this.target, {rotation:rotation + rotationOffset});
//now we'll end the drag and start it again from this new place, but when we start again, it'll call the onPress of course so to avoid an endless loop, we use the "adjusting" variable to skip it in the triggered onPress.
adjusting = true;
this.endDrag(e);
this.startDrag(e);
adjusting = false;
}
},
onDrag: function(){
var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
}
});
#svg {
position: fixed;
width: 100%;
height: 100%;
touch-action: none;
}
#spinner {
cursor: pointer;
}
.big-circle {
fill: dodgerblue;
stroke: black;
stroke-width: 6;
}
.small-circle {
fill: black;
}
.line {
fill: none;
stroke: black;
stroke-width: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<div id="percent">0</div>
<svg id="svg" viewBox="0 0 1000 1000">
<g id="spinner">
<circle class="big-circle" cx="500" cy="500" r="200" />
<circle class="small-circle" cx="500" cy="500" r="12" />
<polyline class="line" points="500,500 500,300" />
</g>
</svg>
https://greensock.com/docs/Utilities/Draggable/static.create()

$(window).scroll combining similar functions

I have several number counters and want them to start animating when the user scroll downs to them. Right now, I achieved this by writing a function for each one of them but I'm sure that's an inefficient way of doing this.
I have a working example here:
https://codepen.io/adogandesign/pen/PWqVov
HTML:
<div id="states" class="animated">
<div class="anim_num">
<svg>
<pattern>...</pattern>
<text id="count_num1"></text>
</svg>
</div>
</div>
<div id="concerts" class="animated">
<div class="anim_num">
<svg>
<pattern>...</pattern>
<text id="count_num2"></text>
</svg>
</div>
</div>
Javascript:
$(window).scroll(startCounter1);
function startCounter1() {
if ($(window).scrollTop() > $("#states").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter1);
$("#count_num1").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
$(window).scroll(startCounter2);
function startCounter2() {
if ($(window).scrollTop() > $("#concerts").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter2);
$("#count_num2").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
My question is how can I combine that javascript code into one function?
The general algorithm you can use for refactoring of this sort is:
Identify the parts that are different.
Replace those parts with variable names.
Create a function wrapper, replacing those variables with function parameters.
Replace the code with calls to that function.
So in this case, the first variance is "#states" vs "#concerts"; let's call that section. The second is #count_num1 vs #count_num2, which we can call counter. Now we can do this:
function createScrollCounter(section, counter) {
$(window).scroll(scrollCounter);
function scrollCounter() {
if ($(window).scrollTop() > $(section).offset().top - $(window).height() + 0) {
$(window).off("scroll", scrollCounter);
$(counter).each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
}
createScrollCounter('#states', '#count_num1');
createScrollCounter('#concerts', '#count_num2');
Use an each to loop over a common class instead of focusing on individual ID's and handle each instance inside that loop
Something like:
$('.animated').each(function() { // #states & #concerts
// current instance of the animated class
var $this = $(this),
// find associated text element,
// will be #count_num1 or #count_num2 depending on $this instance
$textEl = $this.find('text');
// check instance offset
if ($(window).scrollTop() > $this.offset().top - $(window).height() + 0) {
jQuery({
Counter: 0
}).animate({
Counter: $textEl.text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$textEl.text(now.toFixed(0));
}
});
}
});
Note that you probably want to check if the animation is already taking place before initializing it again for every pixel move of scroll
Simply give each text tag same class like "animation" and remove id (count_num1, count_num2) from there and at $("#count_num1") use $(".animation") I had check this method in your codepen link and it work perfectly.
$(window).scroll(startCounter1);
function startCounter1() {
if ($(window).scrollTop() > $("#states").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter1);
$(".animation").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() },
{
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
body{
width: 100%;
overflow-x: hidden;
font-family: Open Sans, sans-serif;
}
.scrolldown {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.animated_percentage {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.anim_num {
display: block;
position: relative;
max-height: 100vh;
padding: 5% 0;
font-size: 350px;
font-weight: 900;
}
#states .anim_num {
padding-left: 20%;
}
#concerts .anim_num {
padding-right: 30%;
}
#fans .anim_num {
padding-left: 15%;
}
svg {
max-width: 100%;
max-height: 100%;
}
#count_num1{
fill: url(#img1);
}
#count_num2{
fill: url(#img2);
}
#count_num3{
fill: url(#img3);
}
.exp {
position: absolute;
top: 50%;
font-size: 48px;
font-weight: 700;
color: #aabbae;
}
#states .exp {
left: 10%;
}
#concerts .exp {
right: 20%;
}
#fans .exp {
left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolldown">
Scroll down to see the animation
</div>
<div id="states" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" x="-10%" y="-25%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_69678727.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num1">46</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
States travelled
</div>
</div>
<div id="concerts" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img2" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="-20%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_63664078.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num2">97</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
Concerts Given
</div>
</div>
<div id="fans" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img3" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="-22%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_93833225.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num3">436</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
Fans Gone Wild
</div>
</div>

ReferenceError: Velocity is not defined

Looking for a resolution for this issue. I set up velocity on wordpress and seem to have run into a wall. When I reference velocity, I get Velocity not defined, and when I reference $.Velocity, I get $ not defined. Jquery 1.11.3 and Velocity are installed but the script that I am running on velocity does not call any Jquery items.
Any help would be much appreciated.
// Velocity.js instead of CSS for performance
var city = document.querySelector('.js-city-1');
var fulllogo = document.querySelector('.cityanimation');
var loading = [animatecity()];
function animatecity() {
// Reset
Velocity(city, {
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
Velocity(city, {
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
Velocity(city, {
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
Velocity(fulllogo, {
opacity: 1
}, 0);
// Animate
Velocity(fulllogo, {
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
Velocity.RunSequence(loading);
#loadscreen{
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
position: fixed;
background-color: #FFF;
}
#loaderimage{
background-image: url(/wp-content/themes/silicon-city/images/SiliconCity.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-ms-background-size: 100%;
background-size: 100%;
max-width:1035px;
min-width:360px;
position: fixed;
}
#Layer_1{
margin-top:8px;
}
.cityanimation {
background-color: #FFF;
top:50%;
left:50%;
width:75%;
max-width:1035px;
min-width:360px;
position: fixed;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari */
}
.st0{
fill:none;
stroke:#28B24B;
stroke-width:.15em;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
<div id="loadscreen">
<div id="loaderimage">
<div class="cityanimation">
<object>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1035 393" style="enable-background:new 0 0 1035 393;" xml:space="preserve">
<path class="st0 js-city-1" d="M1.521,213.364h59.398l6.658-0.488v-57.018h15.737v-6.528l10.905-0.134v5.685h17.706l0.122,3.899h1.178h7.636
v23.01l6.009,0.057v-3.574h5.524v4.145h12.426l0.082-4.956h6.822v2.597h5.685V139.75h4.009v-8.015h1.649v-4.713h1.415v-4.716h1.18
v-6.363h1.649v6.363h0.942v4.244h1.887v5.422h11.551v3.065l13.673,13.674v28.289l16.138-0.351v-24.526h2.438v-7.961h32.489v25.018
h4.873v-23.396h13.646v12.35h19.492v18.191h3.574v11.35l16.245,0.027v-35.578h29.727v11.914h10.942l0.268-34.333h19.33v28.102h9.746
l1.625,37.933h8.937v-17.652l42.396-1.598V158.78h13.807l2.763-112.293h2.436v-3.899h5.684v-8.936h-1.136v-2.437h1.623V2.139
L453.054,1l0.49,0.976v29.239h1.786v2.437h-1.299v8.771h5.847v3.899h2.926l2.422,136.264h8.765l0.183-10.971h4.063v-2.762
c0,0,7.389-6.746,13.97,0l1.625-6.498l8.284-5.847l7.637,5.197l2.596,5.196h4.225v-8.932h18.844v23.555h9.096v15.568l23.398-0.359
v-24.518h5.463v-5.809h6.764v-25.592h24.609v36.268h27.301v-17.017h9.902v-7.386h9.695v3.806h16.051v3.136h13.098v3.806h3.158
v-14.778h4.408l1.732-19.33l2.691,19.371h3.584v18.543h4.215v5.15h10.146v14.332h7.527v-12.093h2.74V141.26h2.951v-5.151h12.334
v36.05h3.795v22.393h5.609v-17.914h8.773l2.316-0.006v24.859h14.514h2.529v-15.662h3.939v-13.444h3.775V88.216h2.713v-6.998h4.416
v-6.996h1.988c0.1-0.31,0.209-0.6,0.285-0.898c1.094-4.186,1.883-8.421,1.992-12.759c0.029-1.136,0.055-2.275-0.025-3.406
c-0.072-0.959,0.209-1.709,0.934-2.299c0.225-0.181,0.289-0.365,0.289-0.636c-0.008-4.522,0.037-9.042-0.027-13.56l0.049-0.999
c-0.016,4.854-0.006,9.711-0.014,14.57c0,0.299,0.035,0.49,0.367,0.642c0.652,0.3,1.113,0.844,1.24,1.553
c0.086,0.497,0,1.021,0.004,1.533c0.006,1.682-0.076,3.372,0.059,5.042c0.162,1.95,0.451,3.896,0.809,5.823
c0.336,1.814,0.828,3.597,1.25,5.394c0.055,0.239,0.174,0.334,0.436,0.324c0.541-0.024,1.086-0.007,1.674-0.007v7.019h4.143v6.982
h2.924v84.164h3.479v8.4h4.441l4.865,0.002v-16.695v-12.764h7.533v-3.808h13.012v-9.853h5.395v15.004h9.057v-18.136h17.057v10.075
h12.141v-4.702h4.238v4.477h5.395v-8.507h10.02v9.18h4.049v19.928h7.23v7.611h7.6v-17.018h1.732v-3.58h10.404v43.213h10.994v-86.428
h2.311v-3.357h2.699v-3.582h16.752v4.029h2.508v3.583h1.926v83.945h5.852l-0.031-56.667l0.678-5.362l-1.469-0.789l0.057-0.396h1.525
l0.111-16.925l0.336-1.243l1.297-0.395l0.287-3.723l0.732-1.581c-0.074-1.429-0.574-2.858,0.619-4.289
c0.26-1.902-0.264-4.195,1.355-5.417c0.27-2.018-0.154-4.479,1.639-5.528c0.332-1.789-0.354-3.573,1.07-5.36
c0.236-2.353,0.145-4.705,1.072-7.053l0.336-5.304l0.283-19.241l0.678,18.279l0.678,6.827c0.838,2.051,0.635,4.103,0.789,6.151
c1.395,1.619,0.92,3.236,0.902,4.855c2.518,1.938,1.785,4.069,1.92,6.149c1.561,0.804,1.262,3.283,1.41,5.36
c1.109,1.447,0.959,2.898,0.902,4.344c0.451,1.581,0.695,3.16,0.848,4.74l1.352,1.129l0.451,5.076l0.115,13.262l0.676,0.563
l0.678-0.506l0.395,0.111l-0.057,0.508l-1.354,0.677v5.643l0.508,0.339l0.557,50.658h8.58v-11.014h19.199l-0.006,0.919v34.813
l7.383,1.607l-14.375,0.805l14.375,2.41l-15.15,1.205l15.924,2.412l-14.76,1.607l6.604,1.205v57.908h-15.236h-8.654h-33.711"/>
</svg>
</object>
</div>
</div>
</div>
I also tried the following... thought it might be worth a shot..
jQuery.noConflict();
(function( $ ) {
$(function() {
// Velocity.min.js instead of CSS for performance
var $city = $(".js-city"),
$fulllogo = $(".cityanimation");
var loading = [animatecity()];
function animatecity() {
// Reset
$city
.velocity({
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
$city
.velocity({
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
$city
.velocity({
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
$fulllogo
.velocity({
opacity: 1
}, 0);
// Animate
$fulllogo
.velocity({
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
animatecity();
});
})(jQuery);
Okay... ended up with this.. but looks like Velocity.js doesn't load on window. I did confirm to see if Velocity.js was in the correct directory and it is. The animation still does not work but I am not getting any errors..
(function($) {
// Velocity.min.js instead of CSS for performance
var city = document.querySelector('.js-city');
var fulllogo = document.querySelector('.cityanimation');
function animatecity() {
// Reset
$.Velocity(city, {
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
$.Velocity(city, {
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
$.Velocity(city, {
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
$.Velocity(fulllogo, {
opacity: 1
}, 0);
// Animate
$.Velocity(fulllogo, {
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
animatecity();
})(jQuery);
You need to declare jquery before velocity in your markup scripts
You can see velocity dependence package depends on jquery 1.4 version or more, so it is being dependent on jquery for something.
The reason is that word press actually defines jQuery as jQuery not $. If you run this code:
jquery(document).ready(function () {
var $ = jQuery;
console.log('Now jquery is $', $);
});
So you should have source code jQuery and then asign to $ and finally source code of velocity.

Translate (gradually - with animate) an svg element after a delay using jQuery

I have this cubes which I want to translate to a different X and Y point after a delay of say 3000. I am not able to understand how to do this with the help of jQuery. Here is a JS Fiddle. Below is the code.
JS
// code for fade in one by one
console.log("game begins");
allSVGs = $("g");
fadeIn(0);
setTimeout(function () {
$("#cubeTop").animate({
svgTransform: "translate(0, -160)"
});
}, 3000);
function fadeIn(svgIndex) {
console.log(svgIndex);
allSVGs.eq(svgIndex).css({
"display": "block",
"opacity": "0"
});
allSVGs.eq(svgIndex).animate({
"opacity": "1"
}, {
complete: function () {
svgIndex++;
if (svgIndex < allSVGs.length) //Making sure we don't exceed the maximum available SVG elements
fadeIn(svgIndex); //Recursively calling the next elements animation (hide) from the completed one.
},
duration: 400
});
}
Thanks in advance.
PS: Sorry for not being clear. I just made an edit to the question.
Well it is possible. I just made some changes to your setTimeOut. Check if this is what you want:
setTimeout(function () {
$("#cubeTop")
.animate(
{"min-height": -140},
{duration: 1000,
step: function( top ){
this.setAttribute("transform", "translate(0,"+top+")");
}
});
}, 3000);
Here is the DEMO
You can try something like this
$("#cubeTop").attr({
transform:'translate(0,-140)'
})
// code for fade in one by one
console.log("game begins");
allSVGs = $("g");
fadeIn(0);
setTimeout(function () {
$("#cubeTop").attr({
transform:'translate(0,-140)'
})
}, 3000);
function fadeIn(svgIndex) {
console.log(svgIndex);
allSVGs.eq(svgIndex).css({
"display": "block",
"opacity": "0"
});
allSVGs.eq(svgIndex).animate({
"opacity": "1"
}, {
complete: function () {
svgIndex++;
if (svgIndex < allSVGs.length) //Making sure we don't exceed the maximum available SVG elements
fadeIn(svgIndex); //Recursively calling the next elements animation (hide) from the completed one.
},
duration: 400
});
}
svg {
position: absolute;
left: 0;
top: 0;
}
#cube {
fill: none;
stroke: black;
cursor: pointer;
display: none;
}
#cubeTop {
fill: none;
stroke: black;
cursor: pointer;
display: none;
}
#cubeTopRight {
fill: none;
stroke: red;
cursor: pointer;
display: none;
}
#cubeTopRightDown {
fill: none;
stroke: black;
cursor: pointer;
display: none;
}
#cubeDown {
fill: none;
stroke: red;
cursor: pointer;
display: none;
}
#cubeLeftDown {
fill: none;
stroke: black;
cursor: pointer;
display: none;
}
#cubeLeft {
fill: none;
stroke: red;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g id="cube">
<path id="f1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="f2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="f3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeTop" transform="translate(0, -80)">
<path id="t1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="t2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="t3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeTopRight" transform="translate(70, -40)">
<path id="r1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="r2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="r3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeTopRightDown" transform="translate(70, 40)">
<path id="rd1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="rd2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="rd3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeDown" transform="translate(0, 80)">
<path id="cd1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="cd2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="cd3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeLeftDown" transform="translate(-70, 40)">
<path id="ld1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="ld2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="ld3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
<g id="cubeLeft" transform="translate(-70, -40)">
<path id="l1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="l2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="l3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
</svg>
Add all the stuff in setTimeout function and try.
// code for fade in one by one
setTimeout(function() {
console.log("game begins");
allSVGs = $("g");
fadeIn(0);
$("#cubeTop").animate({
svgTransform: "translate(0, -160)"
});
function fadeIn(svgIndex) {
console.log(svgIndex);
allSVGs.eq(svgIndex).css({
"display": "block",
"opacity": "0"
});
allSVGs.eq(svgIndex).animate({
"opacity": "1"
}, {
complete: function() {
svgIndex++;
if (svgIndex < allSVGs.length) //Making sure we don't exceed the maximum available SVG elements
fadeIn(svgIndex); //Recursively calling the next elements animation (hide) from the completed one.
},
duration: 400
});
}
}, 3000);

Categories