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??)