timeline dynamic property

[_Greg _ 127 Likes (Specialist)]

I want to create something like function with parrameters to generate template for timeline

Example:

let tl = gsap.timeline({paused: true, defaults: {duration: 0.2}})

/**
opt format:
opt = {
prop: "", // x, y
from: "", // value "+=10"..
to: ""// value "0"
}
*/

function tlgenerator(element, opt){
	let tl = gsap.timeline();
  	tl.fromTo(element, {opt.prop: opt.from, autoAlpha: 0}, {opt.prop: opt.to, autoAlpha: 1})
	return tl
}

tl.addLabel("start")
	.add(tlgenerator(element1, {prop: "y", from: "-=10", to: "0"}), "start")
	.add(tlgenerator(element2, {prop: "x", from: "+=10", to: "0"}), "start")
....

It is not working example 

I'm not sure that this question need codepan demo?

[ZachSaucier 7,127 Likes (Superhero)]

Hey Nekiy. Demos are almost always useful and one definitely is in this case because putting it into our starter pen shows the error quite clearly: The console shows Uncaught SyntaxError: Unexpected token '.' here: {opt.prop:. This is because you can't just use a plain variable as an object's key. You can work around this though, especially in ES6 it's easy: {[opt.prop]:

 

With that being said, sometimes a general generator like this can turn into just fluff because all that it's doing is what GSAP already does, just with a non-standard API  Make sure that it's actually helpful and worth the cost of being non-standard. You might also be interested in GSAP effects. 

[_Greg _ 127 Likes (Specialist)]

Thank you!
I try to use GSAP effects, but can't undarstand can i use variable property

See the Pen VwapPPw?editors=1010 by -greg- (@-greg-) on CodePen

 

gsap.registerEffect({
    name: "ani",
    effect: (targets, config) => {
         return gsap.fromTo(targets, {[config.prop]: config.from, autoAlpha: 0}, {[config.prop]: config.to, autoAlpha: 1})
    },
    defaults: {duration: 0.2}, 
    extendTimeline: true, 
});


// or directly on timelines:
let tl = gsap.timeline();
tl.ani(".el1", {config:{prop: "x", from: "-=100", to: "0"}})
  .ani(".el2", {config:{prop: "y", from: "-=100", to: "0"}})

 

Im not sure that [config.prop] is right syntaxis for my example. I try to read your link and i don't understand for my example i need somethinkg like: .ani(".el1", {config:{[prop]: "x", from: "-=100", to: "0"}})?

 

[ZachSaucier 7,127 Likes (Superhero)]

The point of an effect isn't to be a general generator like what you're doing - there would be no benefit use them over regular functions. They are meant to create specific effects using a more formalized API. That way you create the effect once and re-use it on multiple elements as necessary. 

[_Greg _ 127 Likes (Specialist)]

Why i try to create something like generator: i have about 10 elements whitch has almost same animation, first i create functions:

let tl = gsap.timeline({defaults: {duration: 0.2}})
let el1
let el2
let el3
...

function fun1(){
 if(el1){ // if element exist
   let tl = gsap.timeline()
   tl.fromTo(el1, {x: "-=10", autoAlpha: 0}, {x: "0", autoAlpha: 1})
   return tl
 }
}


function fun2(){
 if(el2){// if element exist
   let tl = gsap.timeline()
   tl.fromTo(el2, {y: "-=10", autoAlpha: 0}, {y: "0", autoAlpha: 1})
   return tl
 }
}


function fun3(){
 if(el3){// if element exist
   let tl = gsap.timeline()
   tl.fromTo(el3, {y: "-=20", autoAlpha: 0}, {x: "0", autoAlpha: 1})
   return tl
 }
}

....
tl.addLabel("start")
	.add(fun1(), "start")
	.add(fun2(), "start")
	.add(fun3(), "start")
	...
    .add(fun10(), "start")

So all animations almost the same, only change property (x or y) and start value.

 

Then i think can i delete functions if they have almost same structure and create universal function

Thats why i try create something like generator 

@ZachSaucier Thank you for help! How to shorten code if i have almost same animation?

[ZachSaucier 7,127 Likes (Superhero)]

That seems like a great use case for an effect. But instead of passing in different property names, just use a defaults for unused ones:

See the Pen gOrmmYG by GreenSock (@GreenSock) on CodePen

[_Greg _ 127 Likes (Specialist)]

Thank you!
Thats what i need!!
I update demo 

See the Pen VwapPPw by -greg- (@-greg-) on CodePen