Exploding text

[MeLight]

I want to reproduce the exploding text effect as seen on the attached codepen. The code is using deprecated methods though, from gsap 2, and I'm getting this error:

 

Please advise on how to rewrite this to work with gsap 3.

 

Thanks

See the Pen KoJOJb by GreenSock (@GreenSock) on CodePen

[MeLight]

NM figured it out with *gasp* docs! I don't know how to delete the post though

[ZachSaucier]

Hey MeLight and welcome!

 

We don't allow users to delete their threads because they are often times useful for other people searching for answers. Why don't you post your solution that you found in the docs so that other people can benefit? 

[MeLight]

So, instead of the old syntax:

let tl = new TimelineMax({repeat:30});

TweenMax.set("#split", {opacity:1}); 

tl.staggerTo(split.chars, 2.5, {opacity: 0, cycle:{
    rotation:function() {
        return range(-2000, 2000);
    }, 
    physics2D:function() {
        return {angle:range(240, 320), velocity:range(300, 600), gravity:800};
    }
}}, 0.015, 3);

 

It now should be:

let tl = new gsap.timeline({repeat:30});

tl.to(split.chars, {
        opacity:0,
        rotation:() => {
            return range(-2000, 2000)
        },
        physics2D: () => {
            return {angle:range(0, 360), velocity:range(120, 150), gravity:800};
        },
        stagger: {
            each:0.3
        }
    });

 

Please note that I didn't copy all the numerical values from the example, as I do not know what some of them mean, rather I played with them getting the effect I wanted. In any case, the new syntax is both shorter and better readable (no magic number without names => 0.015??)

[GreenSock]

Yeah, here's an exact fork that makes use of some of the new features. You don't even need that extra "range()" function anymore: 

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

 

Does that clear things up?