Learning

Create page piling with only GreenSock

Recommended Posts

Hi guys,

I'm wondering if it is possible to create a page piling effect with only GreenSock, similar to

http://alvarotrigo.com/pagePiling/#page1

 

As it seems to need to restrict scrolling, yet detect it and also swiping, does it mean it will still need some form of jQuery instead of being able to completely be done with GreenSock?

 

Cheers!

Learning

 

 

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums

 

The basic page transition animations that are triggered by pressing the buttons can be easily handled with GSAP.

If you want to use touch interactions to throw the pages around you may want to investigate our Draggable and ThrowPropsPlugin https://greensock.com/draggable

 

GSAP has no tools for hi-jacking or restricting scroll, so you will need to use your own solution for that.

 

It sounds like you may be looking for GSAP to be an easy replacement for that tool. 

Although the animation part is pretty straight-forward, there is a fair amount of other stuff going on.

Just check the source: https://github.com/alvarotrigo/pagePiling.js/blob/master/jquery.pagepiling.js

 

To be frank, if you wanted to replicate that tool using only GreenSock tools, vanilla JavaScript and no jQuery I think it would be a fairly ambitious undertaking, especially if you are still learning. However I would still encourage you to try to re-build some of the basic parts... like set up 4 "pages", stack them on top of each other and try to get them to animate up and down. 

  • Like 1

Share this post


Link to post
Share on other sites

Would Scroll Magic work for you? It may be a bit like going after a bug with a bazooka, but amongst the hundred other things it does, it can pin a page in place and it is best run with GSAP. Might be worth taking a look, although I'm not sure how it handles swiping or touch?

Share this post


Link to post
Share on other sites

Thanks very much for that example. It's a great stripped down model that I can dissect and learn from. Thanks for taking the time. :)

Share this post


Link to post
Share on other sites

Hi guys!

 

Thanks for your replies. Am checking out all the links and learning how it works from there.

=D

 

Carl, thanks for your analysis. Yea, I was thinking if there was any way to perform the functions needed for the page piling using only GreenSock. If JS/jQuery is needed either way, then perhaps there's no point to add another lib just for the animation portion since jQuery can handle that too.

Share this post


Link to post
Share on other sites

jQuery is not needed, it just often makes certain tasks easier.

If all you need for animation is what that plugin does and it already has all the features you need, then its probably a great idea to use it.

However, I think that once you start finding that you want to animate other things, you are going to hit quite a few obstacles relying on jQuery alone for animation.

  • Like 1

Share this post


Link to post
Share on other sites

Hi guys :)

 

Learning , OneManLaptop , pls check this out , this can help you to start coding : http://codepen.io/MAW/pen/dopxrV

 

Thanks just forked that myself. Something like this is helpful to learn. 

 

I also just bought the NobleDesktop GSAP workbook. It is sometimes better to see live examples that sort of match what I have in my head.

 

Cheers!

  • Like 2

Share this post


Link to post
Share on other sites

Hi @elbow1324

 

I didn't write that demo, and haven't really looked at how it works, so I'm not sure. I'm guessing you would just need to reverse everything. Try making a demo, and if you get stuck, I'm sure somebody will be able to help you out.

Share this post


Link to post
Share on other sites
On 5/24/2015 at 4:22 PM, Diaco said:

Hi guys :)

 

Learning , OneManLaptop , pls check this out , this can help you to start coding : http://codepen.io/MAW/pen/dopxrV

@Diaco, I just want to say thank you so much for your demo! 

 

How does the chaining ".anim" work in the for loop from your demo? I forked your demo and it works with any names I've used. Sorry for a noob question. 

 

Share this post


Link to post
Share on other sites

There's no chaining. He's creating an animation for an element, and then storing that animation on the element to make accessing it easier later on. An element is an object, and you can add properties to an object after it's created. The name doesn't matter as long as you don't use a name that is already being used or is reserved.

 

var box = document.querySelector(".box");
var Anim;

box.mySuperAwesomeAnimation = TweenLite.to(box, 0.7, { yPercent: -100, paused: true });

// later on you can access that animation
box.mySuperAwesomeAnimation.play();

// creating an alias to the animation
Anim = box.mySuperAwesomeAnimation;

// both of these will work. They are the same animation
Anim.play();
box.mySuperAwesomeAnimation.play();

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Wow, thanks for your very swift reply and detailed explanation! I really appreciate your help! :)

 

Don't I need to declare this element mySuperAwesomeAnimation? Any docs that I can read this up?

Share this post


Link to post
Share on other sites

 

5 hours ago, iLuvGreenSock said:

Any docs that I can read this up?

 

If anything is confusing in that demo, it's probably not related to GSAP, but rather JavaScript itself. Understanding the basics of an object might be a good place to start.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

 

You use objects all the time. The tween is an object. So is the curly brackets inside the tween.

 

var myAnimation = TweenLite.to(box, 1, { x: 100, y: 200 });

 

 

You don't have to write the object inline like that. This works.

 

var config = { x: 100, y: 200 };

var myAnimation = TweenLite.to(box, 1, config);

 

 

After an object is created, you can still add stuff to it. This will animate x, y, and rotation.

 

var config = { x: 100, y: 200 };

config.rotation = 90;

var myAnimation = TweenLite.to(box, 1, config);

 

 

As I said in my previous post, an element is object, so you can add whatever you want to it. 

 

var box = document.querySelector(".box");

box.mySuperAwesomeAnimation = TweenLite.to(box, 1, { x: 100, y: 200 });
box.mySuperAwesomeAnimation.timeScale(0.5);

box.twoPlusTwo = 2 + 2;
console.log(box.twoPlusTwo); // 4

 

 

 

  • Like 5

Share this post


Link to post
Share on other sites

@OSUblake you're my superhero!

 

You're provided exactly what I'm looking for. Not only does GSAP rocks, the community is totally awesome! ;)

 

  • Like 2
  • Thanks 1

Share this post


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.