I have avatar with animations, like flying, floating, eyes, etc. and perform specific animation based on keycode mapping with specific animation.
to perform specific animation on specific key, i have created custom animation component as follow schema:
schema: {
keyCode: { default: stopAllAnimation }
}
and put that element and component in network schema:
{
selector: ".AvatarRoot",
component: "own-animation"
}
Locally/Individually it is working fine but in NAF I am facing the syncing issue like play specific animation not sync in other tab/screen.
Any one know how avatar animation works in network a-frame? and cloud be possible to sync perfectly.
You need to make things with a-frame schema and register component with a-frame extras included to make animation from gtlf/glb models.
The flow is like you need to set the register component with clip name in local JS file like this
let currentKeyDown = null;
document.addEventListener("keydown", (e) => {
currentKeyDown = e.which;
const avatar = document.querySelector("#local-avatar");
switch (currentKeyDown) {
case 37: // left arrow key
avatar.setAttribute("player-info", "clip:Walk");
break;
}
});
and in register component if previous clip and new clip are different set a new clip. like this
if (oldData.clip !== this.data.clip) {
this.character.setAttribute('animation-mixer', {clip: this.data.clip, crossFadeDuration: 1});
}
Maybe you can take this code for reference and I have added to glitch. Glitch walking demo
I'm not sure if this question has been asked before. Anyway.
TL;DR: I have an array with URLs of images. How do I render every image with its URL (show each image) like this (my current solution is down below):
I'm creating an Unsplash API image retrieval React app and I've figured out how to get the photos, how to render them etc. What I'm scratching my head at is this: how to display them in a grid with 3 columns and no rows defined (I'll attach a screenshot of what I mean down below)? I use Axios to perform the get request and in .then I log the response in the component state array (this.state.results is an array) and I use map to loop through the responses and get the url. Basically this:
// the request
axios.get(url).then((response) => {
this.setState({...this.state, spinning: false, results: response.data.results});
})
// the component render - this is the entire section where I will display the images.
// these are styled components
<ResultsSection>
<ResultsDivGrid>
<Spin indicator={loadIcon} tip='Loading photos...' spinning={this.state.spinning} style=
{{position: 'absolute', left: '50%'}}/>
{
this.state.results.map(photo => {
console.log(photo);
return <ResultsPhoto src={photo.urls.regular} alt={photo.alt_description} />
})
}
</ResultsDivGrid>
</ResultsSection>
This gets me the images in a grid fine. This is what I get:
Try to add this to your grid container:
grid-auto-flow: dense;
I built a landing site using Angular. To make it SEO friendly, I had to do prerender it.
The landing page starts with an intro animation (using CSS' animation).
When I first load the page/full reload, the animation starts, and in the middle the app is being bootstrapped so ot restarts the animation again.
I was wondering if there's a way to prevent the animations to reoccur. I know that there are few questions that might be similar to mine, but none of them helped me.
I have tried to solve this issue by:
Adding initialNavigation in AppRoutingModule:
#NgModule({
imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
AddingTransferHttpCacheModule and BrowserTransferStateModule to AppModule, and ServerTransferStateModule to AppServerModule.
You could do it, however it might not be the answer you're looking for.
First let's see what happens when a SSR Angular app starts in the browser:
The browser receives the server-side rendered page. The HTML is rendered, including your animation, and it starts playing. Then at the bottom of the page, the angular script tags are parsed, and the JS for the app starts downloading.
While the app is downloading, the animation is playing.
When the app is downloaded, it bootstraps, and when it's bootstrapped, it renders the whole DOM again, including your animation. During this process, the old animated elements are removed from the DOM, and then new animated elements are added. The animation starts playing the second time.
You can go around this in 2 ways:
either don't start the animation until the app is loaded on the client (add the animation with a custom class when the app runs in a browser)
or move the animation outside of your app, embed it manually to the index.html - this way when the SSR re-render happens it will not be affected. (this way you can't have the element inside your <app-root></app-root> elements)
Hope this helps!
Have you tried to save any indication of initial loading, for example with cookies as suggested.
And then wrap the animated element with [#.disabled]="indication", it should look like this:
<div [#.disabled]="isInitialized">
<div #someAnimation>
...
</div>
</div>
It's actually fairly simple - all you need to do is:
get your initial (server side generated) page url
store it in the TransferState
when client page is reloaded, check if the url is the same
if so, fast forward animation immediately right to the end
ensure it's only done for the initial navigation (as the server- to client-rendered transition only occurs once)
I've created a simple directive for this purpose. Just put it on any element that has a css animation e.g.
<div class="slideInAnimation" ssrPreventAnimationReplay></div>
Here it is:
#Directive({
selector: '[ssrPreventAnimationReplay]'
})
export class ServerSidePreventAnimationReplayDirective {
static key = makeStateKey('ssrPreventAnimationReplay');
static subscription: Subscription;
constructor(
private el: ElementRef,
private transferState: TransferState,
private router: Router,
private renderer: Renderer2,
#Inject(PLATFORM_ID) private platformId) {
}
ngOnInit() {
if (isPlatformServer(this.platformId))
this.transferState.set(ServerSidePreventAnimationReplayDirective.key, { url: this.router.url });
else {
let value = this.transferState.get(ServerSidePreventAnimationReplayDirective.key, null);
if (value && value.url == this.router.url) {
this.preventAnimation();
this.cancelOnNavigation();
}
}
}
ngOnDestroy() {
if (ServerSidePreventAnimationReplayDirective.subscription)
ServerSidePreventAnimationReplayDirective.subscription.unsubscribe();
}
private preventAnimation() {
this.renderer.setStyle(this.el.nativeElement, 'animation-duration', '0ms');
this.renderer.setStyle(this.el.nativeElement, 'animation-delay', '0ms');
}
private cancelOnNavigation() {
ServerSidePreventAnimationReplayDirective.subscription = this.router.events.subscribe(async event => {
if (event instanceof NavigationStart)
this.transferState.remove(ServerSidePreventAnimationReplayDirective.key);
});
}
}
You can disable angular animations in a similar fashion.
Hope it's of help to someone.
Import NoopAnimationsModule to the app.server.module.ts
#NgModule({
imports: [
NoopAnimationsModule,
I am trying to create a loading spinner to put at the bottom of a div like this jsfiddle so its always at the bottom when my returned code is appended to its sibling above its child element. Then when I scroll to the bottom of the page my endless scroll script runs and changes display from none to block of the spinner and once the next set of results is appended the spinner is hidden again.
The problem is is that once the scrollbar hits the bottom of the page the spinner triggers the get request twice for some reason and my results are doubled upon being appended. This happens only when the spinner div is inside the container element. My code runs fine with the spinner there appending the results once. Even using position:relative; on the container and absolute on the spinner div and setting bottom:0px; causes two get requests.
No matter how I create the spinners with CSS they all do the same thing multiple get requests. I have had to place the spinner in a div with overflow:hidden; also to prevent the jumping behavior of the scrollbar which causes continuous get requests when my code triggers.
Am I going the right way about this or is my logic flawed or what is wrong here?
EDIT js code that triggers the get request
$(document).ready(function() {
if ($('.pagination').length) {
$('#id2').scroll(function() {
var currentuserfeed = $('#currentuserfeed .pagination .next_page').attr('href');
if (currentusershow && $('#id2')[0].scrollHeight > 820 && $('#id2').scrollTop () >= $('#id2')[0].scrollHeight - $('#id2').height ()) {
return $.ajax({
type: 'GET',
url: currentusershow,
data: { currentusershow: 'user' },
dataType: 'script',
});
};
});
return $('#id2').scroll();
};
};
I am using CSSTransitionGroup from react-transition-group and I have a page displaying several objects, which go through some filters (every filter changes the state of the array - cant do it otherwise). I want to activate leave transition only on one element (when the timer of the object gets to 0).
Is there a way to achieve it without activating the leave when i filter?
EDIT:
Each object in my array is an auction that contains several information including a timer. i want to avoid the activation of the leave animation when i search my db and activate it only when the timer finishes.
home component:
eachAuction(item, i) {
return <Auction key={i} index={i} auctionfinished={this.deleteAuction}
offerBid={this.offerBid} data={item} />
}
render:
<div>
<CSSTransitionGroup
transitionName="auction"
transitionAppear={true}
transitionAppearTimeout={700}
transitionEnterTimeout={700}
transitionLeaveTimeout={500}>
{this.state.auctionsArr.map(this.eachAuction)}
</CSSTransitionGroup>
</div>
EDIT: What about specify the leaving class inside the element?
eachAuction(item, i) {
return <Auction {timer===0 ?? 'className="leaving"'} ... />
}
Then you specify the CSS effects:
.auction-leaving div { display: none }
.auction-leaving div.leaving { /* animation start */ }
.auction-leaving-active div.leaving { /* animation end*/ }