Jump to content
Search Community

yeshvanaken

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by yeshvanaken

  1. 37 minutes ago, iDad5 said:

    I'm actually lost right now in a problem of my own, but as yours seemed related I checked, and it seems to me at a cursory glance that 'defererInstance' should be an Array of ScrollTrigger instances.  So, you might have to execute update or refresh on the members, not on the array itself?

     

    thanks for your contribution @iDad5, I'll try it right away and come back with a feedback!

    • Like 1
  2. Cheers y'all,

     

    today I've been struggling with this issue:

    I have set up the code to show a website element only when inside the viewport, and I wanted to stagger the animation if multiple elements are on the same row.

    Everything works perfectly but now I have some boxes that are inside hidden tabs, and when these tabs are show the deferred boxes are not animating.
    I'm sure this is related to the fact that the tab, on load, is hidden, so ScrollTrigger does not get them and their position.

     

    the code:

    import gsap from 'gsap'
    import ScrollTrigger from 'gsap/ScrollTrigger'
    
    gsap.registerPlugin(ScrollTrigger)
    
    const deferredBlocks = [...document.querySelectorAll('[data-defer]')]
    
    deferredBlocks.forEach((block) => {
      const blockInner = block.children[0]
      gsap.set(blockInner, { y: 30, scale: 0.99, autoAlpha: 0 })
    })
    
    const deferInstance = ScrollTrigger.batch(deferredBlocks, {
      start: 'top 85%',
      end: 'bottom 25%',
      onToggle: (blocks) => {
        const childrens = []
        blocks.forEach((block) => childrens.push(block.children[0]))
    
        gsap.to(childrens, {
          y: 0,
          scale: 1,
          autoAlpha: 1,
          duration: 0.48,
          stagger: 0.12,
        })
      },
    })


    I tried to use the .update() and .refresh() methods on the ScrollTrigger instance deferInstance after changing the tabs, but these are not working, and it throws an error in the console.

     

    Is there an alternative for the .batch() instance?

     

    thanks in advance for the help!

     

    yesh
     

×
×
  • Create New...