Анимация Лотти как изображение-маска ⇐ CSS

[Anonymous]

Можно ли использовать анимацию лотереи в качестве свойства маски-изображения изображения?
Это мой код:

Код: Выделить всё

const newData = {
"v": "5.10.2",
"fr": 60,
"ip": 0,
"op": 61,
"w": 500,
"h": 500,
"nm": "Zeichenfläche – 2",
"ddd": 0,
"assets": [],
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "211120_Birgit-Brandis_1216_AS72265r",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [250, 250, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [182.5, 181.999, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 1,
"k": [{
"i": {
"x": 0.05,
"y": 1
},
"o": {
"x": 0.5,
"y": 0
},
"t": 0,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[-1.361, -1.076],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 4.649],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[365, 247.614],
[349.777, 152.992],
[297.992, 152.991],
[312.734, 84.458],
[312.734, 0.162],
[265.372, 0.162],
[250.757, 0.162],
[181.461, 0.152],
[65.961, 0.002],
[35.985, 0.001],
[0, 0],
[0, 126.637],
[2.322, 136.401],
[14.262, 145.847],
[15.552, 154.496],
[17.362, 166.638],
[17.362, 166.64],
[0.047, 166.64],
[0.047, 286.072],
[0.047, 362.438],
[14.731, 362.697],
[39.602, 363.136],
[253.728, 363.836],
[253.728, 363.635],
[365, 363.999]
],
"c": true
}]
}, {
"t": 60,
"s": [{
"i":  [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0.303, -3.151],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[-3.261, -3.473],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 4.649],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[5.308, 5.652],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[365, 247.614],
[365.027, 153.242],
[364.992, 152.991],
[365.234, 85.958],
[365.234, 50.412],
[343.52, 32.444],
[343.007, 24.162],
[301.211, 24.162],
[63.711, 24.25],
[35.485, 0],
[0, 0],
[0, 126.637],
[-0.053, 137.526],
[0.012, 147.222],
[0.052, 154.746],
[0.237, 166.763],
[0.112, 166.765],
[0.047, 166.64],
[0.047, 278.999],
[22.297, 348.688],
[27.011, 359.347],
[39.602, 363.761],
[253.727, 363.836],
[325.977, 364.01],
[365, 345.999]
],
"c": true
}]
}],
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "211120_Birgit-Brandis_1216_AS72265r",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 3600,
"st": 0,
"ct": 1,
"bm": 0
}],
"markers": []
}

var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: newData,
rendererSettings: {
preserveAspectRatio: 'none',
id:  'mask',
},
};

var anim;

anim = bodymovin.loadAnimation(params);

let lottie = document.querySelector('#lottie')

function playLottie(direction) {
if (direction == 'f') {
anim.setDirection(1)
} else {
anim.setDirection(-1)
}
anim.play()
}
lottie.addEventListener('mouseover', function() {
playLottie('f')
})
lottie.addEventListener('mouseout', function() {
playLottie('b')
})

Код: Выделить всё

#container {
display: flex;
}

#lottie {
width: 300px;
height: 500px;
}

#masked {
mask-repeat: no-repeat;
mask-image: url(#mask);
mask-size: 100% 100%;
mask-position: center;
}

Код: Выделить всё

[img]https://picsum.photos/300/500[/img]

[img]https://picsum.photos/300/500[/img]

Альтернативно посмотрите этот код:
https://codepen. io/jacquesknie/pen/WNVGdWW
Первый HTML-элемент — это изображение, второй элемент — лотерейная анимация, которая запускает анимацию при наведении курсора мыши, третий элемент — то же изображение с анимация лотереи в качестве изображения-маски. К сожалению, это не работает. Идея состоит в том, чтобы при наведении курсора мыши на изображение добавлялась анимированная маска.
Есть ли способ заставить это работать? Может быть, даже с совсем другим подходом?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/790 ... mask-image