I think I've identified the problem, after implementing indicators and offsets as suggested above.
Also, as @PointC mentioned:
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!!!