[Add the same timeline to multiple other timelines]

I think I've identified the problem, after implementing indicators and offsets as suggested above.

 

Also, as @PointC mentioned:

Quote

Because you also have that contentsAnimation() timeline nested in your contentsBottom_tl timeline on line 16. The contentsBottom_tl  timeline is not in any ScrollMagic scenes so it fires on page load.

 

So, in my code locally, I included contentsBottom_tl in a ScrollMagic scene.

 

The actual problem seems to be that when I call contentsAnimation() in more than one timeline, it fires contentsAnimation() automatically on page load in all Magic Scroll scenes.

 

This code causes contentsAnimation() to fire automatically on all parts of the page:

function contentsAnimation(){
	return new TimelineLite()
		.fromTo([".contents__label", ".contents__label--green"], .4, {opacity:0, y:'+=25'}, {opacity:1, y:0})
		.staggerFromTo("li.contents__chapter", 0.5, {opacity:0, x: '-=15'}, {opacity:1, x: 0}, 0.15, '-=.5');
}

var contentsHome_tl = new TimelineLite();
contentsHome_tl
	.add(contentsAnimation());

var contentsChapter_tl = new TimelineLite();
contentsChapter_tl
	.add(contentsAnimation());

var contentsBottom_tl = new TimelineLite();
contentsBottom_tl
	.add(contentsAnimation());

 

This code (removing the other timelines that include contentsAnimation()) allows for the first instance of contentsAnimation() to load only when the Trigger is encountered (the behavior I want on another instance of contentsAnimation() lower on the page).:

function contentsAnimation(){
	return new TimelineLite()
		.fromTo([".contents__label", ".contents__label--green"], .4, {opacity:0, y:'+=25'}, {opacity:1, y:0})
		.staggerFromTo("li.contents__chapter", 0.5, {opacity:0, x: '-=15'}, {opacity:1, x: 0}, 0.15, '-=.5');
}

var contentsHome_tl = new TimelineLite();
contentsHome_tl
	.add(contentsAnimation());

 

Is there another way to call contentsAnimation, in other timelines, so it doesn't fire automatically on page load and only fires when a specified trigger is encountered?

 

Thank you again!!!

[Add the same timeline to multiple other timelines]

@PointC I cannot tell you how much I appreciate your help and patience explaining this to me.

 

I'm not sure I would have known where to start to fix this problem, so I'm very thankful for the time you spent to show me the way.

 

Thank you again!

[Add the same timeline to multiple other timelines]

@PointC The code doesn't work in either CodePen, or in my code locally, when this line is added:

 

var controller = new ScrollMagic.Controller();

 

Locally, I removed all other code from my javascript file until I found what was causing the issue, and it seems to be the above code. It only seems to affect the instance where I am trying to animate the same div in two different spots on the same page.

[Add the same timeline to multiple other timelines]

@PointC, I do indeed have that plugin loaded after TweenMax.

 

All of the other elements that have a ScrollMagic trigger work fine. 

 

It's only this particular instance where the same part of code is being animated, and triggered, twice on the same page.

[Add the same timeline to multiple other timelines]

I played with my code, and when I add this line:

 

var controller = new ScrollMagic.Controller();

 

The problem occurs again.

 

I know this is the GreenSock forum, but if anyone has seen this issue occur with ScrollMagic, any information would be greatly appreciated.

 

[Add the same timeline to multiple other timelines]

@PointC thank you so much for having a look!

 

I actually have ScrollMagic loaded on my site, but forgot to include it in my codePen!

 

What's interesting is that it seems to be working in the codePen, but it's not working in my code. I must have duplicated something, or something is out of place in my code.

 

I really, really appreciate your help.

[Add the same timeline to multiple other timelines]

@GreenSock I switched to .fromTo() and .staggerFromTo() and I'm still encountering an issue where the elements within contentsAnimation() start at an opacity: 1, then it looks like it repeats the .staggerFromTo().

 

 

See the Pen jGByBx by rgrober (@rgrober) on CodePen

 

[Add the same timeline to multiple other timelines]

@GreenSock thank you again for your help and the explanation.

 

Let me try this again using .fromTo() and see if I can fix this before I bug you further.

 

 

[Add the same timeline to multiple other timelines]

I'm sorry to bug everyone with this again, but I'm still encountering some issues.

 

I actually have the same module in two different parts of the same page.

 

This is my solution:

function contentsAnimation(){
	return new TimelineMax()
		.from(".contents__label", .4, {opacity:0, y:'+=25'})
		.staggerFrom("li.contents__chapter", 0.2, {opacity:0, x: '-=15'}, 0.15, '-=1.1');
}

var contentsHome_tl = new TimelineLite();
contentsHome_tl
	.add(contentsAnimation());

var contentsChapter_tl = new TimelineLite();
contentsChapter_tl
	.add(contentsAnimation());

var contentsBottom_tl = new TimelineLite();
contentsBottom_tl
	.add(contentsAnimation());

 

I then .add the resulting timelines (contentsHome_tl, contentsChapter_tl, contentsBottom_tl) to different, parent timelines.

 

However, I'm encountering some odd behavior, and I'm assuming I've done something wrong.

 

Any further help you can provide is greatly appreciated. Thank you again.

 

[Add the same timeline to multiple other timelines]

@OSUblake and @GreenSock thank you so much for your help and prompt reply. I really, I really appreciate it.

 

I'm still a nascent coder, and when the environment changes, I loose sight of the basics. 

 

Thank you again! I'm very happy I found GreenSock!

[Add the same timeline to multiple other timelines]

Can 1 timeline, be added to multiple other timelines?

 

I've added 1 timeline, to two different timelines, and only one instance of the added timeline is firing.

 

If not, what is the best workaround for this scenario?

 

Thank you, and thank you for such an amazing product.