Jump to content
Search Community

powerkaifu

Members
  • Posts

    5
  • Joined

  • Last visited

powerkaifu's Achievements

  1. Gratz!Thanks,I already resolved it!
  2. const date = new Date() gsap.to('#hour', { innerHTML: date.getHours() }) Hi All, when animation is rendering,can I control number is integer. it's floats now <==
  3. 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>
  4. Why does scrollTrigger no trigger target? it mean body?
×
×
  • Create New...