Jump to content
Search Community

tl.updateTo is not a function on mouseover

rgfx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

Getting a "tl.updateTo is not a function" on mouse over. Trying to make a bounce on the end of the reverse. Has to be something simple.

 

Yes, I know I can make two separate timelines. updateTo is something I plan on using on more complex animation. 


Thanks. 

 

 

See the Pen XRybyW by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

I noticed a few problems:

  1. You're calling updateTo() on a timeline, but there is no such method. It doesn't really make sense on a timeline - it's only a TweenMax method. 
  2. You don't need to nest the target inside of an array, like .to([first]...). It's fine if you do; it's just wasteful. 
  3. You forgot to add an updateTo() to the onmouseenter to get the ease back to Bounce.easeOut (I assume that's the behavior you want). 

Here's a fork that does what I think you wanted: 

See the Pen VbVvVB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

If it were me, though, I'd probably just create a new tween on each over/out animation but maybe there's a reason you need to have it inside a timeline. Totally up to you, of course. 

 

Happy tweening!

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hi,

 

Once again a problem with my lack of javascript understanding rather then GSAP issue am sure. 

 

In previous messages, I was shown how to add Tweenmax tweens inside a timeline so I use updateTo and still use a timeline. Thinking I could just do something like

 

tween1[i] = TweenMax.to(item, 1, { scale: 1.5, ease: Bounce.easeOut });

 

but I get "a Unexpected token [" error. 

 

On mouse event how do I updateTo on tween1 and tween2 for each button? 

 

Also when trying to target tween1 and tween2 using the variable "updateAni" but getting updateAni.updateTo is not a function

 

What am doing wrong? Thanks for your help as always. 

 

See the Pen BZVodV by rgfx (@rgfx) on CodePen

 

 

 

 

Link to comment
Share on other sites

Hello @rgfx!

 

I've forked your pen but did not see any errors. I know this is a somewhat old thread and you were trying to get a bounce to happen on the reverse animation. If that's still the case but now you are trying to do it with several elements, why don't you try the brand-spanking-new yoyoEase method?

 

Check the blog post there's a video introduction to get you started: https://greensock.com/1-20-0

 

It's well documented yet as it's hot out of the oven but it will eventually.

 

Let us know if you hit any snags.

 

:)

  • Like 1
Link to comment
Share on other sites

@DipscomI was going to mention yoyoEase, your telling me it not just for yoyo?

 

Also tween1 and tween2 only update on the first mouse event since it not "in the array" not sure how to word it, but you know what am mean :)

Link to comment
Share on other sites

My codepen is a stripped down version of what am really trying to achieve. But I think it will serve its purpose. I find myself always wanting to update the ease on a reverse.   Sometimes using multiple elements inside a timeline.  

 

Note: tween1 and tween2 are actually tweening two separate elements in the real project am working on.

 

In this case: 3 buttons sample

 

1. MouseEnter - Button Scales Up twice using "ease: Bounce.easeOut"

2. MouseLeave - Button Scale down twice using "ease: Bounce.easeIn"

 

If you notice UpdateTo only works on the first button you touch.

 

Thanks.

 

 

Link to comment
Share on other sites

Alas! My idea to use the yoyo did not quite work as I intended. I'll make another Pen after I have some dinner and wash the dishes to show you what I had in mind. But I don't think it will serve you in any way.

 

As for what you are trying to achieve. Have you consider creating the tweens on the fly? On the mouse enter/leave events? Creating tweens/timelines is quite cheap CPU-wise. You don't really need to have everything pre-calculated... 

 

Wouldn't the bellow work? Even with more complicated sequences, I think it would.

 

See the Pen pwKMmN?editors=0010 by dipscom (@dipscom) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@Dipscom 


If you tell me making tween on buttons is cheap that is good news, I figured it would be better to put things in timelines. However...

 

1. You sped duration on bounce times making the bounce not quite right

2. if you notice the mouseleave is actually not using bounce.easeIn. It should of worked, I might be trippin.  Please look at my pen as reference .

3. I could be off base on this as well, but it seems less smooth than my pen even after I change the duration. 

 

Curious to what you come up with using YoYo.

 

Still trying to up my VanillaJs game/coding game. Wish I could explain myself better. But if I put a timeline into a "for each loop" and make it as an array am I just multiply the amount of timelines waiting for an event? Is this terribly inefficient? I would be all about using separate tweens for each button event but I want to sure from a performance perspective first.  I also like the idea of using less code, even though am still a total newb and probably shouldn't be concerned :)

Link to comment
Share on other sites

This is what I had in mind initially but, you can see it doesn't work unless you wait for the 'mouseenter' animation to complete. Shame.

 

See the Pen yXqybY?editors=0010 by dipscom (@dipscom) on CodePen

 

Now back to your question:

 

Yes, making timelines and tweens are relatively cheap. Pay attention on the word relatively because we can always make something better, worse. ;)

 

I have amended my pen to have the same parameter as yours. Now the duration is the same and I don't see any difference when comparing 'smoothness'. You confused me with your Point 2 (no, not @PointC... He's swamped with work at the moment and can't be around), you were calling it Bounce.easeIn - I did have it on easeIn but because I am not reversing the tween, I am creating a new one, both tweens are to have Bounce.easeOut in order to achieve the effect you are after.

 

Less code is always better code. It means less surface of failure. Less potential bugs. Just make sure it is readable, otherwise it's pointless.

 

I think I get what you are referring to when you ask about putting timelines in a array.

 

First, the elements who are waiting for the events are the elements you attach and event to. Not the timelines. Makes no difference if you have 100 timelines or 100,000 timelines if you are only adding one event to one button.

 

What you don't want to do is hold in memory stuff that you are not using. For example, timelines that are not playing or not going to be played in reverse or used somewhere else for some reason. If your animation only plays once and it's fairly simple, don't store it in a variable or an array. Create it on the fly, let it play and let it be handled by the garbage collector.

 

I'd say, rollover effects will usually fall in the category that you just create on the fly when needed. Because, what if the user doesn't roll over that one button? You've initialised it for nothing. I mean, at the end of the day, one button is splitting hairs here but, you get my drift. There could be occasions that would benefit, performance-wise, if you don't instantiate a tween/timeline.

 

 

  • Like 4
Link to comment
Share on other sites

@Dipscom

 

Now that you changed up the pen I don't see any change in "smoothness" either.

 

Bummer about your yoyoEase experiment, I still learned a lot from it.  Had me look up why/when to use Const, and how you laid out that function loop that uses setAttriute and splice, pretty cool. 

 

Thanks for taking the time to explaining things to me :) Truely appreciated 

 

 

  • Like 1
Link to comment
Share on other sites

@Dipscom

 

Spent many of hours trying to get my head around  "foreach" function you made.  Having trouble animating elements inside the parent. 

 

Think I'll stop punishing myself. My brain is starting to hurt. 

 

I like how you kept everything in a separate function, it just seems so right.  Also trying to ween myself off the dependence of Jquery. 

 

Anyho, trying animate the element with the class "inside".  Inside the "outside" element. I got it working by creating a variable inside each button function. But I think its better idea just using the "foreach" to "index?" the element then pass it to buttons somehow. My project file has me animating two elements so I cant use .childern or anything.  Need to target a specific class. 

 

See the Pen owPjmL by rgfx (@rgfx) on CodePen

 

If you could be so kind to help a designer turned wannabe programmer out. 


Thanks

 

 

 

 

 

 

 

 

Link to comment
Share on other sites

Heya @rgfx

 

It's a pleasure to help. :)

 

And now I have you owing me one. So, I know who to ask when I need a new design for my site. :D

 

The trick to accomplish what you are after is making use of GSAP's element selector. More info in the docs. You've seen how we can add an ID to an element dynamically so we can refer to it later via code. Then, you target the element as if you were using querySelector.

 

See the fork of your pen. I think that is what you were trying to achieve. 

 

See the Pen VWGgWE?editors=0010 by dipscom (@dipscom) on CodePen

 

Oh, and if you're trying to find solutions where you don't use jQuery, hit me up. I never actually really used it so, I never use it nowadays.

 

Happy Tweening!

 

  • Like 2
Link to comment
Share on other sites

@Dipscom

 

If you ever need my help with something design related I don't mind helping you one bit, even though your joking, am serious. My specialties are branding and UX.

 

The buttons you just helped me with get me one step closer to finishing my portfolio site.  I would like to get you opinion on it when am done. 

 

You're missing a semicolon on the first global var, meaning you I bet you didn't even press run once, and it almost worked! I find myself hitting run after everything I type :)

 

I was thinking that each button somehow didn't need to target the same child. That it could be created in the for each loop somehow and be passed to the buttons through the function parameter, totally hung me up. IF that's the way you do it, then so be it. 


Thanks pal. 

 

 

  • Like 2
Link to comment
Share on other sites

OPs... There was a cheeky comma there. Fixed now.

 

I do test it a million times as I go along, just like you and everyone else. It was a mistake when I was cleaning up the code after I finished writing it all up. Remember you were doing a second querySelector for the '.inside'?

 

Happy to help. Helping others help me improve my own knowledge. I've become so much more confident after starting answering questions here, you wouldn't believe. I'd recommend it to everyone.

 

Happy to have a look at your portfolio. I hope one day to have one. ;) Been saying that for about three years now.

 

Not sure about your last comment. What is happening in the code is the following:

Quote

When the code is executed all the elements with a class of 'outside' are put into an htmlCollection, then, forEach of these elements we give it an unique id and attach two mouse event listeners: 'mouseenter', 'mouseleave'. End.

 

The page then sits there until one of those mouse events are fired. That triggers the function that was attached to the method. This function receives the mouse event 'e' as a parameter. We extract the information we need to build the query we're using to target the relevant button with the Tween.

 

So, it is like what you said, we create the function in the forEach loop then we pass the button into the function as a parameter.

 

We have to make each button uniquely identifiable and we have to make sure we limit the class being target to be only the child of the button we're targeting. Otherwise, when you hover over any of the buttons, you're triggering the tween in all elements with the same class.

 

 

  • Like 4
Link to comment
Share on other sites

Ah yes, makes sense.   Thanks for another great explanation :) 

 

Teaching certainly is a great way to learn, and good karma boost as well.

 

 I'd like to think all my off the wall questions contribute in a way. I hope to join the ranks someday. 

 

  • Like 3
Link to comment
Share on other sites

18 hours ago, rgfx said:

You're missing a semicolon...

 

Semicolons are actually completely optional in JavaScript except after a return statement. :blink:

 

Just a couple things to point out in your code for compatibility. I wouldn't use "const" unless you're using Babel or TypeScipt to transpile your code. It won't work in older browsers. And using forEach on a list of elements (NodeList) won't work in all browsers. You need to convert the list to an actual array. This will convert a node list to an array in all modern browsers.

var outside = Array.prototype.slice.call(document.querySelectorAll('.outside'), 0);

 

I'm using Babel in this fork. If you click the drop-down arrow on the top right hand side of the JavaScript editor, and click View Compiled JS, notice how it changes all the "const" declarations to "var".

 

See the Pen ZyqBae?editors=0010 by osublake (@osublake) on CodePen

 

 

 

  • Like 1
Link to comment
Share on other sites

Hi @rgfx

 

If you're trying to improve your coding skills, I wouldn't worry too much about using Babel and ES6/ES2015 - the newest version of JavaScript. At least not to start with. Most ES6 features are just shorthand ways of writing code (syntactic sugar). It's probably better to understand how the underlying code works first.

 

Learning how to write code without jQuery might be a good place to start...

http://youmightnotneedjquery.com/

 

A lot of jQuery methods have an equivalent array method, like forEach, map, and filter.

 

Build tools like Gulp and Webpack, are really nice as they can automate a lot of tedious work, and have live dev servers that automatically refresh when you make changes, but they also require some investment to learn. Webpack is the most popular right, but I find brunch.io to be easier to use and setup for beginners.

 

If you just want a live dev server, you can run browser-sync from the command line. That's what I do for really simple stuff.

https://www.browsersync.io/

 

  • Like 1
Link to comment
Share on other sites

@OSUblake

 

That's what I thought, back to the basics. 

 

Been using Gulp and Browser-sync for a long time. I was kinda wondering if you use Webpack as I haven't made the switch yet.

 

Would have loved brunch.io back in the day, I spent what seemed like weeks getting all my automation set. Brunch, unfortunately, doesn't have an equivalent to svg-store(svg sprite sheets and optimization) or Notify (notification if you broke something).

 

I love optimization tools. Sometimes I wonder if am actually saving time or just being a nerd :geek:

 

 

  • Like 1
Link to comment
Share on other sites

4 hours ago, rgfx said:

I love optimization tools. Sometimes I wonder if am actually saving time or just being a nerd :geek:

 

Haha! What started out as nerdy is pretty much part of the normal dev process now. Almost like a necessary evil. In the long run it can save you some time, but it can be rather annoying how quickly the tools change. As soon as I learned Grunt, Gulp replaced it. And when learned Gulp, Webpack replaced it. And now there are some new tools gaining traction like Rollup and Fusebox.  :x

 

Brunch is probably the oldest build tool, dating back to like 2012. I think it's the easiest to work with, but now I'm starting to wonder about its future as it seems like development has slowed down a lot over the past year. If interested, it can do all your Gulp stuff. There are notifications and plugins for SVG, like this one that does sprite sheets and SVG optimization.

 

Webpack is really nice, but it can also be really confusing to start with. I got started with it by making demos at webpackbin.com, and then downloading the config files. Simple demo using GSAP...

https://www.webpackbin.com/bins/-Ko_Ilj2Y1RZn2owtgNE

 

  • Like 2
Link to comment
Share on other sites

12 hours ago, OSUblake said:

Semicolons are actually completely optional in JavaScript except after a return statement. :blink:

 

It was a trailing comma at the end of a variable declaration. 

 

12 hours ago, OSUblake said:

e things to point out in your code for compatibility. I wouldn't use "const" unless you're using Babel or TypeScipt to transpile your code. It won't work in older browsers. And using forEach on a list of elements (NodeList) won't work in all browsers. You need to convert the list to an actual array. This will convert a node list to an array in all modern browsers.

 

Yep, my bad. I should have mentioned this. I am in the middle of a project using Babel to transpile ES6 into Vanilla. I just wrote the stuff and didn't test it in anything other than an up to date Chrome browser so... Ops...

 

And alternative to converting the NodeList is to run the login inside a for loop. It will also work.

 

for(var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mouseenter', onMouseEnter, false);
  elements[i].addEventListener('mouseleave', onMouseLeave, false);
});

 

Lastly, if I ever say anything and @OSUblake contradicts me, the safe bet is to listen to him.

 

  • Like 2
Link to comment
Share on other sites

@OSUblake

 

Using Webpackbin is a great way to get started, thanks for that. I read an article the other day about using straight NPM makes sense. However, that's too much for me at the moment.

 

@Dipscom

 

Haha,  that's why I liked the look of code so much, all that syntactic suger! :) I didn't even realize you were using es6, Blake was too late Syntactic Diabetes set in and now I have to use Babel for the rest of my life :) 

 

 

  • Like 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.
×
×
  • Create New...