Split text with gsap timeline not getting the effect I want

[Kutomba]

 

Hi

 

I have found this example on codepen:  

See the Pen qBdZGGb?editors=0010 by winterlion (@winterlion) on CodePen

 

Now I need the same effect but with gsap 3 timeline , here is what I have tried so far

HTML

 

<h1 class='texta'>GreenSock Starter Template</h1>

JS

                 var split = new SplitText('.texta');
                 var timeline = gsap.timeline();
                 function random(min, max){
                     return (Math.random() * (max - min)) + min;
                 }
   
                 $(split.chars).each(function(i){
                   timeline.from($(this),{
                       duration: 0.1,
                       opacity: 1,
                       x: random(-500, 500),
                       y: random(-500, 500),
                       z: random(-500, 500),
                       scale: .1,
                     
                   });
                });

 

I am not getting the same effects , as the sample I found on code pen, what do I need to change to get the same effects?

 

Thanks

Kutomba

See the Pen OJNgPav by makumba (@makumba) on CodePen

[PointC]

I answered this question in your other thread 9 days ago.

 

[elegantseagulls]

Hi @Kutomba,

 

Your gsap code is quite a bit different than theirs, so that's why you aren't getting the same effect. What's happening in your code is that you are adding a .from tween to your timeline for each character, which is why each character has to slide in before the next one does. To remedy this, if for some reason you needed to keep the timeline, you could set a relative marker at the end of each tween eg'-=2.48' ).

 

Otherwise, if you wanted to copy the effect in the original pen, the easiest way would be to keep everything the same, and instead of using TweenMax.from just use gsap.from.

 

You should also check out GSAP3's random utility (https://greensock.com/docs/v3/GSAP/UtilityMethods/random()), which is much easier to use than what they/you have setup.

Also, please try not to double post issues.