Jump to content
GreenSock

martis

Single page framework with GSAP page transitions?

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

Hey guys,

 

I run into sites that have great page transitions and are what I think are 'single page sites'. (ie http://humans-machines.com/ )

 

I understand how to build HTML, CSS, JS files, but I am not too familiar with building single page experiences...

 

My question is... whats a good single page framework to start with knowing the goal is to build in custom page transitions using GSAP?

 

Thanks!

Link to comment
Share on other sites

Hi martis :)

 

I'd recommend talking a look at ScrollMagic. It's great for that kind of site.

 

http://scrollmagic.io/

 

Check out Petr Tichy's site for a lot of great info, tutorials and classes about it. He's a great teacher.

 

https://ihatetomatoes.net/

https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/

https://ihatetomatoes.net/5-days-with-scrollmagic/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hi PointC,

 

Yes, I have used ScrollMagic, it is a very nice animation framework.

 

I guess I am looking for advice more towards using something like Meteor or Ember .... something that has routing and also allows for custom page transitions on routing requests.

Link to comment
Share on other sites

I don't think that humans-machines site is a single-page application (SPA). You can usually tell by the url in the address bar. If it was a SPA, you would see the url change. And not to a hash link like #foo. However, sometimes you'll see a hash in the url for a SPA, but it will have a slash in it like #/foo.

 

The main reason I started using GSAP was to animate SPAs. They open up a whole new range of possibilities when it comes to animations. And it's not just page transitions that are fun to animate. Most frameworks will allow you to create custom elements with their own unique behavior!

 

I will caution you that there is a steep learning curve to building a SPA. There's usually only one page, so managing everything can become quite complex, and your code might have to do stuff that is typically done by a server. There are a lot of concepts that may seem very foreign if you've only done jQuery types of things.

 

When it comes to building a SPA, I like using Angular. Some other ones include Aurelia, Polymer, Vue, and jQuery smoothState. I know that React is really popular right now, but I don't know if I can recommend using that with GSAP as I hear a lot of mixed things. There's also Angular 2, which is a complete rewrite of Angular 1, so I don't if I can recommend using that as it's too new.

 

One thing I really like about Angular is how you can create animations. I know that other frameworks have adopted this technique, so it's no longer unique to Angular, but here's how it works. You target an animation based on a CSS class name and an event/state. So for a page transition, you would probably do most of your animations during an enter or leave event. Enter is when an element is being added to the DOM, and leave is when an element is being removed from the DOM.

 

Here's a really simple example of an enter and leave animation.

See the Pen 5d9d6fe688766b469f5d4db88ef069b2?editors=0010 by osublake (@osublake) on CodePen

 

You always to have call done to let Angular know when the animation is finished. This is particularly important for a leave animation because that is when Angular will remove the element from the DOM. I don't have a lot of demos that do routing, but here's a pretty simple one. A page is an element, so the animations work the same. You can see the animation code by clicking on the app.js file on the left.

http://plnkr.co/edit/gDtuKf?p=preview

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

Hello, everyone,

even though the thread is a bit older, it deals with exactly my problem.

I would like to hear your assessment: Is it mandatory to use a framework like vue, singular etc. if I want to use animations in a simple SPA?  I have built a very rudimentary project based on this tutorial: https://medium.com/better-programming/js-vanilla-script-spa-1b29b43ea475 It basically meets my requirements very well.  
We use gsap in our agency mainly for banner advertising and are satisfied with it. But now I'm not really getting ahead with my limited JS skills. It is logical that I cannot animate the elements within the individual routes, because gsap cannot find the elements in the DOM. Do you think there is a way to animate single elements anyway? Is there for example the possibility to let a tween start only when the corresponding "page" is selected and all elements are found in the DOM? I am thankful for all food for thought ;)
Best regards from Hamburg, Germany
Patrick

Link to comment
Share on other sites

Hey Consequence and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

1 hour ago, Consequence said:

Is it mandatory to use a framework like vue, singular etc. if I want to use animations in a simple SPA?

Nope! You can use GSAP with or without a framework without issue. 

 

1 hour ago, Consequence said:

I cannot animate the elements within the individual routes, because gsap cannot find the elements in the DOM.  Do you think there is a way to animate single elements anyway?

You should be able to animate by using references in whatever framework you're using. 

 

How about you create a new thread on these forums and provide a minimal setup of your project including a recreation of whatever error you're facing? This thread provides more info on how to do so:

 

Link to comment
Share on other sites

Hi Zach,

thank you for your quick answer! I will open a new thread with an appropriate codepen...

 

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