GSAP 3.9.1 version with ScrollTrigger,
when I try to ScrollTrigger's onEnter or onLeaveBack function not working for me,
But with GSAP 3.8.0 is fine ok。
<style>
section {
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
}
section:nth-child(odd) {
background: #ffa;
}
section:nth-child(even) {
background: #eee;
}
#date {
height: 5rem;
display: none;
font-size: 5rem;
}
</style>
<section></section>
<section id="section01">
<div id="date"></div>
</section>
<section></section>
<!-- not working 3.9.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<!-- no problem 3.8.0 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.js'></script>
<script src="./js/ScrollTrigger.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger)
const date = {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
day: new Date().getDate()
}
gsap.from(date, {
scrollTrigger: {
trigger: '#section01',
start: 'top center',
end: 'bottom center',
toggleActions: 'play none none reset',
onEnter() {
$('#date').css({ display: 'block' })
},
onLeaveBack() {
$('#date').css({ display: 'none' })
},
markers: true
},
onUpdate() {
$('#date').text(`${date.year.toFixed(0)} / ${date.month.toFixed(0)} / ${date.day.toFixed(0)}`)
},
year: 0,
month: 0,
day: 0,
duration: 1
})
</script>