Jump to content
Search Community

Refresh on ScrollTrigger.batch()

yeshvanaken test
Moderator Tag

Go to solution Solved by iDad5,

Recommended Posts

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
 

Edited by yeshvanaken
typos and better wording
Link to comment
Share on other sites

  • Solution

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?

  • Like 1
Link to comment
Share on other sites

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
Link to comment
Share on other sites

In fact @iDad5 is right. A ScrollTrigger.batch() method returns an array of ScrollTrigger instances as stated in the docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

So you have to loop through each one and refresh it or just call the refresh method on the global ScrollTrigger constructor if you don't have any other ScrollTrigger instances:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...