Jump to content
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);

 

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

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.

 

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

 

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.

 

See the Pen vVBQzP by PointC (@PointC) on CodePen

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?

 

See the Pen ZmNOwr?editors=1010 by Noturnoo (@Noturnoo) on CodePen

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.