Develop Reference

transform function not working angular 5

I try to call angular function in ngAfterViewInit()
ngAfterViewInit() {
this.gagSlider();
}
gagSlider() function
gagSlider(){
$.fn.animateRotate = function(angle, duration, easing, complete) {
alert(1);
return this.each(function() {
var $elem = $(this);
$({deg: 0}).animate({deg: angle}, {
duration: duration,
easing: easing,
step: function(now) {
$elem.css({
transform: 'rotate(' + (-90 + ((90 * 180) / 100)) + 'deg)'
});
},
complete: complete || $.noop
});
});
};
$('.meter-clock').animateRotate(0);
}
I am getting alert successfully but rotate not working

Two if statements. Both work. Only one prints

I'm trying to rotate a fixed image in sync with fullpage.js and it works for the most part.
In order to prevent unwanted rotation I have to stack css rotate() values.
It works when I scroll down and it stacks as I wanted (ie. 180, 360, 540, ..)
It doesn't work when I scroll up.
I tried to use alerts to identify if the calculation is done, there seems to be no problem on the stacking, but scroll up portion of the code simply doesn't print to the HTML document.
Here's my code;
var rotation = 0,
rotationInc = 180,
miniLogo = $('#mini-logo');
$(document).ready(function () {
$('#home').fullpage({
verticalCentered: false,
scrollingSpeed: 300,
onLeave: function (index, nextIndex, direction) {
if (direction == 'down') {
rotation += rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg)'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
if (direction == 'up') {
rotation -= rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg);'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
}
});
});
The first if statement works perfectly. The second gives the alert I wanted but doesn't print the reduced degree on the html.
Any help would be much appreciated, I'm sure I've done a rookie mistake.

Try this :
rotation = 0;
rotationInc = 180;
miniLogo = $('#mini-logo');
$(document).ready(function () {
$('#home').fullpage({
verticalCentered: false,
scrollingSpeed: 300,
onLeave: function (index, nextIndex, direction) {
var rotation = (direction == 'down')
? rotation += rotationInc
: rotation -= rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg)'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
}
});
});

How to rotate an image as it fades In and fades Out with JQuery

I believe this is pretty easy for you, as I have no idea how to integrate what I need into what I already have.
Please refer to this fiddle to see what I have: http://jsfiddle.net/pherrera/hnqfLvuk/1/
The code:
$(document).ready(function () {
var slowTwinkler = $('.slow');
//play with the delay time to modify the twinkle order
$('#star1').delay(5);
function twinkleSlow() {
slowTwinkler.animate({ opacity: '+=0.5'}, 1000);
slowTwinkler.animate({ opacity: '=0.5' }, 3000);
slowTwinkler.animate({ opacity: '-=0.8'}, 1000, twinkleSlow);
}
twinkleSlow();
});
As you can see it fadesIn and fadesOut as I want it, and I'd like to also rotate the image as it appears and disappears.
I found this fiddle where they use this function but I don't know hoe to add it to the code I have.
Rotating code:
var rotation = function () {
$("#image").rotate({
angle: 0,
animateTo: 360,
callback: rotation
});
}
rotation();
Any help will be much appreciated. Thanks

Here you go:
$(document).ready(function () {
var slowTwinkler = $('.slow');
//play with the delay time to modify the twinkle order
$('#star1').delay(5);
function twinkleSlow() {
slowTwinkler.animate({ opacity: '+=0.5' , deg: '+=180' }, {
duration: 1000,
step: function(now) {
slowTwinkler.css({
'-moz-transform': 'rotate('+now+'deg)',
'-webkit-transform': 'rotate('+now+'deg)',
'-o-transform': 'rotate('+now+'deg)',
'-ms-transform': 'rotate('+now+'deg)',
transform: 'rotate('+now+'deg)'
});
}
});
slowTwinkler.animate({ opacity: '=0.5' }, 3000);
slowTwinkler.animate({ opacity: '-=0.8', deg: '+=180' }, {
duration: 1000,
step: function(now) {
slowTwinkler.css({
'-moz-transform': 'rotate('+now+'deg)',
'-webkit-transform': 'rotate('+now+'deg)',
'-o-transform': 'rotate('+now+'deg)',
'-ms-transform': 'rotate('+now+'deg)',
transform: 'rotate('+now+'deg)'
});
},
complete: twinkleSlow
});
}
twinkleSlow();
});
Link to jsFiddle here.

$(document).ready(function () {
var slowTwinkler = $('.slow');
//play with the delay time to modify the twinkle order
$('#star1').delay(5);
function twinkleSlow() {
slowTwinkler.animate({ opacity: '+=0.5'}, 1000);
slowTwinkler.animate({ opacity: '=0.5' }, 3000);
slowTwinkler.animate({ opacity: '-=0.8'}, 1000, twinkleSlow);
}
function rotation () {
slowTwinkler.animate({ rotation: '+=360'}, 1000);
slowTwinkler.animate({ opacity: '=180' }, 3000);
}
rotation();
twinkleSlow();
});
I am not a super expert on JavaScript (so you may need to try some variants) but the above could maybe work?

How to add a 3 second delay to this function

My goal with this code is to create an effect of leaves blowing away 3 seconds after page load, but currently I am unable to create a delay. Perhaps its because the code format. I made i quick jsfiddle to demonstrate what I have so far.
http://jsfiddle.net/vXpDk/
So my question is how to create a delay of the function so that it doesn't start to rotate and slide for 3 seconds...and if it is possible to to create diagonal paths instead of horizontal and vertical.
Here's the code from the jsFiddle:
var $elie = $("#leaf1"), degree = 0, timer;
rotate();
function rotate() {
$elie.delay(2000)
.css({ WebkitTransform: 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
$elie.delay(2000)
.css({ '-moz-transform': 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
timer = setTimeout(function() {
++degree;
rotate();
},0);
}

Like this? http://jsfiddle.net/L69Ud/
var $elie = $("#leaf1"), degree = 0;
$elie.animate({ "left": "+=800px" }, 5000).fadeOut(100);
setTimeout(rotate, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}
and if it is possible to to create diagonal paths instead of
horizontal and vertical.
Animate left and top at the same time http://jsfiddle.net/L69Ud/1/
The only modification here is
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
How would you code this so that the div does not move at all for 3 seconds then begins to rotate and slide at the same time?
http://jsfiddle.net/L69Ud/3/
var $elie = $("#leaf1"), degree = 0;
setTimeout(function() {
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
rotate();
}, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}

Ken Burns effect with nivo slider

Has anyone set up a nivo slider to pan each image (aka Ken Burns effect)? I'm trying to implement it and it's kinda tricky!

Actually, I got my implementation working!
I have a panning function loop.. something like this:
function ken_burns_loop(el) {
$(el)
.animate({
'background-position-x': '40%',
'background-position-y': '60%'
}, 8000, 'linear')
.animate({
'background-position-x': '30%',
'background-position-y': '40%'
}, 8000, 'linear')
.animate({
'background-position-x': '70%',
'background-position-y': '70%'
}, 8000, 'linear', function() { ken_burns_loop(el); });
}
And I'm initializing nivo slider like this:
$('#welcome-slider').nivoSlider({
effect: 'fade',
slices: 1,
directionNav: false,
afterChange: function() {
$('#welcome-slider, .nivo-slice').stop(true);
ken_burns_loop('#welcome-slider, .nivo-slice');
}
});
ken_burns_loop('#welcome-slider, .nivo-slice');
I'm still working out some problems with positioning.

Source & Demo
Add this to your JS:
if(currentEffect === 'kenburns'){
createZoom(slider, settings, vars);
zoom = $('.nivo-zoom:last', slider);
var delta = (8 + Math.random() * 2) / 100;
var neww = zoom.width() * (1 + delta);
var newh = zoom.height() * (1 + delta);
var x = delta * zoom.width(); //Math.random()*(neww-zoom.width());
var y = delta * zoom.height(); //Math.random()*(newh-zoom.height());
var zoomdir = Math.round(Math.random() * 4);
zoom.animate({ opacity:'1.0'}, {easing:'linear',duration:settings.pauseTime*2/3});
if(zoomdir == 1) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',top: '-'+y+'px'},{easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 2) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',top: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 3) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
}
if($('.nivo-zoom', slider).length > 2) $('.nivo-zoom:first', slider).remove();
}