jeb

Start animation at the end of a section slide

Recommended Posts

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

 

Share this post


Link to post
Share on other sites
1 hour ago, jeb said:

but I want to trigger another TimelineMax() animation when each slide comes into full view, but I am having trouble figuring it out. 

 

I believe that if you create an Example in Codepen with what you are trying to do,
it will be easier to help you. Take a look at this:

On making a TimelineMax between Tweens, I believe you can use the onComplete method inside your animations.

And when you return to state 0, you can use onReverse.

Look this:
https://greensock.com/docs/TimelineMax
 

But really if you have a Pen, it's easier to find a way to help you.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything.

 

http://scrollmagic.io/examples/basic/going_horizontal.html

 

If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations,

 

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

  • Like 5

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

We do have to keep our support focused on GSAP here. That being said, I made this example as an answer to another forum question and it may help you. It uses pins and triggers a new animation for each panel.

 

Happy tweening.

  • Like 5

Share this post


Link to post
Share on other sites

 

Hi @jeb,
 

To illustrate, I've added an onComplete in the middle of your animation, and an onReverse in the Timeline, so that it fires when the scene is redone.

Is that what you were trying to do?

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.