Jump to content
Search Community

xposedbones

Members
  • Posts

    3
  • Joined

  • Last visited

Everything posted by xposedbones

  1. That was it! Cleared my node_modules and it worked after that. thanks!
  2. @ZachSaucier I didn't include a codepen since I'm not able to reproduce it on codepen I have this in my package.json, do I need something else ? And thanks for letting me know about the string version of power4!
  3. Started using ScrollTrigger for the first time on a project and was happy to hear about the matchmedia function, but I can't get it to work. I want to disable the instance on mobile and enable it on desktop and I'm getting a 'ScrollTrigger.matchMedia is not a function' in my console. I'm also not seeing the matchMedia in the autocompletion of ScrollTrigger. Here is my code: import { gsap, Power4 } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; /* . . . */ gsap.registerPlugin(ScrollTrigger); gsap.defaults({ease: Power4.easeOut, duration: 2}); this.tl = gsap.timeline({paused: true}); for(let i: number = 0; i < sections.length; i++) { this.tl.from(sections[i], {yPercent: i == 0 ? 0 : 200, autoAlpha: i == 0 ? 1 : 0}); } ScrollTrigger.matchMedia({ '(min-width: 768px)': () => { if (this.instance == null) { this.instance = ScrollTrigger.create({ animation: this.tl, trigger: this.viewport, start: 'center center', end: `+=${window.innerHeight * 2}`, scrub: true, pin: true, anticipatePin: 1 }); this.instanceDisabled = false; } else if (this.instanceDisabled) { this.instance.enable(); } }, '(max-width: 767px)': () => { if (this.instance && !this.instanceDisabled) { this.instance.disable(); this.instanceDisabled = true; } } }); The ScrollTrigger.create works fine call it outside of the matchmedia so I know I'm correctly loading the plugin. I'm on 3.4.2
×
×
  • Create New...