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");
});
Related
I'm using the anime JS library, I've added two animations to a div, the second animation starts when the first animation has finished.
But the problem is that I want just the second animation to keep looping, I've set the property "loop" to "true" on the second animation, but it still won't loop, every property works fine except the "loop" property, how can I make just the second animation loop over and over again?
HTML code:
<body>
<div></div>
</body>
CSS code:
div{
height: 100px;
width: 100px;
background-color: rgb(161, 6, 6);
}
JavaScript code:
"use strict";
let square = document.querySelector("div")
anime.timeline()
.add({
targets: square,
backgroundColor: "#3dbf7a",
duration: 2000,
})
.add({
targets: square,
translateX: [0,100],
translateY: [0,100],
duration: 1000,
loop: true,
})
As mentioned in the comments, this is an existing issue in the library. In this workaround, I needed to put the anim.restart() call inside a setTimeout to ensure the javascript executed in a new event loop.
let square = document.querySelector("div");
anime.timeline()
.add({
targets: square,
backgroundColor: "#3dbf7a",
duration: 2000,
}).add({
targets: square,
translateX: [0, 100],
translateY: [0, 100],
duration: 1000,
changeComplete: anim => setTimeout(() => anim.restart())
});
div {
height: 100px;
width: 100px;
background-color: rgb(161, 6, 6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div></div>
jsFiddle
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
When first animation will be done after that I want another animation on the same target.
var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();
lnk.addEventListener('click', go, false);
function go(){
tl.to('.glasko', 1, {width: 500, height: 500});
};
After that I want to change background color of div.
tl.to('.glasko', 2, {backgroundColor: 'red'});
What is best practice for this?
GSAP makes it easy & simple with TimelineMax. You just need to write second animation after first animation using same TimelineMax instance and this is the best approach.
var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();
lnk.addEventListener('click', go, false);
function go(){
tl.to('.glasko', 1, {width: 500, height: 500});
tl.to('.glasko', 2, {backgroundColor: 'red'});
};
demo
Some part of my code here:
var stage = new Kinetic.Stage({
container: "canvas",
width: 300,
height: 200
});
var layer = new Kinetic.Layer({
});
var line = new Kinetic.Polygon({
id: 'wall',
points: [50, 50, 100, 50, 100, 100, 50, 100],
stroke: "black",
strokeWidth: 4,
draggable: true
});
line.on('dragmove', function(mouseEvent) {
line.getPoints()[2] = {x:mouseEvent.x, y:mouseEvent.y};
layer.draw();
});
stage.add(layer);
layer.add(line);
layer.draw();
The task is to drag polygon by one of the corners (in example by right-bottom). But actually result is not that I expected. What is wrong in my code? or what is correct way of moving elemten by one of the points?
Check out this post iOS6 pull/drag border on circle
The effects are similar, I think, to what you're looking for. You could animate the drag on any of your corners by detecting the click/touch location.
Let me know if you need another example.
having a lot of trouble finding the equivalent of this code in jquery
var reveal = new Fx.Styles(div, {
duration: 200,
transition: Fx.Transitions.Quad.easeIn,
wait: true,
fps: 24
});
reveal.addEvent('onStart', function(){
tt_has(true);
});
I think it would become:
$(div).animate( {left: 500, top: 500}, 200, 'linear');
tt_has(true);
There is no 'start' event in jquery animations (they start automatically), so we call tt_has(true) right after the call to .animate(),
More info here.
Hope this helps. Cheers