Jump to content
Search Community

sbrack8t

Members
  • Posts

    5
  • Joined

  • Last visited

Everything posted by sbrack8t

  1. I'm trying to load gsap and ScrollTrigger on a project using the cdn links. Our normal JavaScript process uses webpack with babel. I'm getting the following errors for Scroll Trigger in the browser console ` Invalid property scrollTrigger set to {trigger: div.collage__image.collage__type-youtube, scrub: true, end: "+=65%"} Missing plugin? gsap.registerPlugin() Here's the cdn links we're using: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script> And the javascript file import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger';gsap.registerPlugin(ScrollTrigger);const collages = document.querySelectorAll('.collage');collages.forEach(collage => { const collageImages = gsap.utils.toArray('.collage__image'); collageImages.forEach(image => { gsap.to(image, { yPercent: -25, scrollTrigger: { trigger: image, scrub: true, end: '+=65%', }, }); }); });
  2. The items are created in the order they will appear on the page. However the component order is determined by how the user lays out the page. Would it make sense to have function return a number for the refreshPriorty based on the UI component's index position on the page?
  3. General approach question. I'm building a CMS theme that allows an admin user to select from a list of UI components that utilize Scrolltrigger for small animations like "fade in" but also pinned sections with more complex animations. Since it's dynamic, I can't determine the order before-hand and I'm running into issues where the start and stop positions are not in correct place. I'm assuming this has to do with refresh Priority and/or sort. Should these be used together? Also should I rerun ScrollTrigger.sort() after images are loaded or is .refresh() sufficient?
  4. I'm created a timeline for each of the menu items. The timeline plays on mouseenter and reverses on mouseleave. If I hover over a single link the animation works as expected. However if I hover over a link and move to another link while the animation from the previous hover is running, all the animations stop working until I mouseleave all the links and start the process over. Any ideas on how make the experience less buggy?
×
×
  • Create New...