Hey
I'm having some troubble trying to config this for multiple scenes.
So I have my parent component with basic v-for.
`
</div>`
Horizontal Chart is going to reveal each graph when user scroll.
On this file I have this code on mounted .
mounted(){ var box = document.querySelectorAll('.js--triger-chart') TweenMax.set(box, { skewY: 3, skewX: 3, y: 50, }) const scene1 = this.$scrollmagic.scene({ triggerElement: box, triggerHook: 0.8, offset:-20, reverse:false }) scene1.on('enter', (e) => { console.log('Enter') TweenMax.to(box, 0.3, { skewY: 0, skewX: 0, y: 0, }) }) .addIndicators({ name: '2 (duration: 300)' }) this.$scrollmagic.addScene(scene1) },
log message gets call 3 times ( cause I have inside DataCharts 3 items).
Do you know what my cause this issue?
Also, is there a way to flag on enter revealed elements?
Hey I'm having some troubble trying to config this for multiple scenes.
So I have my parent component with basic v-for. `
Horizontal Chart is going to reveal each graph when user scroll. On this file I have this code on mounted .
mounted(){ var box = document.querySelectorAll('.js--triger-chart') TweenMax.set(box, { skewY: 3, skewX: 3, y: 50, }) const scene1 = this.$scrollmagic.scene({ triggerElement: box, triggerHook: 0.8, offset:-20, reverse:false }) scene1.on('enter', (e) => { console.log('Enter') TweenMax.to(box, 0.3, { skewY: 0, skewX: 0, y: 0, }) }) .addIndicators({ name: '2 (duration: 300)' }) this.$scrollmagic.addScene(scene1) },log message gets call 3 times ( cause I have inside DataCharts 3 items). Do you know what my cause this issue? Also, is there a way to flag on enter revealed elements?
Thanks!