Using a function to animate and passing parameters

[Jo Mourad]

I've searched around, but can't find what i need. Maybe because i don't know what terms to search for... (LEARNING CODING AS I GO...)

 

Basically, i have an animation that i want to call in several pages. But i want, let's say, to change the duration of that animation for some instances. Or maybe the "x" translation.

 

So i created a function for my animation

function fuzionAnim() {
    gsap.to(".fuzion", 10, {x:100, yoyo:true, repeat:-1, ease:"none"})
}

and call it in the specified pages 

fuzionAnim(); 

But can i pass a parameter to the function? For example

fuzionAnim(8); // 8 being the duration i want

How would i do that?

 

i know it's probably plain javascript fundamentals, but i need a bit of help!

Thanks!

[Cassie]

Heya! No worries, we love nice simple well explained questions in here!

You could do something like this

function fuzionAnim(myDuration) {
    gsap.to(".fuzion", {x:100, yoyo:true, repeat:-1, duration: myDuration, ease:"none"})
}

fuzionAnim(2)

But...

GSAP has an official way to do exactly what you're creating, so take a look at registerEffect too!

https://greensock.com/docs/v3/GSAP/gsap.registerEffect()

[Jo Mourad]

@Cassie A-w-e-s-o-m-e.  That simple lol. And can we put in a default value if none is defined?

 

Watched a bit of the video, and i didn't even know that existed. Will definitely look into this !

 

Thanks!