Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_Greg _

timeline dynamic property

Recommended Posts

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?

Link to comment
Share on other sites

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 :D Make sure that it's actually helpful and worth the cost of being non-standard. You might also be interested in GSAP effects

  • Thanks 1
Link to comment
Share on other sites

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"}})?

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×