[Start animation at the end of a section slide]

I have looked at the horizontal example before, but unfortunately it's not an option. Can you fork my codepen with an example using intersection observer? I'm not exactly sure how to play the animation using that.

[Start animation at the end of a section slide]

Thanks for the reply, I have made a pen showing something close to what I have. Each panel would have it's own animations and text, but for this example I put a timeline animation in the green panel. So I would like to only trigger the entry and tip animation when the panel is full screen.

 

See the Pen eQogXL by jonrcoulter (@jonrcoulter) on CodePen

 

[Start animation at the end of a section slide]

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);

 

See the Pen eQogXL by jonrcoulter (@jonrcoulter) on CodePen