Having trouble using clearProps with repeat

[rgfx]

Doing some weekend GSAP exercises. Shouldn't clearProps reset rotation information allowing my rotation be random on each repeat? Curious to what am doing wrong. 

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

[PointC]

Looks like @Dipscom is getting ready to drop some knowledge here, but I'll jump in quickly. If you're going to change the tween value on each repeat, I'd recommend creating it in a function and call it again upon complete rather than creating multiple infinite timelines and trying to clearProps . Something like this:

 

See the Pen xrexqg by PointC (@PointC) on CodePen

You can also take advantage of function based values for your rotation. Here's some more info about that:

https://greensock.com/1-19-0/

 

Hopefully that helps. Happy tweening.

[Dipscom]

Hi @rgfx!

 

We meet again!

 

GSAP will initiate and make all the calculations for your Tween/Timeline, will store it and re-use them whenever it is called to play() or repeat(). So, it doesn't matter if you are using a function to generate a random number because it will only be called once - at the initialisation of the Tween/Timeline.

 

In order to have a Tween/Timeline give you random movement onRepeat, you need to make a new Tween/Timeline every time you need a new random value. You wouldn't even need clearProps if you are using the yoyo property as you will always end up back at the start, no need to reset anything.

 

Well, that what @PointC has said, basically... That cheeky sneaky opportunist...

 

Let it be known that @PointC has stolen this answer under my nose, while I had it claimed. Any likes given to him should be nullified!

 

You sir, @PointC, I shall get you after school... 

[PointC]

@Dipscom - the rules don't apply while @Carl is on vacation. It's basically Thunderdome while he's gone. 

 

You can whoop me and take my lunch money after school.

[rgfx]

LOL, @PointC @Dipscom

 

Thanks so much, you wouldn't believe how many things I tried and how many forum posts I read before I asked for help. I probably can never find anything because my problems are so obvious to someone that knows what they are doing.  

 

Thanks to you guys am slowing inching my way forward  I could probably could learn a lot making a Todo list like everyone else, but where is the fun that  

[Dipscom]

@PointC

 

@rgfx It is in my to-do list to make a to-do list to try and learn something making it. Let me know if you know of any good tutorial.

[rgfx]

@Dipscom

 

I don't think you would have much to gain working on Todo app.

 

But if you're serious... https://watchandcode.com/ Maybe you can skip the last chapters and pick something up.  

 

I like that he kinda knocks people that depend on frameworks. Teaches you the fundamentals so you can learn how frameworks work rather than become dependant on them. Slowing making my way through, 50% done.

 

Rather experiment with GSAP as am easily amused by objects moving across the screen. 

 

 

[Dipscom]

Shame on you @GreenSock, of all people here... You encouraging such behaviour.

 

[OSUblake]

On 7/15/2017 at 8:05 PM, rgfx said:

I like that he kinda knocks people that depend on frameworks.

 

Only n00bs use frameworks. I code everything in machine code, using only 1s and 0s.

 

 

 

Not really. I use frameworks all the time, and have been called an Angular fanboy numerous times.

 

Todo lists are good for learning business logic, but if you really want to learn programming, I would recommend learning how to make games. That's pretty much the highest form of interactivity and animation.

[rgfx]

@OSUblake

 

Haha, That came our wrong, felt like I just got CNN'ed  In my following sentence, I tried to say.  Its good to know how the frameworks work, so when something breaks... or you need to do something new you can.  At any rate, I'm the last one that can make any opinions on anything programming related, so shame on me  

 

Read that people are beginning to play around with Assembly, as it faster, pretty hardcore. Will WebAssembly overtake JavaScript in Web Development?

 

I started learning VUE decided to go back to fundamentals first. I never thought about learning how to make games. Great idea.  Started messing around with UE4 just for arch-viz, industrial design and VR. Made some simple buttons for changing materials. It's all written in C++. I kinda like it.

 

I'm really into interactivity, but I want to stick to web. Perhaps I should start learning some Canvas?

 

 

[OSUblake]

WebAssembly!?! I hope there is an easy button to convert JavaScript into it, because that sounds super complicated.

 

Game design is good just for learning as it can cover everything, ranging from AI to particle animations. Check out this game. It uses ES6, SVG, and GSAP.

See the Pen yVLOyO?editors=0010 by gregh (@gregh) on CodePen

 

Learning canvas is good too. That will give you the fundamentals into how 2d graphics work on a computer. It's also handy when you need a boost in performance. Here's a good thread that shows some techniques for using canvas with GSAP.

 

[rgfx]

@OSUblake

 

I actually bookmarked that canvas thread some time ago. There is some great information there, thank you for that.  Looking -> forward to <-reverse engineering all of it

[Dipscom]

WebAssembly will not take over the web. It will not 'overtake javascript'. It is meant to solve a different problem. It will be a complementary language to be used alongside, like WebGL.

 

I personally think someone will end up creating a framework so that one can write in JavaScript and be compiled into WebAssembly. I'd put a bet on that.

 

Just look around and see how many people write raw WebGL and how many use a framework to do so... There you go @rgfx, you now know why there's so many frameworks out there. Because some people are lazy, most people want ease-to-use tools and a tiny minority are OCD geniuses who can write those frameworks.

[OSUblake]

On 7/18/2017 at 5:15 AM, Dipscom said:

WebAssembly will not take over the web. It will not 'overtake javascript'. It is meant to solve a different problem. It will be a complementary language to be used alongside, like WebGL.

 

I watched the video, and get it now. The title is a little misleading. Web assembly isn't a language you would necessarily code in. It compiles your code down into a lower language that can run as fast as native code (C, C++). Basically, another build step. 

 

So in that sense it could replace JavaScript. You code in JavaScript, but what runs in the browser is a different language.

[Dipscom]

It's gone totally off-topic now but I do want to get my hands (fingers?) dirty with it.

 

But wait... I have to master ThreeJS, React, WebPack, SVG, GSAP, PIXI.js, PaperJS, ServiceWorkers, IndexDB, VUE, first.

 

And answer enough questions in a cool manner here to I can stay in the leaderboard.... Oh my. Better drop my job, claim benefits to eat if I am to have the time for all of this.

[PointC]

5 hours ago, Dipscom said:

Better drop my job, claim benefits to eat if I am to have the time for all of this.

 

You haven't quit your job yet? There's the problem. You need to do that and stop sleeping too. Set up two screens with one always open to the GreenSock forum and the other for all your tutorials and training. Only then will you achieve Blake levels of skill. 

[GreenSock]

Excellent career advice, @PointC. I concur.

[sauldraws]

On 7/15/2017 at 5:49 PM, Dipscom said:

Quote

In order to have a Tween/Timeline give you random movement onRepeat, you need to make a new Tween/Timeline every time you need a new random value. You wouldn't even need clearProps if you are using the yoyo property as you will always end up back at the start, no need to reset anything.

 

 

Okay this makes sense to me the function calls itself, and each time it creates a new timeline instance, but doesn't that timeline reference only exists  within that function?, suppose we wanted to be able to stop/pause/reverse it via some external event?

[Dipscom]

Hello @sauldraws!

 

Not totally sure which function you are referring when you say it is calling itself... 

 

As for your question, yes the reference for that timeline will exist within the function unless you are returning the timeline at the end of the function. If you do (return the timeline) you will have the reference to said timeline assigned to whoever has called the function.

 

Example:

 

function gimmeSome(element, dur) {
  var tl = new TimelineLite()
  
  tl.to(element, dur, {x:100})
  
  return tl;
}

var myTl = gimmeSome('#box', 3) // You'll get a 3-second timeline

// You  can control it whichever way you would as myTl is a timeline

// Then, if you want, you can override it

myTl = gimmeSome('#box', 1) // Now the timeline is only 1 second long. The 3 second one has left us, gone to timeline heaven.

 

[sauldraws]

thanks!! excellent explanation