Jump to content
GreenSock

peterj

Page Transitions in all directions

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 am very new to GreenSocks and I am still exploring all the possibilities.


 


What I'm looking for is a way to create something like


 http://alvarotrigo.com/fullPage/ horizontal and vertical page slide.


 


What I really want to accomplish is making full page transitions  left, right, top and down with


dynamic PHP pages with navigation.


Basically, when you click on a menu in navigation the page will slide left or right or top or bottom.


I try to keep URL as they are not like in one-page anchor # thing


 


Is it possible to achieve something like this with Green Sock?


If so could someone point me in the direction of documentation and examples. I have looked around but not sure where to start.


 


Thanks for your help.


 


Regards


Link to comment
Share on other sites

Hello peterj and welcome to the GreenSock forum!

 

One thing to know is at its heart GSAP simply animates any numerical javascript property or object. And can animate any numerical CSS property. So that link you have above is easy for GSAP to do. Its just a matter of you setting up your HTML and CSS correctly.

 

It looks like all that is doing is scrolling down, then the second scroll down is just a fullscreen slider.

 

Have a look at the GSAP scrollToPlugin

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

 

Some examples:

 

See the Pen kDvmC by bassta (@bassta) on CodePen

See the Pen XmozON by MAW (@MAW) on CodePen

See the Pen LExggp by JoostKiens (@JoostKiens) on CodePen

See the Pen ZbZPmw by nushi (@nushi) on CodePen

See the Pen yYradO by MAW (@MAW) on CodePen

 

TweenMax Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

But first get familiar with the GSAP API using the GSAP Jump Start:

 

https://greensock.com/jump-start-js

 

GreeenSock Learning Channel on YouTube:

 

https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg

 

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Thank you, Jonathan,

that was really helpful I will read everything through and see how to implement what I need.

 

Thank you again,

  • Like 1
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.
×