I am creating a page with a similar layout to this sample: http://scrollmagic.io/examples/advanced/section_slides_manual.html, but I want to trigger another TimelineMax() animation when each slide comes into full view, but I am having trouble figuring it out.
Here is timeline for the wipeAnimation
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to(".post-1970", 0.5, {z: -150, delay: 1}) // move back in 3D space
.to(".post-1970", 1, {x: "-16.666%"}) // move in to first panel
.to(".post-1970", 0.5, {z: 0}) // move back to origin in 3D space
// animate to third panel
.to(".post-1970", 0.5, {z: -150, delay: 1})
.to(".post-1970", 1, {x: "-33.332%"})
.to(".post-1970", 0.5, {z: 0})
// animate to forth panel
.to(".post-1970", 0.5, {z: -150, delay: 1})
.to(".post-1970", 1, {x: "-49.998%"})
.to(".post-1970", 0.5, {z: 0})
// animate to fifth panel
.to(".post-1970", 0.5, {z: -150, delay: 1})
.to(".post-1970", 1, {x: "-66.664%"})
.to(".post-1970", 0.5, {z: 0})
// animate to sixth panel
.to(".post-1970", 0.5, {z: -150, delay: 1})
.to(".post-1970", 1, {x: "-83.33%"})
.to(".post-1970", 0.5, {z: 0})
// animate to seventh panel
.to(".post-1970", 0.5, {z: -150, delay: 3})
.to(".post-1970", 0.5, {z: 0});
And here's an example of a timeline that I would want to animate once the panel is back to 0:
// Jot It Down
var jotItDown = new TimelineMax();
jotItDown
.fromTo('#jot_it_down .entry', 2.0, {y: '20px', opacity: 0}, {y: '0', opacity: 1, ease: easeOutAnimation}, 0, "Start")
.fromTo('#jot_it_down .mountains', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 0.5)
.fromTo('#jot_it_down .tip', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 0.75)
.fromTo('#jot_it_down .dollar', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 1.0);