https://www.africacreative.com.br/wp-content/themes/africacreative/js/animateRows.js?v=3f1893c

1class UmsAnimateRows extends JsBaseClass {
2	constructor() {
3		super()
4		this.isInitialized = true
5		this.maxWaiting = 30;
6		this.currentWaiting = 0;
7		this._target = document.querySelector('.root__wrapper_rows')
8	}
9
10	async handle() {
11		// this.console.log('UmsHome is running!')
12		this.onEvents()
13	}
14
15	async onDomContentLoaded() {
16		if (this._target) {
17			this.onElementsEvents()
18			this.loadSVGs()
19			setTimeout(() => {
20				this.motionRows()
21				this.addResizeListener()
22			}, 10)
23		}
24	}
25
26	async onEvents() {
27		this.on('add_trigger', (data) => { })
28	}
29
30	async onElementsEvents() {
31		this.console.log('Elements events rows')
32		gsap.registerPlugin(ScrollTrigger)
33		if (window.innerWidth > 770) {
34			this.initScroll()
35		}
36	}
37
38	async initScroll() {
39		this.smoother = ScrollSmoother.create({
40			smooth: 0.8,
41			effects: true,
42			trigger: "#smooth-content",
43			start: "top top",
44			end: "bottom bottom",
45			speed: 0.5,
46			onUpdate: self => { }
47		})
48	}
49
50	loadSVGs(animationSpeed = .5) {
51		// Define a velocidade padrão como 1 (velocidade normal) se nenhum valor for passado.
52		// Use um valor > 1 para acelerar (ex: 2 para dobro da velocidade).
53		// Use um valor < 1 para desacelerar (ex: 0.5 para metade da velocidade).
54
55		// Seleciona todos os containers com a classe .lettering dentro de .display__lettering
56		let containers = document.querySelectorAll('.display__lettering .lettering');
57
58		containers.forEach((container, index) => {
59			// Limpa o container atual
60			container.innerHTML = "";
61
62			// 1. Destroi a animação anterior associada a este container, se existir
63			if (window[`animationSkipForward_${index}`]) {
64				window[`animationSkipForward_${index}`].destroy();
65			}
66
67			// 2. Cria uma nova animação para o container atual
68			const anim = bodymovin.loadAnimation({
69				container: container,
70				renderer: 'svg',
71				loop: true,
72				autoplay: true,
73				path: window.baseUrl.template + '/json/africacreative.json',
74				rendererSettings: {
75					clearCanvas: true, // Garante que o canvas seja limpo
76					preserveAspectRatio: 'xMidYMid meet' // Ajusta o SVG ao container
77				}
78			});
79
80			// 3. Aplica o controle de velocidade
81			// O método setSpeed() é chamado na instância da animação (anim)
82			anim.setSpeed(animationSpeed);
83
84			// Armazena a instância da animação na variável global (window)
85			window[`animationSkipForward_${index}`] = anim;
86		});
87	}
88
89	async addResizeListener() {
90		let debounceTimer
91		const _self = this
92
93		window.addEventListener('resize', () => {
94			if (window.innerWidth > 770) {
95				console.log('addResizeListener desktop')
96
97				clearTimeout(debounceTimer)
98				debounceTimer = setTimeout(() => {
99					console.log("Window resized, refreshing layout...")
100					_self.motionRows()
101				}, 250)
102			}
103		});
104
105		screen.orientation.addEventListener('change', () => {
106			if (screen.orientation.type.includes('portrait')) {
107				location.href = location.href
108			} else {
109				document.querySelector('main').style.display = 'none'
110			}
111		});
112
113		if (_self.checkMobileLandscape()) {
114			document.querySelector('main').style.display = 'none'
115		}
116	}
117
118	checkMobileLandscape() {
119		const isMobileLandscape =
120			window.matchMedia('(orientation: landscape)').matches &&
121			window.matchMedia('(pointer: coarse)').matches;
122
123		// if(isMobileLandscape) {
124		//   document.querySelector('body').classList.add('mobile-landscape')
125		// }
126
127		return isMobileLandscape
128	}
129
130	async motionRows() {
131
132		const checkElems = document.querySelectorAll('.ums__outer_wrapper .root__wrapper_rows .wrapper__master__rows');
133
134		if (checkElems.length > 0) {
135			// Verifica se todos os elementos têm height > 0
136			const allHeightsValid = Array.from(checkElems).every(elem => elem.offsetHeight > 0);
137			
138			if (!allHeightsValid) {
139				console.log('WAITING .... ');
140				this.currentWaiting++;
141				if (this.currentWaiting >= this.maxWaiting) {
142					console.log('Max waiting reached. Stopping retries.');
143					return;
144				}
145
146				setTimeout(() => {
147					this.motionRows();
148				}, 1000);
149				return;
150			}
151		}
152
153		const element = document.querySelector('.root__wrapper_rows .first__row');
154		const styleRowFirst = getComputedStyle(element);
155		const firstRowHeight = element.offsetHeight + parseFloat(styleRowFirst.marginTop) + parseFloat(styleRowFirst.marginBottom);
156		// console.log('firstRowHeight', firstRowHeight)
157
158		const windowHeight = (window.innerWidth > 770) ? window.innerHeight : window.innerHeight - (window.innerHeight / 10)
159		let topHeight = windowHeight - firstRowHeight
160
161		document.querySelector('.ums__outer_wrapper .ums__top').style.height = `${topHeight}px`
162
163		let container = (window.innerWidth > 770) ? 0 : (window.innerHeight / 10)
164		document.querySelectorAll('.ums__outer_wrapper .root__wrapper_rows .wrapper__master__rows').forEach(elem => {
165			const styleRowMaster = getComputedStyle(elem);
166			container += elem.offsetHeight + parseFloat(styleRowMaster.marginTop) + parseFloat(styleRowMaster.marginBottom);
167			console.log(elem.offsetHeight)
168		})
169		document.querySelector('.ums__outer_wrapper .ums__wrapper').style.height = `${container}px`
170
171		// console.log("Altura de .ums__top:", topHeight)
172		console.log("Altura total:", container)
173
174		if (this.isInitialized) {
175			this.isInitialized = !this.isInitialized
176			this.showLayout()
177		}
178

179		ScrollTrigger.getAll().forEach(trigger => trigger.kill())
180		ScrollTrigger.refresh()
181
182		document.querySelectorAll('.ums__outer_wrapper .root__wrapper_rows .trigger__features').forEach((project, index) => {
183			const percentage = ((topHeight / windowHeight) * 100) + '%';
184			const toWidth = (window.innerWidth > 770) ? '1000vw' : '4000vw'
185			gsap.timeline({
186				scrollTrigger: {
187					trigger: project,
188					start: index === 0 ? `clamp(top ${percentage})` : "clamp(top 100%)",
189					scrub: true,
190					markers: false,
191					onUpdate: (self) => { },
192				}
193			})
194				.to(project, {
195					width: toWidth,
196					ease: "none",
197					onComplete: () => { }
198				})
199		})
200	}
201
202	showLayout() {
203		const tl = gsap.timeline({
204			onComplete: () => {
205				// this.console.log("Animação de entrada completa!")
206			}
207		})
208
209		tl.to('#smooth-wrapper', {
210			autoAlpha: 1,
211			duration: 0.5,
212			delay: 0,
213			onComplete: () => {
214				document.querySelector('.display__lettering .lettering').classList.add('loaded')
215				gsap.to('.slogan', {
216					opacity: 1, duration: 0.4
217				})
218				gsap.to('.header', {
219					opacity: 1, duration: 0.4, onComplete: () => { }
220				})
221			}
222		})
223
224		tl.fromTo(
225			'.wrapper__master__rows.first__row .wrapper__rows .item', {
226			x: '2%',
227			opacity: 0
228		}, {
229			x: '0%',
230			opacity: 1,
231			stagger: -0.1,
232			ease: 'power2.out'
233		}, '-=.5'
234
235		)
236	}
237}
238
239window.umsAnimateRows = new UmsAnimateRows()
240// umsAnimateRows.init()