Итак, у меня есть эта ручка: https://codepen.io/MattDAndre/pen/QXNvLr
Это красиво, это работает, я так счастлив!
При встраивании кода в мою страницу Webflow (с некоторыми изменениями CSS) мне нравится объединять CSS и JS в мой HTML.
Вот как это выглядит:
<html>
<head>
<style>
#lottie {
width: 25vw;
height: auto;
}
</style>
</head>
<body>
<div id="lottie"></div>
<script src="https://audioplayerskin.s3.amazonaws.com/Json+Files/lottie.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js" type="text/javascript"></script>
<script src="https://cdn.anothercreative.ca/js/lottie.min.js" type="text/javascript"></script>
<script>
// init scrollmagic
var controller = new ScrollMagic.Controller();
// init lottie, load svg json, and declare params
var lottieAnimation = lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://assets7.lottiefiles.com/packages/lf20_oNDAX8.json'
});
// init gasp timeline to wrap the lottie animation
var lottieControl = new TimelineMax();
lottieControl.to({/*frame:0*/}, 1, {
onUpdate:function(){
lottieAnimation.play()
},
})
// init basic scrollmagic scene for debug purpouses
var lottieScene = new ScrollMagic.Scene({triggerElement: "#lottie", triggerHook: .25})
.addIndicators({name:"lottie trigger indicator"})
.setTween(lottieControl)
.addTo(controller);
</script>
</body>
</html>
К сожалению, это не обнаруживается! Вот мой черновик Webflow: https://murrvox.webflow.io/
Вы найдете, где моя анимация должна быть ближе к нижней части страницы в разделе "наш процесс". Вы также увидите работающую анимацию -> Я использовал для этого веб-проигрыватель embed lottie, к сожалению, у него есть некоторые проблемы, отсюда и обходной путь!
"Индикаторы" прокрутки магии выглядят просто отлично, но моей лотерейной анимации нигде не видно.
Что не так с моим консолидированным кодом для встраивания? Я неправильно ссылаюсь на js-скрипты в теле моего кода?
Буду рад любым мыслям / наблюдениям / помощи, которые вы можете предложить!
Спасибо:)