Jump to content
Search Community

Create page piling with only GreenSock

Learning 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 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
Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

  • 9 months later...

You should also check out some of these examples created by Chrysto

 

Demo 1:

See the Pen kDvmC by bassta (@bassta) on CodePen

Demo 2:

See the Pen eIyrd by bassta (@bassta) on CodePen

Demo 3:

See the Pen cJgkw by bassta (@bassta) on CodePen

 

Hi OSUBlake,

 

Is it possible to make demo 3 reversed? So scrolling out of the top of the viewport instead of the bottom?

 

Thanks in advanced!

Link to comment
Share on other sites

Hi guys :)

 

Learning , OneManLaptop , pls check this out , this can help you to start coding : 

See the Pen dopxrV by MAW (@MAW) on CodePen

 

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
Link to comment
Share on other sites

  • 2 years later...
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 : 

See the Pen dopxrV by MAW (@MAW) on CodePen

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

 

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