Jump to content
GreenSock

Alex

What can I do with GSAP?

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

Hello,

I discovered GSAP through a very interesting article on Codepen and based on the presentation I think it is by far the best solution I have found for what I'm trying to accomplish for my projects.  

I'm using a mixture of CSS and jQuery for it now and it seems to work on Chrome, but not on FF e.g. 

However, since I recently started coding and am new to all this I wonder wether it's possible to use GSAP.JS and make the colours become visible with a 3sec transition time when hovered over the character?
The link: http://demo.chilipress.com/EpicForever/About5

Second: Would I be able to use GSAP.JS to make the leaves rotate and fly random directions for a set period of time (as I have them now)?

Third: Is it fully cross browser proof so that I don't have the same issue with FF as I have now? 

Fourth: If I'm correct I can download the GSAP.JS file for free or link to: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>

And go through the documentation on how it is used / the code and such and from there start implementing it?

Sorry for the stupid questions. I've been struggling with getting my animations accomplished the best way possible and there seems to be a lot of documentation on them and plugins and what not, but I wasn't able to find a solid solution until I came across GSAP.JS. 
So at this stage I wonder wether It can really do what I hope and think it can do or not.

Thank you in advance 

Link to comment
Share on other sites

Hi Alex and welcome to the GreenSock forums.

 

To start there are no stupid questions, just bad answers and support. That's the exact opposite way as things work here in the GreenSock forums so don't worry about it.

 

You can definitely achieve everything you ask with GSAP. For the superhero image-filter though, that's webkit-specific so you can't use that in other browsers. GSAP is able to tween the values of any property, of any javascript object you throw at it, but is not a rendering engine. But because of how flexible it is, works great with other frameworks and some HTML5 resources, for example canvas, which you could use to get a crossbrowser image-tint effect, on the browsers that support canvas filters of course. Same thing with SVG filters.

 

For the random leaf movement, definitely. If you are already calculating those values, all you have to do is pass them to the engine and you're all set. In this regard a question: are those values changing constantly or they are a set that's calculated when the page loads?. Once I did some random movement stuff and created a path, on page load, then passed that path to the bezier plugin and into a timeline that was reversing. Another choice could be create a new path before the current animation is completed, starting on the final point of the current path and playing that new animation once the previous is completed. For that you can add a new instance to a timeline and then remove the previous instance to avoid the timeline becoming bigger and bigger. Also I'm sure that other users could come out with other solutions for this, so as you can see there are a lot of options.

 

In terms of FF issues, could you tell us what are those issues?. As I said previously if you use SVG or canvas to create image filters, you can use them in every browser that support them:

 

http://caniuse.com/#feat=svg-filters

 

In terms of what you can download for free there are some options as well. In the top left corner there's a button that saids "get GSAP", that will launch a popup with every part of the engine you can download or point from the CDN. Another option is go to the GitHub repository and get the code from there. A third option is point from the CDN, here's the link:

 

http://cdnjs.com/libraries/gsap

 

Finally in order to see the rest of the tools you can go to the Club GreenSock page in order to see prices and what you get in every case, the most commonly used tools are the Throw Props Plugin and the Split Text tool:

 

http://www.greensock.com/club/

 

Hope that this helps, if you have more question just keep shooting.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Rodrigo, 

First of all, you're awesome!!! And second, thanks for the detailed reply. 
 

I started using web-development about 6months ago and about one month ago I started using JS. The code for the leaves (making them fly random directions and rotate) is not my own and I can't really answer your question:" In this regard a question: are those values changing constantly or they are a set that's calculated when the page loads?"
 

But your explanation about how you would get it done is very clear for me and the fact that it's possible to accomplish with GSAP.JS just brings a big smile on my face. 

As for your second question: "In terms of FF issues, could you tell us what are those issues?"

On FF this link: http://demo.chilipress.com/EpicForever/About5 ,, when hovered over one of the characters in the center, everything should become coloured with a 3sec transition. Just as is happening on Chrome. by the way, if you can help me with this, I would very VERY thankful. 

I believe I am using SVG to create a grey filter effect (with a class="grey"),, and when the character is hovered on I'm removingClass ("grey") with jQuery. On Chrome, Safari and Opera it works fine, but not one FF. On FF the transition happens instantly unfortunately. 

And when you wrote: "For the superhero image-filter though, that's webkit-specific so you can't use that in other browsers."
Dit you mean I still have to use this vendor prefix even when working with GSAP.JS? 
Because the whole vendor prefix thing is one of the most stupid and waste-of-time matters I have come across since I started web-development. I understand how browsers have their own rules and why it is there, but I feel it is a bitch to work with them. I am trying to find a way to get all my animation and transformation and what not done without these damn vendor prefixes in my css all the time. 
So at this stage my question would be: When I use GSAP.JS, I don't need to use any vendor prefixes right? I mean, that's the whole point of GSAP.JS and that it's faster of course. 

 

Look very much forward to your answer. 
Alex

Link to comment
Share on other sites

Hi Alex,

 

Thanks for posting here. Glad to see Rodrigo on the case.

 

A few points regarding vendor-prefixes. GSAP's CSSPlugin handles vendor-prefixes for ALL css properties that GSAP supports. 

 

Take a peak at the demos on this page: http://www.greensock.com/css3/

 

You will see that none of the TweenLite code uses vendor-prefixes. Its all handled behind the scenes. 

 

Likewise if you do 3D rotations, you can just say rotateX:360 and GSAP will generate a 3D transform matrix for you (with the appropriate vendor prefix).

 

---

 

currently we don't support filters as they don't seem ready for primetime in all browsers: http://caniuse.com/#feat=css-filters (shocker: IE doesn't support them)

 

In this case you can tween a grayscale value an manually apply it using an onUpdate callback:

 

var color = {gray:0};
var image = $("#image")[0];

TweenMax.to(color, 2, {gray:1, onUpdate:applyColor, onUpdateParams:[image], repeat:50, yoyo:true, repeatDelay:0.2})


function applyColor(element) {
//apply filter yourself
  element.style["-webkit-filter"] = "grayscale(" + color.gray + ")"
}

http://codepen.io/GreenSock/pen/tDebd?editors=001

 

---

 

As for the motion of the leaves, as Rodrigo was suggesting, if you create your random values in advance, our Bezier plugin will do a great job. Here is a basic example of random motion along a curved Bezier path:

 

http://codepen.io/GreenSock/full/uhKIy (click edit on codepen button to see code)

 

--

 

Hopefully this is enough to get you going in the right direction.

Since you are starting out, I would urge you to focus on some of the key features of the API: http://www.greensock.com/jump-start-js/ and not get too hung up on effects that don't have wide browser support.

 

I'm confident there is no other animation tool you will find that gives you the power, flexibility and control of GSAP. 

 

Happy tweening!

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi Alex,

 

Currently you're using CSS filters, which have been around for a while (over two years I believe) but are still an experimental technology that only works on webkit based browsers (Crhome, Safari and Opera 15+) so other prefixes won't have any effect whatsoever.

 

On the other hand SVG filters work on top of SVG which has a wider browser support, all major browsers and IE10+. You can learn more about them and about SVG here:

 

http://www.w3schools.com/svg/svg_filters_intro.asp

 

https://developer.mozilla.org/en-US/docs/Web/SVG

 

Also GSAP has a couple of plugins to work with some SVG libraries (Raphael and Easel) and Anthony Greco released a Snap SVG Plugin as well:

 

https://github.com/anthonygreco/GSAPSnapPlugin

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hey guys, 

 

Thanks for the replies / links and explanations. 

currently we don't support filters as they don't seem ready for primetime in all browsers: http://caniuse.com/#feat=css-filters (shocker: IE doesn't support them)

This is good to know and @Rodrigo thx for sharing SVG libraries (Raphael and Easel)

It's something I will look into in the future. 

I'm very enthusiastic about GSAP.JS and shared it with some friends. 
For now I'm going to dive in the world of JS and get my fingers dirty with it. 
In the near future when I feel more comfortable with JS I'll start using GSAP.JS and look forward to attributing to your Forum as well (since I'm a fan of sharing knowledge).

 

I only started coding with jQuery a few months ago and feel still pretty lost here and there when looking at JS code. And since GSAP.JS has a lot of that I think it's better to have a good basis before jumping on board!

 

All in all, thank you very much guys.
Alex

  • Like 1
Link to comment
Share on other sites

Great to hear, Alex. Yeah, I would urge you to take things slow, one step at a time.

I think as you are learning, hanging around these forums (even if you are just reading silently in the background) will expose you to things (even beyond GSAP) that 

 

  • you wouldn't naturally discover on your own
  • could save you a ton of time
  • will inspire you to take creative approaches to things.

I've learned a ridiculous amount from others on here.

In short, stick around. When you need GSAP help just let us know.

 

Carl

  • Like 1
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.
×