Jump to content
GreenSock

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

Using Inline Data Values To Tween

Go to solution Solved by Diaco,

Recommended Posts

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

  • Like 1
Link to post
Share on other sites

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 )
});
  • Like 3
Link to post
Share on other sites

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!

Link to post
Share on other sites

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?

Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Link to post
Share on other sites

Test post with Safari restarted and extensions re-enabled

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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?

Link to post
Share on other sites

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?
  • Like 1
Link to post
Share on other sites

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. :)

  • Like 1
Link to post
Share on other sites

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

  • Like 3
Link to post
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.

×