mush Posted June 28, 2020 Share Posted June 28, 2020 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 comment Share on other sites More sharing options...
mush Posted June 29, 2020 Author Share Posted June 29, 2020 Any help? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
mush Posted July 2, 2020 Author Share Posted July 2, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 Did you try combining them? There are a lot of ways that you could combine them. Here's one way: See the Pen QWyaNRd?editors=0100 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
mush Posted July 2, 2020 Author Share Posted July 2, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 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 comment Share on other sites More sharing options...
rremus Posted November 18, 2020 Share Posted November 18, 2020 @mush did you find a solution for this kind of behavior using GSAP ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now