Jump to content
Search Community

Start animation at the end of a section slide

jeb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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

 

Link to comment
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
Link to comment
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.

Link to comment
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.
×
×
  • Create New...