Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Will Chase

.play() not activating TweenMax.staggerFrom

Recommended Posts

Hi all, I'm new to GSAP (and to JS), so forgive me if I'm just making a stupid mistake. 


I'm using the GSAP advanced staggers to animate a waffle chart grid (https://codepen.io/will-r-chase/pen/arGoxw). I've got the tween set up using TweenMax.staggerFrom, but then I can't seem to get any of the methods like .isActive(), .play(), .reverse(), etc. to work. I've set up a little button to activate them but nothing happens. Searched and tested stuff for hours but I can't seem to figure out what I'm doing wrong. 



Share this post

Link to post
Share on other sites

Welcome the forums (and GSAP)! 


The problem is just that TweenMax.staggerFrom() returns an ARRAY of tweens....and you're trying to call play() on an array instead of on an animation instance. If your goal is to control a group of tweens, you should definitely be using a TimelineLite or TimelineMax. Those have their own staggerFrom() method that does exactly the same thing as TweenMax.staggerFrom(), but puts all the resulting tweens into a timeline wrapper that you can then control very easily. Here's a forked demo: 

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


I'd also strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/


Happy tweening!

  • Like 1

Share this post

Link to post
Share on other sites

Ah this makes a lot of sense and I will check out the article, thanks very much!


  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.