Is there a way to completely kill gsap and reset any dom changes that gsap did, e.g any css changes, transforms, pin-spacer. Right now I can use kill, but it won't clear the pin-spacer, and nor it fully clear the css changes that gsap did before its destroyed.
I want to completely wipe/clean gsap animation & revert the dom to same state as it was before initializing gsap.
Unless you've got inline styles besides the ones GSAP sets, clearProps should work for you:
gsap.to("*", {clearProps:true})
Related
I've used keyframes to animate the entrance of some elements onto my page, however the elements are located at the bottom of the page, so the animation takes place before you see them.
Is there a way to stop the animation from happening until the user scrolls into view of the elements? Preferably not a jQuery solution since I am not familiar with it.
Note: I know there is a library called wow.js that solves this issue, but it uses animate.css for it's animations. This is a problem for me because I was using animate.css originally but it was overwriting/conflicting with some other css I had. That is why I switched to using keyframes for the animations, and in order to have all the properties of elements working correctly I believe I have to stay with keyframes rather than animate.css
I found my own answer! Wow.js still works because you don't have to necessarily use animate.css animations, you can still use your own custom animations.
I'm using the vue-fireworks component (https://github.com/dampion/Vue-fireworks) to display an HTML5 Canvas animation of fireworks. It starts when the component is mounted which is fine. But I can't figure out how to make it stop. I need to stop the fireworks after a button click. I'd prefer that no more fire off and any that are onscreen when the button is clicked are allowed to continue to their conclusion.
Are you able to modify the source code of the Fireworks component?
I can see that it has a data prop of auto that is set to true.
If you could change that to a straight forward prop, then by changing that value to false it would stop adding more fireworks and let the other animations finish.
<Firework :boxHeight="'100%'" :boxWidth="'100%'" :auto="false"/>
Haven't tested myself, just an assumption reading through the code. Hope it helps.
I'm using web components in a shadow dom, and all animations work fine in Chrome. However, in Safari and thus iOS Safari, the animations on elements work fine, but not on pseudo elements. This baffles me, because it's ONLY on pseudo elements like :after and :before.
There is nothing wrong with the code, because when I run it without a shadow dom everything triggers just fine and works perfectly in all browsers.
Why is this, and how can I remedy this problem?
I've tried setting important on the animation css, didn't work.
Tried moving #keyframes higher up in the shadow dom, didn't work.
Tried including the #keyframes in the document that includes the shadow dom, this worked.
However, I'd prefer not to solve it like this because then I have to include a shared animation css asset in both the main document and the document that is meant to be included via shadow dom. And it's still weird that the normal animations work, but not pseudo elements. The pseudo elements are there, the ONLY thing lacking is that the animation doens't trigger.
I have a sort of WhatsApp clone project. From the users listing component, it will redirect to each users chatWindow. I dont want to re-render the chatWindow component which was already rendered.
This is what happening
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted
Navigate to Userchannel from ChatWindow1 - ChatWindow1 unmounted
Navigate to ChatWindow2 from Userchannel - ChatWindow2 mounted
Navigate to Userchannel from ChatWindow2 - ChatWindow2 unmounted
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted again.
I know using state we can render the ChatWindow again. But Is there a possibility to avoid the unwanted re-renderng. Currently I am usinf RNRF as the router.
Optimising re-render can be done in multiple ways in react.
You can use PureComponent Implementation where react itself shallow compares the props and re-renders only when necessary.
If you want more granular control, go with shouldComponentUpdate which gives you a lifecycle method where you can compare the props and decide whether you want to avoid render. Please make sure the comparison is not complex. The more complex comparisons can make the app slow, in which case the optimisation back fires.
Use Flat list instead of List view or scrollview for better performance and make sure you add a keyExtractor and Item as a PureComponent.
Make sure the code splitting is properly done. you cannot optimise a very large amount code in a single page. If the components are small enough, you can optimise them better.
If you have a lot going on the JS, I would strongly recommend using a native navigation solution like react-native navigation
You can use console logs in render to find out the render count and take necessary actions. Please make sure that these optimisations can block necessary renders as well. So make sure props are different when you want to re-render things.
Regarding the mount / unmount
In most cases the navigation keeps the screens in the stack. Going back will not trigger a re-render. You can do one thing, make sure page works on props, so that re-render happens only when data changes.
Helpful Links:
https://medium.com/#ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27
https://medium.com/vena-engineering/optimizing-react-rendering-61a10e741edb
Since your screens are unmounted there is nothing wrong to re-render when you navigate back to that screen. Of course you could avoid this by having all your screens mounted but that might cause memory leak.
Can anyone point me at an example of using riot.js with jQuery animations?
I'd like to tap into the event after riot re-renders something, and then fire jQuery $(selector).fadeIn() on the element that has changed. The problem is that, the element may not exist yet when I'm changing the data, so I can't run the jQuery fadeIn until after Riot finishes re-rendering.
The best I can come up with is setTimeout; is there an event in Riot that I can listen to directly?
Usually, Riot has two events for re-rendering:
update - this is before rendering
updated - after rendering has happened
this.on(
'update',
function () {
}
)
One another possibility, is to learn about MutationObserver.
See http://davidwalsh.name/demo/detect-node-insertion.php
The riot events only tells you that something has been updated or is about to update, but not what parts of the dom will change.