Jump to content
GreenSock

jeb

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by jeb

  1. 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

×