Jump to content
GreenSock

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

.set() for a custom attribute is not working

Recommended Posts

I am trying to .set a custom attribute ("fan") but to no prevail. What am I doing wrong please ?

See the Pen aPPWzg by tagtag (@tagtag) on CodePen

Link to comment
Share on other sites

Hi @tagger

try this:

 

var midi_tl;

function ff()
{
  document.getElementById("__midi").setAttribute("fan","1");
  midi_tl = new TimelineMax({paused: "true"});
  midi_tl.set(document.getElementById("__midi"),{fan:"1",width:100})
  midi_tl.play();
  console.log(document.getElementById("__midi").getAttribute("fan"))
}

 

Link to comment
Share on other sites

Thanks @Noturnoo, but i want the attribute change as a part of the timeline, since i will want to reverse it and expect the last thing to happen is this attribute to return to the original value.

 

@Carl - exactly what I was looking for ! A couple of questions, if I may 

1. Do you know where I can learn about the architecture of GSAP - things like which functions are blocking-which are non-blocking; are there threads created for tweens; 

2. How did you calculate the 200msec delay before reading the attribute back ? Is this value deterministic ? Will it be affected if I have many tweens on the page ? Do I still have to wait if after the .set() I have a pretty long .staggerTo() on the timeline ?

 

I know those are a lot of questions. If you can just point me to the document where I can learn all that - it will be great !

 

thanks in advance 

Link to comment
Share on other sites

The best thing to do is read as much as the documentation as possible I think you'll be surprised at the level of detail that is put into the explanations.

However, the primary focus of the docs is on how to use the API. Discussing the overall design and decision-making process that went into the API is probably better suited for an article some day. FWIW there is an extremely detailed article discussing how GSAP uniquely handles animating transform values  that will be launched in the not-so-distant future.

 

Also, go through the blog posts, even ones a few years old. https://greensock.com/blog/ Lots of important info in those.

 

---

 

 

I just guessed for the 0.2 second delay. A set() has 0 duration so in order to read the value that was set, it's best to wait for the next tick of the engine (which runs at 60fps) to be able to read it. I could have put a call() in the timeline also at a non-zero time as well. 

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