I'm trying to run an anime.js when an image or element enters the viewport, but i cant seem to get it working. Im trying it with waypoints.js
This is what I have so far, its the 'this' part im having troubles with i think.
$('img').waypoint(function() {
var CSStransforms = anime({
targets: this,
translateX: 250,
scale: 2,
rotate: '1turn'
});
}, {
offset: '100%'
});
You need to target the elements with this.element instead, Here's a working example:
CodePen Demo
Per your question, you would modify it to the following:
jQuery(document).ready(function(){
$('img').waypoint(function() {
var CSStransforms = anime({
targets: this.element,
translateX: 250,
scale: 2,
rotate: '1turn'
});
}, {
offset: '100%'
});
});
You need to change the
targets : this to targets: this.element
Related
I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page.
My problem is that while the duration is adjusted, it appears that the slider instantiates completely and does not continue animating to where it originally was suppposed to. I want it to go from the far left to the far right, but when I resize it the animation will only go from the place where it was resized to the end of the container.
These have been my attempts when calling the onchange method of my slider.
function adjustSpeed() {
alternate.duration = 300;
}
and
function adjustSpeed() {
var alternate = anime({
targets: '#alternate .el',
translateX: width,
direction: 'alternate',
loop: true,
duration: 300,
easing: 'linear',
});
}
Any help would be very much appreciated.
I just came across this issue and I've found a better yet not perfect solution. AnimeJS has another static speed property that is by default set to 1. If you change this speed, the animation speed changes, though the animation "jumps" and it doesn't look smooth.
For example, if you want the speed to be 0.5x the original speed, set anime.speed = 0.5.
I'll update this answer if I come up with a better solution.
When you changed speed or duration, you have to stop and remove current animation. After that, you have to start new animation with new duration value.
Here is example of bouncing from left to right element.
var duration = 500
const animateBLS = () => {
const el = document.getElementById('dot')
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'alternate',
loop: true,
easing: 'linear',
duration: duration
});
}
And there is the code for running new animations, called when durations is changed. It's finish current animation with new speed value, and start our main animation functions "animateBLS"
const el = document.getElementById('dot')
if(animation.reversed) {
anime.remove(el)
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
} else {
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
}
});
}
A dirty solution:
Manage frame manually by anime.tick combining with requestAnimationFrame, here're the demo:
https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js
The code is basically self-explained, if you have any further question, let me know.
I have a list that looks like this :
Now I am having a requirement to animate the box which is clicked to the center of the screen, wait for .5 second and then move to the top as heading.
I have been trying out different option in velocity.js but unable to figure out how to do this.
function animateobject(objName, obj) {
debugger;
obj = $(obj);
var p = obj.offset();
var element = $('#' + objName);
element.html(obj.closest('.connectPan2List').find('p').html());
element.css('top', p.top);
element.css('left', p.left);
element.velocity({ top:'50%', left:'50%' }, { duration: 500, easing: "linear" })
.velocity({ top: '10px' }, {
duration: 500, easing: "linear", complete: function () {
alert('');
}});
}
Here I have been trying to transfer the element to the center of the screen and then move up to the top, but it seems I am unable to get it properly. Can anyone help me on this please.
im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS
this is my code
$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
.to(".line-top", 2, {width: '100%', ease: Power4.easeOut}, "-=1");
});
i don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire....
anyone can helpme?
Thx in advance
Assuming that delegateTarget method works, which as per jQuery's documentation seems fine, the only issue here is that the second line of the tween does not have an element to tween. You'll need to pass one to it, something similar to this:
$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
.to($(event.delegateTarget).find('.line-top'), 2, {width: '100%', ease: Power4.easeOut}, "-=1");
});
I am using MasterSlider.js to make the carousal, I want to give it partialview on desktop and fillwidth view on tablet and mobile. I am trying to change it through detecting the window width but there is something wrong in my code.
<script type="text/javascript">
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:700,
height:466,
space:5,
loop:true,
view:'fadeFlow',
layout:'partialview',
grabCursor:false,
centerControls:false,
autohide:false,
view:"fadeBasic",
});
slider.control('arrows' , {autohide:false});
if ($(window).width() < 1024) {
slider.setup('masterslider' , {
layout:'fillwidth',
grabCursor:false,
centerControls:false,
});
}
</script>
One more thing I am using fadeBasic option to make the previous and next image fade out by default it is applying opactiy 0.4, is there any way I make it 0.8. Opacity is applying on run time.
Just for reference I am using this slider:
http://www.mercurycustom.com/wp-content/uploads/2014/05/partialview/partialview3.html
Here is a running demo: http://codepen.io/anon/pen/dopNrM
Try this instead:
var slider = new MasterSlider();
slider.control('arrows');
if ($(window).width() < 1024) {
slider.setup('masterslider', {
layout: 'fillwidth',
grabCursor: false,
centerControls: false,
});
} else {
slider.setup('masterslider', {
width: 760,
height: 400,
space: 10,
loop: true,
view: 'fadeFlow',
layout: 'partialview',
});
}
This is a nice jQuery plugin that i use for my site.
scrollIt.js
In the option section:
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: 0 // offste (in px) for fixed top navigation
});
I set the "topOffset" to "-160", and it works fine. Now on the other page i'm calling the same function but now I want the "topOffset" to be "0". How would i achieve that please?
Solve the problem myself by doing this:
if( $(".main-body").hasClass("home-vertical-scroll") ){
var scrollItTopOffset = 0;
}
else{
var scrollItTopOffset = -160;
};
$(function(){
$.scrollIt({
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
onPageChange: null,
topOffset: scrollItTopOffset
});
});
In case someone want the answer.