Jump to content
Search Community

How to change individual values in a stagger

jasonduquain test
Moderator Tag

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

Link to comment
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
Link to comment
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
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...