Jump to content
GreenSock

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

Animating same element between 2 pages

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,

 

I stumbled across a website that is using GSAP (TweenMax, based on Wappalyzer)  to animate its elements, and I found one specific animation really interesting.

 

If you visit the website in Desktop (http://thieb.co) and arrive at the home page, click one of the projects and you'll be brought into the specific project page.

 

If you see carefully, the project title animates from the home page position to the project page position, and the URL changes. But the project title element is still the same.

 

I was just trying to figure out how to do this and I've been searching all over the internet for this. Since the creator of the website uses GSAP, I guess this is where I can start.

 

Does anyone knows how to create a similar effect for that?  Or can lead me to a place where I can learn how to achieve that effect?

 

Thanks,

Alfian

Link to post
Share on other sites

Very nice site there.

 

It looks like it is using a Single Page Application (SPA) approach

 

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.

SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs.

 

https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

 

For some demos using GSAP in an SPA check out this wonderful thread from @OSUblake 

 

 

  • Like 5
Link to post
Share on other sites

Hi Carl,

 

Thanks for providing me a source to learn more about the approach.

 

I've read the thread that you shared. I realised that most of the examples are for applications, whereas for the website that I shared, its for a basic portfolio kind of website, using just HTML and JavaScript/jQuery with AJAX.

 

For my knowledge, I have not yet learned any of  the frameworks that the thread have stated as of now, as I only started serious web developing late last year. 

 

Do you have any basic resources on learning AJAX to manipulate the DOM so that I can achieve a similar animation effect with the website I've shared? Or do you think its not possible to achieve such an effect without Single-Page Applications?

 

Thanks,

Alfian

Link to post
Share on other sites

I think the easiest way to get started would be with a framework like Vue.js, right @Dipscom ?

https://vuejs.org/

 

But don't trust me because I've actually never used it. I just know how it works. :P 

 

jQuery's AJAX is easy to use.

https://api.jquery.com/jquery.get/

 

$.get("some.html", function(data) {
  
  // Inject html
  $(".container").html(data);
  
  // Play animation
  TweenLite.to(".foo", 1, { x: 100 });
});

 

  • Like 5
Link to post
Share on other sites
12 hours ago, OSUblake said:

I think the easiest way to get started would be with a framework like Vue.js, right @Dipscom ?

 

I would second that.

 

As the other two gentlemen have mentioned, it's a pretty common SPA technique, where you fake navigation manipulating the browser's history but do not refresh the page itself, therefore, you can have some elements stay in place while others come and go.

 

Vue is my personal preference, for no other reason than being a personal opinion. React is another one, Angular... Preact... There seem to be a new one every other week.

 

Throw a stick and pick the one that falls from the branch, you should be fine with it. :)

 

  • Like 5
Link to post
Share on other sites

Hi @OSUblake AND @Dipscom,

 

Thank you so much for the suggestions. I will look towards Vue.js for future projects that I would like to apply this effect to.

 

Thanks for the detailed answer.

  • Like 2
Link to post
Share on other sites

You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.

 

 

  • Like 3
Link to post
Share on other sites

Thanks Sahil for the resource.

 

I think that is exactly what I was looking for. Transitions between simple static HTML pages.

 

Thanks!

Link to post
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.

×