Antlers

Oh I wasn't aware of that Scrolltrigger.refresh() method. How taxing would it be to call it everytime each component has finished rendering? If I have 8 components on a page, each dispatching a global event when ready, and each component listening to that event and calling Scrolltrigger.refresh(). Would calling that method 8 times x 8 components slow down the user experience?

Just thought of an edge case where this solution doesn't work. Lazy loaded images. Not all images can be preloaded because they are only loaded as needed. Does anyone have any other suggestions?

That's not a bad idea but would need to be a global loader. Not sure that would work withc ompoenets loading at different speeds. When the component loads the date, registers any images with the gloabl loader and when all the images in the image loader have loaded an event is dispatched to initialize all GSAp animations in all components. It might work. Thank you.

Thanks for your reply. I feel like a dummy because I didn't explain myself very well. We are initializing GSAP after loading the data but at the point the images haven't loaded yet. It's the images loading and shifting the DOM height that breaks the GSAP animations below that point. I've pasted an example component below. Hopefully it helps. import { getLocalisationStrings, getTextIntro } from 'lib/services'; import { checkForMissingLocalisationStrings } from 'lib/utils/utils'; import { gsap } from 'gsap'; import React from 'react'; import TextIntro from '../components/common/TextIntro'; const i18nCodes = [ 'TextIntro.Title', 'TextIntro.Text', 'TextIntro.ButtonLabel' ]; class TextIntroContainer extends React.Component { constructor(props) { super(props); this.uid = `${this.props.attrs.apiId}__${Math.ceil(Math.random() * 100000)}`; this.state = { appStatus: 'init' // Can be 'init', 'busy' or 'ready' }; } componentDidMount() { this.loadData(); } loadData() { this.setState(() => ({ appStatus: 'init' })); Promise.all([ getLocalisationStrings(undefined, i18nCodes).promise, getTextIntro(undefined, this.props.attrs.apiId).promise ]) .then(responses => { const i18n = checkForMissingLocalisationStrings(responses[0].translations); const data = responses[1]; this.setState(() => ({ i18n, data, appStatus: 'ready' })); this.setAnimation(); }) .catch(() => { this.setState(() => ({ appStatus: 'error' })); }); } setAnimation() { // target only this component by ID const id = `.text-intro${this.uid}`; // animation timeline connected to scroll const tl = gsap.timeline({ scrollTrigger: { trigger: id, start: 'center 90%', end: 'center 10%', scrub: true // markers: true } }); // fade in tl.from(`${id} .text-intro__title`, { duration: 4, y: '+=50', autoAlpha: 0, ease: 'Circ.easeOut' }); tl.from(`${id} .text-intro__text`, { duration: 4, y: '+=50', autoAlpha: 0, ease: 'Circ.easeOut' }, '-=3'); tl.from(`${id} .text-intro__button`, { duration: 4, y: '+=50', autoAlpha: 0, ease: 'Circ.easeOut' }, '-=3'); // fade out tl.to(`${id} .text-intro__title`, { duration: 4, y: '-=50', autoAlpha: 0, ease: 'Circ.easeIn' }, '+=8'); tl.to(`${id} .text-intro__text`, { duration: 4, y: '-=50', autoAlpha: 0, ease: 'Circ.easeIn' }, '-=3'); tl.to(`${id} .text-intro__button`, { duration: 4, y: '-=50', autoAlpha: 0, ease: 'Circ.easeIn' }, '-=3'); } render() { return ( <> <TextIntro id={this.uid} i18n={this.state.i18n} data={this.state.data} modifiers='text-intro--small' /> </> ); } } export default TextIntroContainer;

Hi all, We've been playing with scrolltrigger to fade elements in and out as they enter and leave the viewport. We're using react and are creating a timeline inside each react component, a page may be constituted of any number of these components. Each component is initialized after loading data via an API. So there's a loading delay. The issue is that the components don't always load at the same time. Sometimes components at the top of the page will load after the components at the bottom of the page, depending on the API response speed. So the components at the bottom of the page initialize the GSAP timeline before the page above is fully rendered (either because the data or images ar still laoding), which then breaks the start/end points of the scrolltrigger. This results in some components fadding out too soon and therefore being blank as you scroll. We've tried adding a timeout to the GSAP initialization on each component and this works. If we init GSAP after a few seconds, the scrolltrigger works as expected but obviously this isn't a very accurate way of doing things as pages may take longer or less to load. We're wondering what's the best work around this issue. Do we need to preload all the components, data and images before rendering and before calling GSAP? This would be a huge refactor and major work just to get animations to work. Are there any easier solutions available we're not aware of? I'm sorry for not providing an example, this would not be a simple demo to produce since it involves multiple components and API end points. Hopefully someone can give us some pointers based on the info provided. I hope it makes sense.