[Grouping Tweens in Timeline]

Hi @PointC,

 

Thank you for this detailed explanation. It's crystal clear. You have saved me 53 lines of codes  Much appreciated.

 

~

Nathan.

[Grouping Tweens in Timeline]

Hi Jack,

 

Apologies for not being clear. Since using the GSAP with ScrollMagic we are depending on the animation on the scroll, right? So what is the point of using duration ( in second )? I have noticed that when I change the duration, the animation also changes but I couldn't figure out the pattern and the reason.

 

~

Nathan.

[Grouping Tweens in Timeline]

Thanks to the amazing documentation of GreenSock, I have found the solution. I just add a position parameter at the and of each tween. At the end: 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
	perspectiveTimeline = new TimelineMax();

	perspectiveTimeline
		.to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut }, 0 )
		.from( '#as-perspective-bg--mountain--02', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 0 )
		.to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: 0, scaleY: 0, scaleX: 0, x: '-40vw', y: '-70vh', ease: Power4.easeOut }, 1 )
		.to( '#as-perspective-bg--mountain--02', 4, { width: '180vw', scaleY: .6, scaleX: .6, x: '-40vw', y: '-28vw', ease: Power4.easeOut }, 1 )
		.from( '#as-perspective-bg--desert', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 1 );

 

But I do have another question, it may sound stupid. While using ScrollMagic is there point to add a second to the tween?

[Grouping Tweens in Timeline]

Greetings,

 

I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code:

 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
	perspectiveTimeline = new TimelineMax();

	perspectiveTimeline
		.to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } )
		.from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } )
		.to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } )
		.to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } )
		.from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } );

 

Thanks much.