Jump to content
Search Community

Using Inline Data Values To Tween

OneManLaptop test
Moderator Tag

Go to solution Solved by Diaco,

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

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...