Page transition

[saomartinho]

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

[Victor Work]

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

 

[saomartinho]

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

[Dheeraj Narayan]

Hey this pen is great. Thanks Victor Work. I am still learning gsap and wondering how to have this animation for page transitions. Like i have a static html website and want to implement this animation in between the pages.