Jump to content
GreenSock

bootstrap007

How to start animating a div exactly same position from previous page?

Recommended Posts

Hi All,

Hope everyone is doing well and safe during this outbreak.

 

I have a query.  As you can see in the below mentioned portfolio URL that If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). Is it possible to do this in GSAP? How to trigger the object position from the previous page ? Any ideas would be much appreciated.

 

 

https://emanuelemilella.com/works

 

 

 

Thanks

 

 

 

 

 

Link to comment
Share on other sites

5 hours ago, bootstrap007 said:

Is it possible to do this in GSAP? How to trigger the object position from the previous page ? Any ideas would be much appreciated.

Of course it is! 

 

You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. 

 

Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it :) 

  • Like 2
Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Of course it is! 

 

You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. 

 

Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it :) 

Hi ZachSaucier

Thanks for your time & support.  I know about barba.js and the page transitions effects. :)

 

You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state.   -- Do you have any example for this please?  My question was - If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). This can be done in Gsap or with the help of Jquery only?

 

 

Thanks

Zack

 

 

 

Link to comment
Share on other sites

5 minutes ago, bootstrap007 said:

Do you have any example for this please?

I think it'd be best if you first provided the setup of how you're approaching this situation (in minimal form) using a CodePen. That way I could provide aid directly related to your setup. I've already outlined the steps so repeating myself wouldn't do much good.

 

5 minutes ago, bootstrap007 said:

This can be done in Gsap or with the help of Jquery only?

Yep, it's just a JavaScript question.

Link to comment
Share on other sites

22 minutes ago, bootstrap007 said:

But when user scroll down the demo1 page and if the pic is at the top of the page corner and if he clicks on the picture then it will take to the demo2 but the picture's animating position won't be from the TOP corners of the page same as in the previous page. It will be same as the predefined positioning.

That's because you don't have any logic to make the behavior that you're wanting happen :) You should look into the FLIP technique. GSAP even has a handy FLIP helper function that you could make use of. 

 

If you have specific questions, especially related to GSAP, we're happy to help. But unfortunately we don't have the capacity to build this out for you.

Link to comment
Share on other sites

@bootstrap007

 

Have a look at this post and linked thread example as reference (no need to bump either thread with comments by the way :--)

 

You won't able to use Barba on Codepen like that. You need to have a Pro account and create a Project instead, or do it live on your own server.

 

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