Jump to content
GreenSock

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

Page transition

Recommended Posts

Hello, I'm doing a website and wanted to implement some page transitions. The goal would be to implement something like this - https://allhero.co.jp/.

 

I already managed to do something similar, the entry animation* is what I intend. The output* is still not what I want because I got stuck in an error that happens during the animation.

 

When I run the first time, it performs as I want, but when I run it again, there is one step it fails to do, and I can not figure out why.

 

The step that does not seem to run is this, and jump straight to the set.

  transitionPage.to(transitionElement, 1, { left: '200%' }, 2 );

 

Entry animation* 

transitionPage.to( transitionElement, .8, { left: 0 } );
transitionLogo.from( transitionElementLogo, .5, {  autoAlpha: .1 } );
transitionLogo.from(transitionElementLogo, .6, {  scale: 5, transformOrigin:'100% 0' } );

 

Output animation*

transitionPage.to(transitionElement, 1, { left: '200%' }, 2 );
transitionPage.set(transitionElement, { clearProps : 'left'}, '+=2');
transitionLogo.set(transitionElementLogo, { clearProps : 'autoAlpha, scale'});

 

 

I'm now starting to work with gsap.
Any suggestion?

See the Pen RqzaNp by saomartinho (@saomartinho) on CodePen

Link to comment
Share on other sites

Hi Tiago,
I made a pen simulating the transition of the site you mentioned.

But first I think it is interesting to make some observations:

1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once.
Like this:
 

let tl = new TimelineMax()
	.to(...)
	.to(...)
	.to(...)
        
 // or
let tl = new TimelineMax();
tl
      .to(...)
      .to(...)
      .to(...)



2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property



3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs.

Will take that to help you somehow.

This pen:
 

See the Pen bQPBvQ by Noturnoo (@Noturnoo) on CodePen

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

Thank you, that's what I was looking for: D and thanks for the tips.

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