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.