I am using tweenlite/tweenmax to do animations in an html file. I want to trigger animations based on scroll position (like www.onlycoin.com). However, I cannot figure out how to do a second animation on one imagine after I do the first one (in my example, I am trying to move an image left and then move it back right). Any idea how to do this? Here is what I have:
var controller = $.superscrollorama(),
handleComplete = function(elem) {
console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};
var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();
controller.addTween($('#one'),
likeAnimations.append([
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete:
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
])
})
]),
300,
400);
Any help would be awesome.
The special property onComplete accepts a function.. from the TweenMax Docs
onComplete : Function - A function that should be called when the tween has completed
so you would have to either make an anonymous function like this:
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: function(){
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
});
or you will have to put your tween inside a function, and have your first tween's onComplete callback reference a function.
myFunction() {
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: myFunction
});
You are basically adding the tween for the onComplete callback, instead of the expected function.
Checkout the GreenSock TweenMax Docs
Related
Hi I'm new to Js and I'm doing some simple moving of object with the Raphael library, but one of my functions doesn't work, even though it should.
Here's some of the code:
/*Moving Objects*/
var mainBall = paper.circle(650,340,30);
var mainRect = paper.rect(430,310, 50,50);
/*Moving Object attributes*/
mainBall.attr({fill:"45-purple-yellow"});
mainRect.attr({fill:"45-purple-yellow"});
and the functions
function leavePipeB1(){
mainBall.animate({cx:550, cy:340}, 1200, "linear", ball1ToMagnet);
}
function ball1ToMagnet(){
mainBall.animate({cx:130, cy:115}, 1300, "elastic", showRect);
}
function leavePipeR1(){
mainRect.animate({cx:550, cy:340}, 1200, "linear");
}
function hideBall(){
tempBall.hide();
}
function hideRect(){
tempRect.hide();
}
function hideEll(){
tempEll.hide();
}
function showRect(){
tempRect.show();
}
I call them like this:
hideRect();
hideEll();
leavePipeB1();
hideBall();
leavePipeR1();
But leavePipeR1() doesn't work.
Any way I could fix this?
This is because a Rect doesn't have a cx,cy property. Swap those for x,y instead.
I call my animated element as follows:
emdrSpawnElement = anime({
targets: '#alternate-main .el',
translateX: destination,
direction: 'alternate',
loop: true,
easing: selectedEasing,
duration: emdrSpawnElementSpeed,
autoPlay:false,
loopBegin: function (anim) { },
loopComplete: function (anim) {
if(trackingPassesActive == true)
{
totalPasses++;
if((totalPasses % 2) == 0)
{
passesDisplayed++;
document.getElementById("passes-count-2").innerText = passesDisplayed.toString();
console.log(passesDisplayed);
}
}
clearInterval(switchDirectionSoundPlayer);
switchDirectionSoundPlay();
}
});
My interface contains a slider to change the speed of the element. Every time the slider is moved, the code listed above calls again.
My problem: the loopComplete function is running as if every time I change the slider, a new anime element is created without deleting the old one. The result is the loopComplete function being called many times, increasing every time I change the slider.
My goal is to stop repeat calls to the loopComplete function. How can I remove the anime element every time I want to change its speed? I only want the loopComplete function to be calling for one anime element at a time. Much love to anyone who can share some wisdom on this subject.
I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.
<script>
var doughnutData = [
{
value: 80,
color:"#74cfae"
},
{
value : 20,
color : "#3c3c3c"
}
];
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
</script>
I have tried using
setInterval("Chart();", 500);
I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.
The animation can be viewed at the bottom of this website: http://www.chartjs.org/
Many thanks for any guidance and direction!
You should pass a proper function to setInterval.
I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.
Here is how you function should look like:
setInterval(function () {
myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
}, 2000);
Here is working JSFiddle.
setInterval takes a function as parameter.
Try:
setInterval(function(){ Chart(); }, 500);
I'm trying to create different transition times for each slide in an impress.js presentation.
I found the code below in a book about impress.js. But checking it on JSLint it shows errors. I am not good enough with javascript to correct this myself. Anybody willing to help me out?
Edit: I need a solution without jQuery. This is because impress.js allows you to navigate through the presentation with spacebar and arrow keys and I don't want to lose that functionality.
I found that when navigating with the keys (while jQuery is timing the auto-advance) it does not respect the position where you navigated to, but forces you away from where you are. I would like instead that if you navigate to a slide (position) the auto-advance starts running the custom set time for that particular slide and advances to the next slide when the set amount of time has passed. This would be an awesome addition to impress.js. I hope this can be done. Thanks for your effort!
JSFiddle: http://jsfiddle.net/5sSE5/8/ (script added at the end of impress.js)
var step_transitions = [
{ "slide": 1, "duration": 2000 },
{ "slide": 2, "duration": 4000 },
{ "slide": 3, "duration": 1000 }
];
$(document).ready(function () {
var time_frame = 0;
step_transitions.filter(function (steps) {
time_frame = time_frame + steps.duration;
setTimeout(function () {
api.goto(steps.slide);
}); time_frame;
});
});
Addition: below script respects keyboard navigation, but all the slides have the same transition time.
var impress = impress();
impress.init();
document.addEventListener('impress:stepenter', function(e){
if (typeof timing !== 'undefined') clearInterval(timing);
var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
timing = setInterval(impress.next, duration);
});
There is an error in your code in the setTimeout:
setTimeout(function () {
api.goto(steps.slide);
}, time_frame);
It seems that the time_frame variable should be second argument of the setTimeout method.
Update
You also forgot to initialize the api variable before using it:
var api = impress();
You also need the jQuery library to be able to use the $ function.
See updated fiddle
Update 2
I reworked your code to make it continue from the first slide after the last is reached:
var step_transitions = [
{ "slide": 0, "duration": 3000 },
{ "slide": 1, "duration": 4000 },
{ "slide": 2, "duration": 2000 }
];
$(document).ready(function () {
var time_frame = 0,
api = impress(),
current_step_index = 0,
do_transition = function (){
var step = step_transitions[current_step_index];
api.goto(step.slide);
current_step_index++;
if(current_step_index >= step_transitions.length){
current_step_index = 0;
}
setTimeout(do_transition, step.duration);
};
//initial run
do_transition();
});
Note, that slides must start from 0, not 1.
See updated fiddle
I'm using superscrollorama and need to have an animation play once and then never again during the parallax. I could create a function to play the animation but it seems as though it only would work on completion of the parallax. Any thoughts or ideas would be helpful.
controller.addTween('.div', (new TimelineLite()).append([
TweenMax.from( $('.div .hero'), 1,
{css:{left:'1500', top:'-200'}, ease:Quad.easeInOut}),
TweenMax.fromTo($('.div .background'), 1,
{css:{left: -40}, immediateRender:true},
{css:{left: -45}})
]),
100 // scroll duration of tween
);
var oneTime = function(!firstime) {
var firstime;
TweenMax.from( $('.football'), .50, {
css:{left:'1500', top:'-300'}, ease:Quad.easeInOut})
), 500, 500 ;
}
From the top of my head, TweenMax has a method onUpdate which would fire each time one of the properties is valid, and you can even tween any non-standard properties, so with that, you could just call your function, check against a value, and fire oneTime function when it resolves to true, and never do this again ..
It would look something like this:
TweenMax.fromTo($('.div .background'), 1,
{css:{left: -40}, immediateRender:true},
{css:{left: -45}, onUpdate:oneTime,onUpdateParams: $(this).css('left')})
Does it help you this way?