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
