gsap与scrollMagic结合实现效果

1.引入插件包

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"></script>

2.初始化ScrollMagic controller

var controller = new ScrollMagic.Controller()

3.确认触发元素

var scene = new ScrollMagic.Scene({
	triggerElement :''//触发元素
})

4.触发效果

//滚动位置确定
var scene = new ScrollMagic.Scene({
    triggerElement: ''
}).setTween('#bg img', {
    // maxWidth: '1200px',
    scale:2,
    top: '0%',
    left: '40%',
    opacity: 0.6 // 设置触发效果
})

5.添加控制器

var scene = new ScrollMagic.Scene({
    triggerElement: '#section2'
}).setTween('#bg img', {
    // maxWidth: '1200px',
    scale:2,
    top: '0%',
    left: '40%',
    opacity: 0.6
}).addTo(controller)