Jump to content
GreenSock

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

How to change individual values in a stagger

Recommended Posts

Hello,

 

Based on Carl's  youtube video titled 'GSAP3 Advanced Staggers with Ease-based Distribution of Start Times',  I have created a pen using splitText similar to his examples. But I am trying to animate two of the characters differently then the rest. In the text 'BEFORE FACES', I want the 'R' and the 'E' in the word 'BEFORE' to tween differently then the rest. So all the characters will go from an opacity of 0 and a 'y' of -150. But the characters 'R' and 'E' will have different x values at the start.

 

From the video I see you can use the 'from' stagger property with values such as 'center', 'edges', etc and this is really nice. But I am wondering what is the best practice if a few of the characters need something different then the rest?  In my pen I spliced out the 'R' and the 'E' characters and tweened those first then did my stagger for the remaining characters. I also looked into something similar just using forEach and no staggers but its the same concept. 

 

Is there a better way? This works but I am not sure if it is the best way to go.

 

Plus by splicing those 2 values out of the array I am not sure why those 2 values are even animating correctly since they are not part of the array. If you look at the commented out console.log: 'console.log(div.chars5);' it returns an error: 'div is not defined'. But in the tweens I am clearly using div.chars5. I am guessing it has something to do with the split variable containing the entire array pre-splice..but then I would expect a double animation of the 'R' and 'E' characters if so. If someone can explain that I would appreciate it. 

 

Please let me know if you have any questions at all. Thanks in advance for any help.

 

 

See the Pen zYxoRKv by JasonDuquain (@JasonDuquain) on CodePen

Share this post


Link to post
Share on other sites

Hey Jason. Welcome and thanks for being a Shockingly Green member! We couldn't do what we do without people like you.

 

22 minutes ago, jasonduquain said:

In my pen I spliced out the 'R' and the 'E' characters and tweened those first then did my stagger for the remaining characters.

That's exactly what I recommend :) 

 

22 minutes ago, jasonduquain said:

I am not sure why those 2 values are even animating correctly since they are not part of the array.

The targets for your R and E tweens are selector strings. So under the hood GSAP uses document.querySelectorAll on the selector string you give it (like 'div.chars5' and animates all the elements that it finds (in this case just one letter each). In other words, it's completely separate from the array that you're using to animate the other characters.

 

One note about your formatting: technically duration should go in the toVars of your fromTos. That's where all special properties should go in a fromTo.  However, since you're using a duration of 0.5 and that is the default in GSAP, it's working as you expect. You could remove the duration declaration completely in that case.

 

I'm glad you're using Carl's intro course! I hope it's been helpful for you. 

  • Like 1

Share this post


Link to post
Share on other sites

Thank you for the quick reply and the help!

 

That really helps me understand they the R and the E values animate correctly as opposed to not at all or a double animation. And thanks for pointing out the position of the duration value.

 

Yes Carl's course is really helpful for me. I am always glad when there is an update to the course to help me further my gsap knowledge.

  • Like 2

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×