I'm developing a portfolio using Svelte, it did everything ok, then I found out I had to use SvelteKit instead of Svelte so I started over and copied pest every line from the original project files, then The splash screen animation has stopped working. The splash screen has SVG text in it, and I wanted the text borders to move and it did, but when I migrated the code to SvelteKit it stopped working.
I tried to understand what happened and correct the problem, but I couldn't ,if anyone has any idea what's going on, please share.
Update:
When i imported the Splash Screen component to a page in the project the animation worked but when i reload the animation don't work i am using +layout.svelte to make the animation appear every time reload the page.
the animeJS Code:
import { onMount } from "svelte";
import anime from 'animejs';
onMount(() => {
let tl = anime.timeline({
autoplay: true,
loop: true,
});
tl.add({
targets: ".lines path",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "easeInOutSine",
duration: 1500,
delay: function (el, i) {
return i * 250;
},
direction: "alternate",
loop: true,
});
});
Related
I am using accessible slick slider which functions the same as regular slick slider but has some additional fields
I cannot for the life of me work out what is going on. Everything works perfectly, but when I add breakpoints, the arrows just stop working entirely, including on page refresh.
I tried adding
mobileFirst:true
and while the arrows started working again, it reverted back to the original slides to show and slides to scroll.
Note - I have called the buttons outside of the container so they can be positioned how I want.
Any help would be greatly appreciated
( function( $ ) {
class SlickCarousel {
constructor() {
this.initiateCarousel();
}
initiateCarousel() {
$( '.log-book-carousel' ).slick( {
autoplay: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
dots: false,
regionLabel: 'Latest news stories',
instructionsText: 'Changing the slide of this carousel will scroll through each news story item one by one. You can click each one to read more.',
responsive: [
{
breakpoint: 1100,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
});
$('.slide-prev').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickPrev');
} );
$('.slide-next').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickNext');
} );
}
}
new SlickCarousel();
} )( jQuery );
edit: Adding mobile first makes the buttons work on mobile but NOT desktop
I've got a StackLayout where one of the entries is a GridLayout of a fixed size. Normally this GridLayout is not visible.
On tapping a button, I'd like the GridLayout be made visible - but I'd like to animate it open - - like a menu open.
Any ideas?
Actually toggling visibility is not too bad - it seems to animate the open - any way to control the speed?
The close operation is maybe too fast for what I'm trying to achieve.
You could animate the opacity of your grid. so when you click on it you would
// View is your gridView, this would hide it completely
view.opacity = 0;
// when you want to show it.
// fade in view.
view.animate({
opacity: 1,
duration: 250
}).then(() => {
//Set the visibility to collapsed after the animation is complete
//I believe you will want to do this so that the surrounding views adjust accordingly.
view.visibility='collapse';
}, (err) => {});
// when you want to hide it.
// fade out.
view.animate({
opacity: 0,
duration: 250
}).then(() => {
view.visibility='visible';
}, (err) => {});
You also may want to look into translate for you animations so you can move view down, left, up, right any way you want.
I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.
This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.
Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?
Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview
var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
});
It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.
See this issue on Github: https://github.com/bevacqua/dragula/issues/121
To implement this functionality with AngularJS:
1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js
2) Include it in your project folder
3) Enable autoscroll in your controller:
// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
document.querySelector('.list')
], {
margin: 30,
maxSpeed: 10,
scrollWhenOutside: true,
autoScroll: function () {
//Only scroll when the pointer is down
return this.down
}
});
I followed the Angular2 tutorial to setup a local development environment with the quick start seed [1], which worked well. Then I decided to test animations using a shortened version of the first example in [2]. The app.component.ts looks like this and it toggles the background color by clicking:
import {
Component, trigger, state, style, transition, animate
} from '#angular/core';
#Component({
selector: 'my-app',
template: `<div [#heroState]="state" (click)="toggleState()">
<h1>TourOfHeroes</h1>
</div>
`,
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee'
})),
state('active', style({
backgroundColor: '#cfd8dc'
})),
transition('inactive => active', animate('1000ms ease-in')),
transition('active => inactive', animate('1000ms ease-out'))
])
]
})
export class AppComponent {
state = 'active';
toggleState(){
this.state = (this.state === 'active' ? 'inactive' : 'active');
}
}
This works well in Chrome and Firefox, but not in IE11. There is no transition is IE11, the background changes instantly (see [3])
I did no project setup of my own and pretty much no coding either except for the inserted animation code. Is there any way to say why this doesn't work?
Thank you!
[1]: github .com/angular/quickstart/archive/master.zip
[2]: angular .io/docs/ts/latest/guide/animations.html
[3]: i.imgur .com/WU3rvEW.gif
PS: Stackoverflow doesn't let me post more than two links, you have to copy them yourselves ...
Angular animations use web animations API and IE does not support it.
http://caniuse.com/#feat=web-animation
https://angular.io/docs/ts/latest/guide/animations.html
You can add polyfill to get it working
https://github.com/web-animations/web-animations-js
Try these steps to perform animation in IE11:
Run npm install --save web-animations-js.
Add import 'web-animations-js in polyfills.ts add it yourself;
Your animation will work in IE10+, IE11 etc, browsers.
for more details refer below link -->
https://angular.io/guide/browser-support
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)