Recently I found a very nice code (d3js bar chart race) on github.
I would like to change this code so I can apply a delay of some seconds when the animation stops and then restart from the begining, keeping the animation in a loop.
In the source code, I can see the following code:
if(year == 2001) ticker.stop(); // stop the animation
Now, can I use d3.time/d3.settimeout/d3.interval/? to this behavior?
What is the best way for achieving it?
Related
Does the Nivo charts library allow on-load animations for pie charts? I have only been able to get on-load animations for bar charts, but not for pie charts.
Nivo has a transition mode property which gives animation when a chart node is clicked. I need the animation to show on component load. Is there a workaround for this or has anyone managed to get this feature to work before? My pie chart is a react js storybook component.
This seems to be a difficult problem to solve. Nivo has an outstanding issue out where they made some progress, but based on the final postings the initial draw still has issues. I was able to force an initial render with a little help from window.setTimeout() but the animation ends up warping the circle, I'm guessing that is why it doesn't work by default.
I tried Victory.js and it also has the exact same issue. You can use this technique in React.js to force the initial draw.
My solution was to move to react-chartjs-2, which worked right out of the box.
https://react-chartjs-2.js.org/components/doughnut/
I developed this one pager which has Lottie Animation SVG
using the BodyMovin JS Script
Here is a link
http://clients.tipoos.com/scopio
Notice when you get to to the middle part where the title is:
DIAGNOSTIC EXPERTISE IS GEOGRAPHICALLY LIMITED. LET’S SET IT FREE.
You have this animation:
https://prnt.sc/iqoig0
The screen get stucked and the scroll effect is bad in that section
I don't know why it happens
and I can't get any answer anywhere
can anyone assist?
Thanks
apparently some containers are not yet in the DOM when you're trying to load the animations. You should make sure the element exists before loading an animation.
For example the element 'coin-mobile' doesn't seem to be present when loading the animation.
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!
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 working in d3.js, making a chart object. My chart has an update() method that refreshes the data, using a transition to animate the change. Because I have several different objects to animate within one chart, I wanted to store the transition as a member of the Chart's prototype, then use transition.each wrapped around my transitions to allow all the transitions to inherit the settings of the outer one. I am using setTimeout to schedule updates to the chart over time, so it becomes an animation.
The chart is supposed to show the distribution of means of a skew population, as more and more means are taken. Here's a working version, where the transition is not saved as a member of the chart prototype: http://jsfiddle.net/pmwxcpz7/
Now, I try to modify the above code to store the transition during the constructor of the Chart. When I fetch the saved transition object and call transition.each() in the chart's update method, it works for the first several hundred calls, then stops working. Here's the above code, with the creation of the transition moved to the constructor: http://jsfiddle.net/whtfny15/1/
When I run the second version of the code, the chart stops animating part of the way through, and the console shows many errors saying
TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)
I have reduced the code to the minimum needed to generate the error here: http://jsfiddle.net/bw1e2vLo/1/ (note that the error shows in the console, but this script doesn't produce any visual output.)
When I run the code (in Firefox), watching the console, I get 200 errors, all of which say
TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)
I'm not sure what's going on. I would like to be able to save the transition object into my chart's prototype, so I can reuse the delay and duration settings for future animations.
Thanks for the help!
It's not a good idea to store D3 transitions because they are stateful -- what happens when you operate on them depends on whether they are scheduled, running, or finished. If they are finished you can't in fact do a lot with them at all, as you've discovered. In general, you should only ever manipulate a transition when creating it.
The D3 way to do multiple transitions is to re-select the elements to operate on and initialise a new transition. You can store the parameters (delay and duration) in separate variables if you want to reuse them. If you're using a custom function for the transition itself, you can also save that separately and "assign" it to the transition using .attrTween().
I thought I would add that I opened an issue for this question on the d3 GitHub, and Mr. Bostock suggested using transition.call() to apply the settings in a callback right before using the transition.
The code would look something like this:
function myTransitionSettings(transition) {
transition
.duration(100)
.delay(0);
}
// Then later…
d3.transition().call(myTransitionSettings)…
The callback has access to the current transition object, so it can apply the same settings to each new transition that invokes it.