Jump to content
Search Community

Full Page Transitions

celli 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

Hi,

 

I am trying to figure out the best way for every navigation item, onClick to make the window scroll to the top, and then fade in the next page. I guess I can do something like this

$("a.transition").click(function(event){
	event.preventDefault();	
	linkLocation = this.href;
	TweenMax.to(window, 2, {scrollTo:{y:400}, ease:Power2.easeOut})
	TweenMax.from(window, 1, {css:{opacity:0}, redirectPage, ease:Power2.easeOut})
	
		
});
	
function redirectPage() {
		window.location = linkLocation;
	} 

But is this the best way ? or is there a slicker way to use GSAP in this case ? I would make a codePen but in this case since we are talking about clicks to other pages, I thought the above code snippet would be suffice... just let me know!

 

 

Link to comment
Share on other sites

I'll send you a PM of what I've done.. not sure it's the best way but it's a way. Just can't post the URL on this forum yet. 

 

But the principle I used is making a large container which you can drag and snaps to the next 'fullscreen' or you can use the mousewheel to go one screen up or down. You can use scrollTo but not sure what the benefits are. And I don't want a normal scroll function but at least a bit of a pause between each screen.

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...