Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mush

Transition between sections

Recommended Posts

Hi guys,

 

I built a page with multiple animations using GSAP and ScrollTrigger, this is the page Open Screenplay.

The animations are very good but I need to add transitions between the sections but I don't how I can do it.

 

The transitions that I need to apply are bounce transition like this https://connect-homes.com/process and overlap transition like this http://www.espn.com/espn/eticket/story?page=Dock-Ellis.

 

Thanks in advance.

Link to post
Share on other sites

Hey mush. How to create a transition like that depends on exactly what sort of transition that you are wanting to make. We have examples of pretty much all of those transitions listed in the demos section of the ScrollTrigger docs.

 

Also FYI we will get around to answering every post when we're able to, you don't need to post multiple times.

  • Like 1
Link to post
Share on other sites

Hey @ZachSaucier.

 

I checked the demos in the ScrollTrigger docs but none of them worked with me.

My problem is all of my sections have animations with pin scrolling, every section has its own timeline and when I add a new timeline to wrap all the timelines it gets crashed.

 

Here a simple example of my code, how I can add the transitions in this demo? 

See the Pen 2924dce3ae0340b1d0599192d1fb5dde by GreenSock (@GreenSock) on CodePen

 

See the Pen ExPoxGq by muhmushtaha (@muhmushtaha) on CodePen

Link to post
Share on other sites

Thanks for the reply @ZachSaucier

 

I tried this but this is not the right solution.

 

I should pin the section and run the animations with user scrolling and when the section's animations are done then the next section should appear.

Your example is not pinning the sections and doesn't apply the revealing section transition.

 

Check this video, see how the section is pinned and when the section animations are finished it revealing the next section.

https://www.loom.com/share/787742767ae049feb237c0c630cad600

Link to post
Share on other sites

The only differences between my demos and the ones shown in your video are the dimensions, the animation values, and the fact that they have a background image on the left side. Unfortunately we don't have the capacity to build out the whole site for you. If you have a specific question please ask and we'll be happy to answer.

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.

×