Page Transitions - Simultaneous anims to both 'panels'

[coco 4 Likes (Newbie)]

Hi All

So I am stumped and all that I have tried has just been a bit of a mess.  
This is my pen, currnently working on this :: 

I started this with a fork off Joost Kiens wonderful pen from here: 

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

Currently the transition does this;
Onclick of nav item, 'page' scales down and opacity lowers
Next page slides in from the right, opacity full. 

What I want to do is 2 things:
1. Make these 2 animations happen simulaneously 

AND 

2. Have page 2 (or the subsequent page) slide in from the right but at the same scale as the originating page (Let's say Page 1) and as both page 1 and page 2 move leftwards, page 2 comes into full scale.  Hope that makes sense!   Both pages are animating. One to scale .8 and the other one from scale .8. They are both visible but the first page will move out of the screen and the second page comes into view.    

Since these animations are broken down into functions, one for each movement (Scale Down & Move From Right), I do not know how to accomplish this.. 

 

It seems that the Move From Right needs to have a few steps:
1. Start at scale .8

2. Show up initially sliding in from right but adjacent to the first page

3. Then second page scale up to 1.

I've attached a very rough sketch of the animation ... 
I hope some javascript geniuses in here can help me out  












 

 

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

[Ihatetomatoes 147 Likes (Specialist)]

Hi coco,

I think I know what you're trying to do.

 

All you have at the moment are separate tweens, but you should create a timeline instead.

 

That would let you play a few tweens at the same time.

 

Here's a tutorial on how to create a simple image slideshow,I think you can use a similar approach for your page transitions.

 

Video:

 

Related article:

https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/

 

Hope that helps.

 

Cheers

Petr

[Diaco 1,948 Likes (Superhero)]

Hi coco 

 

yep , with timeline it's super easy

 

pls check this out : 

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

[OSUblake 9,990 Likes (Superhero)]

Very nice! Now make it draggable.

[coco 4 Likes (Newbie)]

Great guys!   

Petr, I will definitely go over that tutorial today.  And thanks again, Diaco.
Now I just have to practice this some more.  I figured it was that I had to add timeline, I just got stumped editing the code which I had forked.  It's all syntax n stuff.   And javascript is still my weakness.   Will see what I can do.  Am trying to use Greensock for prototyping transitions for a clients rather than using something like Webflow  or Edge Animate.    

 

[coco 4 Likes (Newbie)]

@Diaco

What does the "L" stand for?  --- ie: .to(slides,1,{xPercent:-100,rotationY:80},'L'+i)

TweenLite.set('body',{perspective:1000});
var slides=document.querySelectorAll('.slide') , tl=new TimelineLite();
for(var i=slides.length;i--{
      tl.addPause()
    if(i>0){
      tl.to(slides[i],.7,{scale:.8,ease:Back.easeOut})
        .to(slides[i],1,{xPercent:-100,rotationY:80},'L'+i)
        .from(slides[i-1],1,{xPercent:100,rotationY:-80},'L'+i)
        .from(slides[i-1],.7,{scale:.8,ease:Back.easeIn})
    }
};
document.addEventListener("mousewheel",mouseW);
document.addEventListener("DOMMouseScroll",mouseW);
function mouseW(e){
  var SD = e.wheelDelta||-e.detail;
  if(SD<0){tl.play()}else{tl.reverse()};
};

[Diaco 1,948 Likes (Superhero)]

its just a Lable , so you have these lables in your timeline : 'L0' , 'L1' , 'L2' , 'L3' , ...

 

one way to play tweens at same time ( tweens with same label ) , btw with adding labels you can seek to particular label/time in your timeline , and easily make nav dots

[coco 4 Likes (Newbie)]

Ok.. so I'm playing with your pen, Diaco.  And I've forked it here :

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

When one 'page' scales down, the next page should come in next to it while it's scaledown so there are 2 scaled down 'page's or slides in the viewport at the same time... In this case, with the timeline you have with the loop, how does one start that subsequent timeline a little earlier, so we see it earlier.  And, is it even possible to do this?   
 

[Diaco 1,948 Likes (Superhero)]

ok , pls check this out ( Full Page Slider ( GSAP Timeline ) #2 )  : 

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

[coco 4 Likes (Newbie)]

ok. wow. i need you as my sensei ... really ...

 

 

Now I need to understand what you did .... 
and I will try to make it so only 2 slides show in the body: the one that is being scaled DOWN and the one to be scaled UP.
The transition I am trying to see if it's possible to work is basically:
- when one clicks on a link (to another slide (or page)) the transition from the current page/slide to the next is the only that should occupy the viewport ...    

[Carl 9,066 Likes (Superhero)]

Wow, Diaco. That's simply incredible.

I can't believe it works so wonderfully with so little code.

 

You clearly went above and beyond here. I'm amazed. 

[coco 4 Likes (Newbie)]

ok.. I'm back!  So, I tried to alter your codepen Diaco, (which is pretty awesome in itself) ... 

But I wasn't able to achieve what I had in mind  .. I reverted back to my codepen forked from yours :

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

 
This rough demo I created with Edge Animate will show what I have been trying to achieve.  (just click 'LINK' to start the transition)
http://ideasnstuff.com/rz/index.html
It is a simulated page transition that is like how some apps do it... Yes, this may not even be possible with a website, but it's just a simulation.  
I didn't post this on Codepen because it's crappy code from the Adobe Edge and it's only for demonstration purposes. Not really editable and its not using Greensock anyway.. 

From what I can see, it's about starting the second animation (movefromright) much sooner but after
1) the first page has scaled down

2) and then moved over a bit.  This is when the Page 2 slides in right next to it.
3) page 1 then fades out has it slides to the left

4) Page 2 scales up to 1.  

Hope you guys can help ... !  I am learning BO COO. here!     
 

[Diaco 1,948 Likes (Superhero)]

Unfortunately we have to focus on GSAP api , not doing projects ...  as Carl mention; i've already gone beyond of forums standard .

 

i think that's better to check the Doc.

specially this blog post about timeline's position-parameter :  Understanding the Position Parameter

 

 and fork my second demo , i'm sure you can make your desired result

[coco 4 Likes (Newbie)]

ok.. thanks .. trying  .. I am only trying to do this effect with GSAP as I am still learning .  
I am doing Petr's tutorial ( I have a couple) which is helping with the nested tl's-  it's  the syntax for loops etc that always gets  me ...  
but thanks for your help,diaco.  really appreciate it!

[coco 4 Likes (Newbie)]

So I created the effect I wanted with one plain little timeline :

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

 

I created a master timeline for this only because I may be adding more functions to the page ...

but wanted to post this here as a starter, in case anyone wanted it.

To clarify, this was not really the challenge. 
The reason I was asking so many questions was because I wanted to use a js loop for this same effect ..

... not for doing a project.
I just had a bit of trouble describing the transition... 
I haven't yet wrapped my head around the syntax for js loops ... back to drawing board ..  



 

[OSUblake 9,990 Likes (Superhero)]

Are you trying to make the page transitions sequential? Like if you're on page 1 and want to go to page 6, would it show all the pages 1-2-3-4-5-6, or just page 1 then page 6?

[coco 4 Likes (Newbie)]

Hi OSU 

Not sequential like in a gallery modal but when one clicks on any link, the same gsap animation function is applied to the current "i" value and then animates to the next position in the array .. I am not sure this is how to think of applying the gsap transition function to any set of 'like' objects.. hope that makes sense -- thanks!