I want to use enter/leave transitions in vue.js, using the built in javascript hooks for transitions:
https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
My animation library of choice is GSAP: https://greensock.com/
Both, my enter function enter: function(el, done) {} and my leave function leave: function(el, done) {} are called correctly.
The enter animation works just fine — but the leave animation doesn't do anything.
I guess it is a GSAP related thing I do not understand yet. I tried resetting the animation and clearing the inline styles of the animated element. Didn't help.
Here is the codepen:
https://codepen.io/Sixl/pen/oGwOKW?editors=0011
Here's a fixed version: https://codepen.io/GreenSock/pen/veJGmR?editors=0010
I noticed a few problems:
You were calling done() immediately instead of waiting for the animation to complete. I just moved it to an onComplete callback.
You created a single timeline that you were adding all your animations to, but that isn't very appropriate in this case because it's not a linear thing - the clicks could happen anytime. So the playhead on the timeline reaches the end of the first animation, and then when you place a new one at the end (much later, when someone clicks), the playhead would already be way past that spot where you're placing it, causing it to jump to the end on the next render (appropriately). It's cleaner to simply use a TweenMax here instead. Or you could create a new TimelineLite each time there's a click (don't worry - it's fast).
--
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
If you have any more questions, don't hesitate to swing by the GreenSock forums. https://greensock.com/forums/ where there's a great community focused on helping people with GSAP questions.
Happy tweening!
Related
I'm trying to run an animation based on scroll in the background of a React app.
I use Threejs with React Three Fiber. In R3F, there is a hook called useScroll which I want to use.
Problem is that my Threejs scene (a Canvas) is in the background with zIndex: -100, so the scroll handler doesn't get the user input.
If I remove the zIndex property, everything works, but It's not what I want.
The scene look like this demo, the only difference is that mine has element in front.
I don't know if the solution is to use a different css style or something more complexe to allow the handler to do his job. I've been looking at React Portal but I don't think it will work.
Any ideas ?
Thanks in advance.
I am trying to take a 'snapshot' of a babylon3d scene ... in other words: I am trying to clone a babylon3d canvas when a user presses a button, and then append the new <canvas> to the <body> .. Sometimes it works, but other times it does not.
However, if I use a simple canvas (ie. by using fillRect), the cloning/appending always works as expected.
I have set up a test on plunker to demonstrate my problem: plunker: press the button over and over again to see how sporadic it behaves when there is a babylon scene. AND NOTE: You can toggle between the simple canvas and the babylon canvas from within the _jquery(document).ready(...) handler.
thanks, Shannon
This is because from version 2.3.0 of Babylonjs :
Engine now initialize WebGL with preserveDrawingBuffer = false by default.
You need to initialize the Engine by passing a {preserveDrawingBuffer: true} object as third parameter.
Forked plnkr
But this will unfortunately kill your canvas' performances.
See more about it here.
I'm not really a specialist of Babylonjs, and I didn't find a way to make a call from scene.render method where we could use the flag method proposed by
#CapsE. But there is a BABYLON.Tools.CreateScreenshot(engine, camera, size) method, which will make a downloadable png from your scene ; maybe this could help you.
I am new to designing games and have been having trouble for the past couple of days with the animator. I have downloaded a free asset off the Unity store that included a free sprite character and also its animations for idle, walk, run, and jump. My issue is when I go to use this asset pack in my game, I can not for the life of me figure out how to transition between idle->walk, and any state->jump. I believe it has to do with no parameters being set up, as I want the walk animation to occur when my character is moving. The issue is that it seems to be stuck in idle mode. In the animator the transitions are set up, but I can not figure out how to let the animator know when I am moving, and when I am actually idle. How can I connect my characters movement scripts to be used in conjunction with the animation? Do I need to write a new script, that uses new parameters I make in the animator, or am I completely missing something? Again I am very new at this, so I apologize if this is a dumb question but I cannot figure it out. All the videos I have watched only show how to build the animations and put them into the animator, and nothing about the scripts or parameters in specific. Thank you!
Look at the animation transition requirements, then set the required values. For example:
Animator anim = obj.GetComponent<Animator>();
anim.SetTrigger("running");
or
anim.SetFloat("speed", 2);
or
anim.SetBool("running", true);
One small thing that could be going wrong: If you somehow have a reference to the prefab instead of the instantiated object in your scene, it will not work. And to be sure it's not working, play the game, find the object with the Animator in the Hierarchy, click it, and open the Animator window. You can see which state is active.
If this doesn't help, can you describe the transitions in more detail?
I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.
Thanks.
Have you check fullpage.js?
You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.
Then pass it to the parameter easingcss3 of fullPage.js.
easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',
Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)
Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example.
body.fp-viewing-page2-slide1 #section1 .moveOut{
transform: translate3d(0, -400px, 0);
}
Something in this line.
I am using the greensock gsap for animations on my web site. Problem are the callbacks who are executing before the end of the animation. In the example bellow the elements are being removed somewhere on the half of the animation.
TweenLite.to($(".flipper"), 2, {rotationY:180,onComplete:function(){
$(this).remove()
}});
Did anyone experienced the same issue?
No, works fine for me (see jsfiddle below). However, this in your callback function is not your animated object, it's the tween. So you have to use this.target instead if you want to remove it after animation, like this:
TweenLite.to($(".flipper"), 1, {rotationY:180,onComplete:function(){
(this.target).remove()
}});
http://jsfiddle.net/brian_griffin/5Ltfg/
I always recommend using the onUpdateScope, onCompleteScope, etc so you are completely clear on what the scope of this you are doing. The documentation is rather slim on this because it is kinda buried. All onDoSomething functions for greensock have a scope parameter.
TweenLite.to($(".flipper"), 2, {rotationY:180,onCompleteScope: $(".flipper"),
onComplete:function(){$(this).remove()
}});
Makes it completely clear to the Tween that $(this) = $(".flipper"). This is also extremely helpful for when you are wanting to make changes out of scope to the tween. Depending on where you ran you tween it may not have access to jquery objects outside of it's scope but you can pass in a different scope via the onCompleteScope.
As #hjuster pointed out, a transition declared in CSS can conflict with onComplete callback in TweenMax. I think that the reason why onComplete is invoked in the wrong time