HTML / CSS Animation funktioniert nicht?
Guten Tag
Ich will eine einfache animation von 3 Icons auf der Seite welche sich animieren. Nun habe ich das Plugin Lazy Line Painter gefunden. Wenn ich nur 1 Objekt/ oder animation erstelle funktioniert es. Sobald ich mehrere Animationen auf der Seite haben will funktioniert nur eines der beiden.
Hier findet ihr die Webseite dazu:
Vielen herzlichen Dank!
1 Antwort
du darfst das Object nicht jedesmal überschreiben, sondern brauchst für jede Animation eins.
Statt mehrfach:
let el = document.querySelector('#solar_icon');
let myAnimation = new LazyLinePainter(...etc...);
myAnimation.paint();
eher
let el = document.querySelector('#solar_icon');
let myAnimation = new LazyLinePainter(...etc...);
myAnimation.paint();
let el2 = document.querySelector('#xxx_icon');
let myAnimation2 = new LazyLinePainter(...etc...);
myAnimation2.paint();
let el3 = document.querySelector('#yyy_icon');
let myAnimation3 = new LazyLinePainter(...etc...);
myAnimation3.paint();
Maximale Erfolge!
Hallo Elmex7
Vielen Dank für die Hilfe, leider wird immer noch nur 1 Animation animiert. Habe ich es richtig eingefügt:
<script type="text/javascript">
(function(){
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#solar_icon');
let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":4,"strokeOpacity":1,"strokeColor":"#FFFFFF","strokeCap":"square","delay":300});
myAnimation.paint();
let el2 = document.querySelector('#house_icon');
let myAnimation2 = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":3,"strokeOpacity":1,"strokeColor":"#222F3D","strokeCap":"square","delay":230});
myAnimation2.paint();
}
}
})();
</script>
Bei 2. new LazyLinePainter(el,..) muss es dann auch new LazyLinePainter(el2,...) sein...
Hallo Elmex7
Vielen Dank für die Hilfe, leider wird immer noch nur 1 Animation animiert. Habe ich es richtig eingefügt:
<script type="text/javascript">
(function(){
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#solar_icon');
let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":4,"strokeOpacity":1,"strokeColor":"#FFFFFF","strokeCap":"square","delay":300});
myAnimation.paint();
let el2 = document.querySelector('#house_icon');
let myAnimation2 = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":3,"strokeOpacity":1,"strokeColor":"#222F3D","strokeCap":"square","delay":230});
myAnimation2.paint();
}
}
})();
</script>