Jump to content
Search Community

Jump to Next Section

launchcatapult 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

Hello! 

 

I'm pretty new and still learning GSAP, which is pretty awesome and powerful.  I've been working on a horizontal website so as you scroll, animations are being triggered based on the scrolling position. I've combined GSAP with Scroll Magic to achieve this.

 

You can see the site here - http://maric.launchcatapult.com/

 

I have 5 main sections Home, WePartner, WeAdvise, WeServe, and WeEmpower. 

 

I've created a cross over transition, which you can see towards the end and after all of the animation is completed of the "We Partner" section.  During this cross over transition animation, how can I make the timeline jump to the very start of the next section, which would be the "We Advise" section then continue on its animation from there?

 

Another example that I've been looking at is from http://tram-house.com/. After you insert the key into the hole, they have that circular transition, then after that animation is complete it takes you to the beginning of the next section (also provided screen shots).

 

Can any one direct me onto the right path to achieving this same thing? I know the tram-house.com site is using a canvas instead, but I know little to none about how to animate and draw shapes within canvas. That's why I'm just tweening svg shapes instead.

 

Thanks!

Screen Shot 2018-04-10 at 8.11.09 PM.png

Screen Shot 2018-04-10 at 8.09.00 PM.png

Link to comment
Share on other sites

Hi @launchcatapult :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I couldn't get my scroll wheel to work on the site so I'm not sure if everything is 'wired up' yet or not. After I clicked one of the menu buttons the wheel worked, but the whole scene moved really slowly. It's always harder to answer questions looking at a live site instead of demo. 

 

I think what you're looking for is the position parameter. 

https://greensock.com/position-parameter

 

You would add labels to the timeline and then play() from a certain label when one of your transitions is finished via an onComplete callback. Or if you're trying to change the scene in the middle of the transition, you could make that master timeline label jump at the 50% progress point of the transition animation. If you could put together a simple demo, it would be easier to advise you. Here's a some info about that.

It does not need to have your actual project assets. Just enough elements to demonstrate the question or problem would be best.

 

Happy tweening and welcome aboard.

:)

 

  • Like 2
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...