Jump to content
Search Community

Page Transitions - Simultaneous anims to both 'panels'

coco 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 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 :)  












 

 

post-38834-0-80236500-1447978656_thumb.jpg

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.    

 

Link to comment
Share on other sites

@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()};
};
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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?   
 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!    :-P 
 

Link to comment
Share on other sites

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 ;)

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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



 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 5 years later...

Hello @Diaco,

Thank you for your marvelous slider! It is really easy to use. I made a modification, because I need it slightly transparent. The problem is, that the penultimate and the next by one are not moving "offstage". So they are overlapping. Is there an easy way to adapt this, so that the unused divs are moving further?

See the Pen JjJKLmj by peter-schoene (@peter-schoene) on CodePen

Link to comment
Share on other sites

I'm lost - why would you change xPercent to -50 and 50 and still expect them to go off stage? The whole reason I set them to 100 was to solve your issue. I must be misunderstanding your question or your goal. 

 

"l" is the length of the array. i is the current index that's looping through. 

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