pmascis Posted March 11, 2020 Share Posted March 11, 2020 Hi all! I'm trying to make some animations customizable for the user within the backend of a CMS (need to stay using 2.x for now). I'm having JS reference some HTML5 data-* attributes and have had success so far doing simple things like: let duration = $(this).data('anim-custom-duration'); let xFrom = $(this).data('anim-custom-xfrom'); let xTo = $(this).data('anim-custom-xto'); let yFrom = $(this).data('anim-custom-yfrom'); let yTo = $(this).data('anim-custom-yto'); // Create tween let tween = TweenMax.fromTo($(this), duration, {delay: 0.25, autoAlpha: 0, x: xFrom + 'px', y: yFrom + 'px'}, {autoAlpha: 1, x: xTo + 'px', y: yTo + 'px'}); But I'm now running into a problem where I'm wanting the user to change their animation ease and timing. I am trying to combine ease Types as well as ease Timings into an 'ease' variable that I can ultimately use in my tween. The code/problem is as follows: // Easing let ease; let easeType = 'easeOut'; // $(this).data('anim-custom-ease-type'); // Would normally take from the data attribute, but for ease of reference I've just replaced it with the 'easeOut' option. let easeTiming = 'elastic'; // $(this).data('anim-custom-ease-timing'); // Would normally take from the data attribute, but for ease of reference I've just replaced it with the 'elastic' option. if (easeTiming === 'elastic') { ease = 'Elastic.' + easeType + '.config(1, 0.3)'; } // Would be some other else animation statements here let varNotWorkingReference = 'Elastic.easeOut.config(1, 0.3)'; let varWorkingReference = Elastic.easeOut.config(1, 0.3); alert(ease); alert(varNotWorkingReference); alert(varWorkingReference); // Create tween let tween = TweenMax.fromTo($(this), duration, {delay: 0.25, autoAlpha: 0, x: xFrom + 'px', y: yFrom + 'px'}, {autoAlpha: 1, ease: varWorkingReference, x: xTo + 'px', y: yTo + 'px'}); (In the end within my tween I would obviously want to replace ease: varWorkingReference with ease: ease) So 'ease' and 'varNotWorkingReference' are essentially the same thing, based on my other readings within this forum I assume it's because they are strings, but am unsure about a way around it? Any help would be much appreciated! Sorry for posting a question every few years about variables, I only dig into this stuff every so often Cheers, See the Pen dyodWPq by pmang (@pmang) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 11, 2020 Share Posted March 11, 2020 Hey pmascis. You're essentially asking, "How do I interpret a string as an object reference in JS?" The easiest fix is to use JS's eval to interpret the string (disclaimer: you should be careful using it). For more information, see this StackOverflow post. With that being said, this would be much easier in GSAP 3! GSAP 3 allows a condensed string format for eases which the user could use instead. They're easier to use and the implementation would be straightforward - just pass the variable in string form to the ease property of the tween. Why do you need to stay using 2.x for now? 3 1 Link to comment Share on other sites More sharing options...
pmascis Posted March 12, 2020 Author Share Posted March 12, 2020 Hi Zach, Thanks for your prompt reply & for the eval information, I read about people discussing it on other posts but at the time wasn't exactly certain if it applied to my case or not, I'll just steer clear as what you have suggested with GSAP 3 sounds like it will work perfectly. I'll just bite the bullet and upgrade to 3.0. The reason I have been hesitant is that I use GSAP along with ScrollMagic as well as NPM/ES6 etc and I have been running into issues migrating thanks to ScrollMagic's current lack of support. In fact, I have been running into the exact console error problems mentioned here where you have already been helping. And my mentality at this point is the same of cTigerDev's to finally drop it and use Intersection Observer instead. When I have some free time I will read through that post in detail as well as other posts and see if I can get things working the way I need. If not I'll hassle you in a new thread on here ;) Thanks again for your help. Cheers, Link to comment Share on other sites More sharing options...
OSUblake Posted March 13, 2020 Share Posted March 13, 2020 On 3/11/2020 at 1:39 AM, pmascis said: So 'ease' and 'varNotWorkingReference' are essentially the same thing, based on my other readings within this forum I assume it's because they are strings, but am unsure about a way around it? v2 can't parse config methods in ease strings, so you need to use object form. ease = Elastic[easeType].config(1, 0.3); Other notes. It's wasteful to keep creating the same jQuery object over and over again. Just do it once. let $this = $(this); let duration = $this.data('anim-custom-duration'); let xFrom = $this.data('anim-custom-xfrom'); let xTo = $this.data('anim-custom-xto'); let yFrom = $this.data('anim-custom-yfrom'); let yTo = $this.data('anim-custom-yto'); Or don't use jQuery. let duration = Number(this.dataset.animCustomDuration); let xFrom = Number(this.dataset.animCustomXfrom); let xTo = Number(this.dataset.animCustomXto); let yFrom = Number(this.dataset.animCustomYfrom); let yTo = Number(this.dataset.animCustomYto); You don't need to pass a jQuery object to gsap. And you don't need to set units as px is the default. TweenMax.fromTo(this, duration, {delay: 0.25, autoAlpha: 0, x: xFrom, y: yFrom}, {autoAlpha: 1, ease: ease, x: xTo, y: yTo}); See the Pen 2278497285883a7f09befd0046c728cf by osublake (@osublake) on CodePen 4 1 Link to comment Share on other sites More sharing options...
pmascis Posted March 14, 2020 Author Share Posted March 14, 2020 Hi Blake, That's pretty much solved it and I can keep working, I'll migrate over to GSAP 3 when I have more time later. I have taken on board and implemented your other notes too. Thank you! 2 Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 I have what I think is a similar question. I want to build a tween that looks like this: gsap.to(".heart`${life}`,{opacity:0, duration 1.5, y:-50, delay:4.7}); Depending on what round it is, life will be 4 or 3 or 2 or 1 or 0. How can I do that in a tween? I am having problems incorporating the `${.life}` in the tween. I looked in the documentation, and could not find my answer. If you point me to it, that would be nice Link to comment Share on other sites More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 Hi @Sunflair If you can make a minimal demo showing what you are trying to do, I'm sure we can that sorted out for you. Thanks! Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 I am unsure how to make a demo of something that doesn't work Here is a snippet of my code. Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 oops for the double posting. But, life starts out at 5, then if this option is chosen, it goes to 4. here is the HTML Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 removes this: Link to comment Share on other sites More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 3 minutes ago, Sunflair said: I am unsure how to make a demo of something that doesn't work You just make a very simple demo of what you're trying to do. Most people post broken pens, that's the whole point of providing support. Outside of that, all I can suggest is that your JavaScript isn't valid. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Should be ${} instead of $(). Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 here is where the click event removes the class. That's not the problem. That works. It is the GSAP part that needs to be incremented. Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 I tried it with curly brackets. Smooth was left over from me trying different things. Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 Link to comment Share on other sites More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 Like I said, your JavaScript isn't valid. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Minimal demo showing correct template string usage. Notice the `` instead of "" or ''. See the Pen jOGjBOJ by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 I was in the middle of writing the pen. I just started writing them this morning. I promise up and down I tried the graves in the string, and it didin't work. I notice you wrapped it in a function. None of my other gsap things are in functions and they work. I have not been doing this. I will try this. Thank you. (I will report back in an hour or so to say if it worked) Link to comment Share on other sites More sharing options...
Sunflair Posted January 20, 2022 Share Posted January 20, 2022 It works with the graves. Thank you. I tried that first, but probably had another mistake. I appreciate the time you have taken to help me. I will get better with codepen, because I anticipate lots of questions with GSAP 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now