Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
francis789

Multiple timeline event calls but only one action

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

Hi,

 

In the codepen I make multiple calls to rotation of the cog, but it only actually rotates once. I see the multiple rotations in the console.

console.log("rotation ******")
tl.to("#cog", 3, {rotation:360, transformOrigin:"50% 50%"})

(I tried variants such as adding "+=0" at the end of the call)

 

I successfully got movements of dots in and out of the rectangle.

But I had to slip in fictitious calls between two calls to the animLine function

tl2.to("#toto", 1, { x: 1000 }); 

 

 Does the drawSvg plugin have specific requirements as to timeline calls? Or is my understanding of timelines lacking?

See the Pen ZROagR by fvila (@fvila) on CodePen

Link to comment
Share on other sites

I didn't quite understand your question - are you saying that the rotation tween is only working once? If so, it looks like you're animating the value to 360 over and over again, right? So the first time it goes from 0 to 360, and then all the rest would go from there (360) to 360, meaning no tweening is necessary. Perhaps you wanted to keep adding 360? So it'd go 360, 720, etc.? If so, then just change rotation:360 to rotation:"+=360". Does that help? 

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

The cog works! great, thanks so much.

Actually I was asking 2 questions in the same post. I've done a second codepen for the second question. I have a function that I call several times in the same timeline. All the calls run at the same time, instead of behaving like tweens and running one after the other. The only way I found to get them to behave like tweens was to add a fictitious tween between each call.

tl2.call(animLine, ["i1", (duration = 1), (repeats = 0), (repeatDelay = 3)]);
// tl2.to("#toto", 1, { x: 1000 }); // ******* fictitious timeline call
tl2.call(animLine, ["i4", (duration = 1), (repeats = 0), (repeatDelay = 5)]);

In the codepen below, I commented out the fictitious tweens so that you can see the problem. I don't want all the dots to appear simultaneously like soldiers; I want them to look like they are asynchronously each doing their own thing.

 

See the Pen ZROmVr by fvila (@fvila) on CodePen

 

Link to comment
Share on other sites

Yup, functions don't take up any time in your timeline so if you insert them all at the same time, they will all fire at that time.

You  can use the position parameter to offset the placement of each call() 

 

https://greensock.com/position-parameter

 

https://greensock.com/docs/TimelineMax/call()


here is a very basic example of a function being called every second

 

var tl = new TimelineLite()

tl.call(myFunction, [])
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")



function myFunction() {
  console.log(tl.time())
}

 

view demo with console open

 

See the Pen oyLmWw?editors=0011 by GreenSock (@GreenSock) on CodePen

 

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

Thanks @Carl, speedy response as usual!

What I was missing was the this scope parameter

tl.call(myFunction, [], this, "+=1")

 

I dutifully read and watched the links you posted and I admit I don't really understand what exact role the scope has. The explanation is 'what “this” refers to in the function' which in this case seems a bit like an infinite loop (Stack overflow!).

Anyway it works now...

See the Pen pKbYgb by fvila (@fvila) on CodePen

 

  • Like 1
Link to comment
Share on other sites

I'm not the right person to explain this. But this can mean different things depending on where it is used.

The example below shows calling the same function but setting different values for the scope aka "what this refers to"

var age = 10;
var bob = {age:20};

var tl = new TimelineLite()

tl.call(myFunction, [], this) // when scope is this age is 10
tl.call(myFunction, [], bob, "+=1") // when scope is bob age is 20


function myFunction() {
  console.log(this);
  console.log(this.age);
}

 

 

will generate this log

 

AGwMGV

 

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

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Makes sense. It opens a whole new set of possibilities.

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.
×