Gsap typescript define timeline

[feb707]

Hi all! I was wondering what type I should give 'timeline'. Because I received this error:
Binding element 'timeline' implicitly has an 'any' type.

I am trying to figure out a stable solution.

I provided my source code:

'use client'

 

import { useEffect, useRef } from 'react'

import Image from 'next/image'

 

import styles from './ImageGrid.module.scss'

import { scaleCenterImage, moveUpTitle, introAnimation } from './animations'

 

const ImageGrid = ({ timeline }) => {

const centerImageRef = useRef(null)

const leftImagesRef = useRef([])

const rightImagesRef = useRef([])

const centerImageWrapperRef = useRef(null)

const centerImageTitleRef = useRef(null)

 

useEffect(() => {

introAnimation(centerImageWrapperRef.current)

 

timeline &&

timeline

.add(

scaleCenterImage(

centerImageWrapperRef.current,

centerImageRef.current

),

'<'

)

.add(moveUpTitle(centerImageTitleRef.current), '<')

}, [timeline])

 

return (

<section className={styles.imageGrid}>

<div className={styles.imageGrid__inner}>

<div

onClick={() => timeline.play()}

className={styles.imageGrid__imageWrapper}

ref={centerImageWrapperRef}

data-wrapper-center

>

<div className={styles.textReveal}>

<h2

className={styles.imageGrid__imageTitle}

ref={centerImageTitleRef}

>

Re:Active

</h2>

</div>

<Image

ref={centerImageRef}

sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'

priority

fill

data-image-center

className={styles.imageGrid__image}

src='/images/practice_1.jpg'

alt=''

/>

</div>

</div>

</section>

)

}

 

export default ImageGrid

 

[Rodrigo]

Hi @feb707 and welcome to the GSAP forums!

 

We have type definitions in GSAP, in this case for a timeline is GSAPTimeline so in this case it would be:

const ImageGrid = ({ timeline }: GSAPTimeline) => {};

export default ImageGrid;

Hopefully this helps.

Happy Tweening!