Using Inline Data Values To Tween

[OneManLaptop]

Hey, GSAP forum. Over the past few months I've been having a blast getting to grips with GSAP, as I've transitioned my entire workflow from CSS3 to GSAP. It's had its challenges, but nobody could say this site doesn't provide enough resources to get up to speed with the library, so thanks to everyone on the team for all the great work that's done here.

 

So my problem likely betrays a gap in my general javascript knowledge as much as anything else, but it is however intricately linked to something I want to do with GSAP.

Basically I want to tween a group of elements to the value contained in their relevant data- attributes.

I've put together a simple code pen to show what I'm after as you can see in the foot of this post.

 

So it should be pretty self explanatory. I click the start button and the tweens should grow to the percentage value contained in data-width and the pixel value of data-height. I've been able to set tweens with fixed variables in the past, but this goes beyond me right now.

Thanks for any and all assistance.

See the Pen XbXBwj by anon (@anon) on CodePen.

[Diaco]

Hi OneManLaptop 

 

pls try this :

 

loadKunst = new TimelineMax();

$('#sub-nav-links>li').each(function(index){
   loadKunst.to($(this) ,.7, { width : $(this).data("width")+'%' , height:$(this).data("height") } , index*0.5 )
});

[OneManLaptop]

That works a treat, thanks a lot.

[Carl]

Hey OneMapLaptop,

 

Welcome to our forums.

Thanks for sharing your experience transitioning to GSAP and for the kind words. Great to hear.

 

Glad to see Diaco served up a perfect solution (he tends to do that quite often).

Let us know if you have any more questions.

 

Happy Tweening!

[OneManLaptop]

Thanks Carl, I'm sure I'll have a few more questions in the months to come. My first fully GSAP powered website is coming on a treat, I've been so inspired by the examples of sites already posted.

 

Edit: Just a quick FYI, every time I hit reply the forum spits out a few hundred lines of this:

Warning: Illegal string offset 'post' in /home/greensoc/public_html/forums/hooks/StopSpamAjax_435022f28bbe04c34c3a760af68881c7.php on line

 

I am running Ghostery, so maybe that's the reason?

[Carl]

Not sure what that warning is about, we'll look into it.

 

Can you try disabling Ghostery temporarily to see if if fixes things? It would definitely help us troubleshoot. Thanks!

[OneManLaptop]

Same result with the site white listed.

[OneManLaptop]

Test post with extensions disabled

[OneManLaptop]

Test post with a full restart of Safari and Extensions disabled.

[OneManLaptop]

Test post with Safari restarted and extensions re-enabled

[OneManLaptop]

Okay, it seems after I restarted Safari, the bug went away with extensions enabled or disabled. Strange, but just for reference I was using the latest build of Safari on an iMac. Please feel free to delete anything not pertaining to the original question.

[Carl]

Thanks for all the tests. Very helpful. I suspect its possible that you may have had an old script of ours cached.

We will keep an eye out for any more problems, please let us know if it happens again.

[OneManLaptop]

No problem.

Just as a quick follow up to the original question, I'm trying to add a callback to the timeline, but it's (of course) being called every time the timeline runs. I actually just need it to perform the callback once, after all the tweens have finished. Is that possible?

[Carl]

hmm, using an onComplete callback will fire a function when the timeline completes, which to me is the same as "after all the tweens have finished".

 

loadKunst = new TimelineMax({

    paused: true,

    onComplete:function() {

    alert("done")

  }

  });

 

Does that not behave as expected?

[OneManLaptop]

Oh man, my fault, I was calling the function from the onComplete of a staggerTo, hence why things were going a little nuts my end. It's the end of a loooong ass day.   Thanks again for all the help from both yourself and the mighty Diaco.AW.

[Carl]

No problem! it happens to us all

 

BTW here is a neat demo to show how to use a staggerTo()'s completeAll param (incase you don't want to use the timeline's onComplete)

 

http://codepen.io/GreenSock/pen/bzopa