Convert Cycle stagger to Wrap method...

[ninmorfeo]

 

I am trying to convert a project made with gsap 2 to gsap 3. As expected I have some difficulties that I hope I will slowly get over. I am trying to convert the old cycle method with the new wrap, but without success. Could you tell me how to correct this code?

 

//old method    
// function init_x_pos() {
        //     let valore = [100];
        //
        //     let new_x =  valore[0];
        //     for (i = 0; i < n_carte_totali; i++) {
        //         // new_x += 25        
        //         valore.push(new_x)
        //     }
        //
        //     return valore;
        // }  	

let valore = gsap.utils.wrap([0,100,200,300]); //new method with static value for now
  
	let a_c_i = gsap.timeline();

        a_c_i.fromTo(chi, {
            stagger : {
                each: 0.5,
            },
             //     cycle: {//old method
        	//         x: init_x_pos()
        	//     },
            modifiers: {                
                x: x => valore()
            },
            y: 250,
            rotationX: 10,
            rotationY: 0,
            rotationZ: 0,
            scale: 1,
            opacity: 0,
            boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
            ease: Elastic.easeOut.config(1.1, 0.6)
        }, {
            duration:0.5,
            stagger : {
                each: 0.5,
            },
           //     cycle: {//old method
        	//         x: init_x_pos()
        	//     },
            modifiers: {
                x: x => valore()
            },
            y: 30,
            rotationX: 10,
            rotationY: 0,
            rotationZ: 0,
            scale: 0.7,
            boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
            opacity: 1,
            ease: Elastic.easeOut.config(1.1, 0.6)
        })

 

I would like each x stagger to change according to the values shown in the wrap array.

[GreenSock]

You don't need to use modifiers at all. And there's no reason to put identical values in BOTH the "from" and "to" parts of the tween. If you want things to start at those values (and not animate), just put them in the "from" part. And the ease and stagger only belong in the "to" part of the tween. You can simplify the Elastic ease too with the string-based value: 

let valore = [100],
    new_x =  valore[0],
    a_c_i = gsap.timeline();
for (let i = 0; i < n_carte_totali; i++) {
    new_x += 25;
    valore.push(new_x);
}

a_c_i.fromTo(chi, {
	y: 250,
	// cycle: { //old method
	//     x: init_x_pos()
	// },
	x: gsap.utils.wrap(valore),
	rotationX: 10,
	rotationY: 0,
	rotation: 0,
	scale: 1,
	opacity: 0,
	boxShadow: '-20px 20px 15px 0px rgba(0,0,0,0.1)',
}, {
	duration:0.5,
	stagger: 0.5,
	y: 30,
	scale: 0.7,
	opacity: 1,
	ease: 'elastic(1.1, 0.6)'
});

Does that help? 

[ninmorfeo]

Perfect...

it's much simpler than I thought

thanks a lot !

[GreenSock]

Yeah, hopefully you'll find that GSAP 3 makes pretty much everything simpler/easier. 

 

Enjoy!