Define tween globally and attach it to elements later?

[trych]

Hi there!

I just started using GreenSock and it works really well generally.
Now I have come to a point where I need to use a certain type of Tween (certain properties and values) on some elements that I need to figure out in different event listeners at runtime. Currently I define the same tween in different places, but I feel I am repeating myself. Is there a way to define a tween globally first and then later "attach" it to elements and have it run? Sometimes this Tween will have to run normally and sometimes in reverse.

Or am I approaching this the wrong way altogether?

Thanks!

[tailbreezy]

Hello trych,

 

Have you considered attaching the tween on the element itself.

document.querySelector('.target")

target.animation = gsap.timeline()

 

animation is just a prop name, you can name it anything.

[GreenSock]

Yeah, that's a pretty broad question; there are a lot of ways you could do it. Is your goal to be able to associate a tween with a particular element such that you can find it anytime from elsewhere in your app? The suggestion @tailbreezy made seems perfectly reasonable to me, but I'm not sure I'm really understanding the core problem you're trying to solve. 

[trych]

Thanks @tailbreezy and @GreenSock. It seems I have not expressed my issue very clearly. I'll try again.

 

I want to first define a certain Tween, that is not associated with an element yet (not sure if this is even possible) and then at a later point figure out certain elements to associate this tween with and play it (normally or in reverse) on these elements. I need this Tween in different places in my code.

Currently I have to define this Tween separately in each of the places where I need it in and I have to define it once forwards, once backwards, so I basically have the definition of almost the same tween like 6 times in my code base. So I was wondering, is there a way to define this tween in one central global place first and then only later associate it with certain elements (and switch certain properties of it, like "this time play it forwards, this time play it in reverse").
 

Does my issue become more clear now?

 

Thanks!

[Shrug ¯\_(ツ)_/¯]

I would suggest creating modular functions to pass through your target(s) and desired parameter(s) for whatever logic you hope to accomplish. Then anytime you need just call the reusable function. It’s really just a matter of building out the general logic to be reusable for what you want to do.

 

Here are three articles that touch on that aspect:

• https://css-tricks.com/writing-smarter-animation-code/#use-functions-to-create-and-return-timelines
• https://css-tricks.com/tips-for-writing-animation-code-efficiently/#tip-8-modularize-your-animations
• https://greensock.com/mistakes/#create-before

[GreenSock]

A tween by its very nature MUST have at least one target (otherwise what's the point?). And I'm a bit concerned that you might be misunderstanding how tween instances work - you can't have the same tween instance going forward for some targets, backwards for others, etc. The playhead can't be in two places at once. 

 

You can definitely create a "template" of sorts for your animations - the vars object - and then plug that in when you've figured out your targets. Sorta like:

const animations = {
  in: { autoAlpha: 1, xPercent: 0, duration: 2, ease: "power2" },
  out: { autoAlpha: 0, xPercent: -100, duration: 1, ease: "power2.in" }
};

// then later...
gsap.to(target, animations.in);
gsap.to(otherTarget, animations.out);

See what I mean? 

[GreenSock]

I didn't see that @Shrug ¯\_(ツ)_/¯ was working on an answer - his is an excellent technique as well which I've used often. Basically, wrap your logic into a function that can be called from anywhere, and it manages things for you. Then you've got one centralized place to make changes. 👍 I just wanted to show you a bare-bones example of reusing a "template" of sorts. 

[Shrug ¯\_(ツ)_/¯]

Sorry to cut in while you were writing, I really like your suggestion also. It's amazing how modular GSAP itself is to meet creative ends, the cape is fitting. 😉

[trych]

Thanks a lot @Shrug ¯\_(ツ)_/¯ and @GreenSock, your explanations make sense to me and helped me to get a clearer picture of how I can use Tweens and how not. Will prepare a modular function to wrap my Tween constructor and also make use of the template that GreenSock suggested. That's a lot cleaner than what I currently have.

[trych]

Sorry, for bringing this up once more, @GreenSock and @Shrug ¯\_(ツ)_/¯. While the suggested modular functions would work, I just now discovered gsap.effects in the docs. Maybe I am misunderstanding, but aren't these effects not exactly what I was looking for in the first place? I understand that you can pre-define a specific effect (a specific type of animation) and then at a later point in time use this effect with a certain element.

Do I understand this correctly? Or am I mixing something up? Also, would there be any pros or cons in using effects instead of the modular functions mentioned above?

[GreenSock]

49 minutes ago, trych said:

Sorry, for bringing this up once more, @GreenSock and @Shrug ¯\_(ツ)_/¯. While the suggested modular functions would work, I just now discovered gsap.effects in the docs. Maybe I am misunderstanding, but aren't these effects not exactly what I was looking for in the first place? I understand that you can pre-define a specific effect (a specific type of animation) and then at a later point in time use this effect with a certain element.

Do I understand this correctly? Or am I mixing something up? Also, would there be any pros or cons in using effects instead of the modular functions mentioned above?

Sure, you're welcome to use those. Nothing wrong with it. I'd say it's a similar concept. I guess I just think of those as more of entire effects rather than a simple tween, but of course you can use it however you want. 

[trych]

Ok, perfect. Thanks for taking the time to explain these basic things to me!