Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axe-z

Wish you had more tutorials, Gsap seems great, but there is alot that is not covered.

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

I will keep this short english is not my main language, so when it comes to reading the docs, it's not always a walk in the park. Your tutorials are fine, but they only cover the very very basic stuff. Wish you had more inter-advanced tutorials, so that we could easily avoid the frustrations. If not videos, then create a series of real scenarios in several codepen, Coders like code, less text. I think this would be easier for everyone, and is more ingaging . I ve got so many questions, on updating values for tweens, scope, etc... That could be answered quickly by exemples rather then trying to read in a different language then mine. Sorry for my poor english. I see so much potential and speed in gsap, and animations are much easier with it then css, i'm a bit frustrated with the learning curve and wish I could see the potential , rather then reading about it. Still, I love what you guys and girls have done .

  • Like 2
Link to comment
Share on other sites

Hi axe-z :)

 

Welcome to the GreenSock forums.

 

If you like to learn be reviewing code, I'd suggest taking a look at the GreenSock Collections on CodePen.

 

http://codepen.io/GreenSock/collections/popular/

 

As far as more advanced demos, there are a lot of talented people to follow on CodePen. Please take a look at some of the best:

 

Blake Bowen

http://codepen.io/osublake/

 

Sir Jonathan Marzullo

http://codepen.io/jonathan/

 

Chris Gannon

http://codepen.io/chrisgannon/

 

Sarah Drasner

http://codepen.io/sdras/

 

Diaco

http://codepen.io/MAW/

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

I did, videos are all baby steps, I ve looked at most codepen, but half of the method you have on timelineMax are never in the exemples / codepen you've given me. Thanks anyway, I will try the only way left, create codepens with questions as I go along. There is so many many different approach regarding scope, returning tl, functions vs named tweens, I 'm trying to find the most efficiante way to work, and knowing what each method does( and how to use them ) is the key to working well.  Thanks for the quick response. I've even bought a course on tuts plus ... but it was very very beginner, waste of time. I was working on an element that has an hover animation ( burger menu ) , but an other animation if you clicked on it, I want to loose the hover effect when the click is done, without having to put flags everywhere , because it is not conveniante , but I could not understand how the kill() works, tried to change the pointerEvents, nothing worked. And none of the links you gave talks about it. So i ll create one soon (codepen). Sorry for my poor english, once again it's late , goodnight.

Link to comment
Share on other sites

HI Axe,

 

Thanks for the suggestions. Its very difficult to guess what people are struggling with. It takes considerable time to put these videos together so we have been focusing on making sure beginners have enough info to get started. We're always interested in ideas for advanced courses so please feel free to let us know. Your suggestions so far have given me some ideas. Thanks.

  • Like 2
Link to comment
Share on other sites

Hello axe-z

 

In my opinion the best way to learn GSAP is to read the GSAP Docs and then apply what is inside them in codepen.

 

http://greensock.com/docs/#/HTML5/

 

But the GSAP Docs are the first step in understanding what is possible with GSAP. The search function is very helpful on that page, When i do a search for the word kill i get 13 results all showing the various ways the kill methods used in GSAP.

 

GSAP is very customizable and adaptable so if you have a specific question we are more than happy help you!

 

Thank you for your suggestion and Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

Believe me I did, I do not want to sound like an ungreatfull jerk, I really like the tweaning, the speed, the consistance. It's just that for people not fluant in english, reading the docs is not always as clear as it is probably for you. English is a third language for me you see. And again, it's a suggestion that's all, Im not in gsap for pure animation ( I am not trying to get a duck to follow a path for exemple), but more like most of the demo site you have here that use gsap, I want to use gsap to get consistancy and speed on more browser. 

  • Like 1
Link to comment
Share on other sites

Yeah but ScrollMagic is only one plugin and just is used for scroll management. It still uses and needs GSAP as its main animation platform. 

 

GSAP has all of its main animation classes:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TweenMax

And all of the additional plugins:

  • AttrPlugin
  • BezierPlugin
  • ColorPropsPlugin
  • CSSPlugin
  • CSSRulePlugin
  • DirectionalRotationPlugin
  • Draggable Plugin
  • DrawSVGPlugin
  • EaselPlugin
  • ModifiersPlugin
  • MorphSVGPlugin
  • Physics2DPlugin
  • PhysicsPropsPlugin
  • RaphaelPlugin
  • RoundPropsPlugin
  • ScrambleTextPlugin
  • ScrollToPlugin
  • TextPlugin
  • ThrowPropsPlugin
  • TweenPlugin
  • VelocityTracker

As you can see there is no comparing one plugin to all the that is GSAP ScrollMagic is straight forward for scrolling only, Whereas GSAP has massive amount of methods, objects and properties that make it possible to animate any numerical object or property for CSS, Canvas, WebGL, SVG, DOM, HTML, and JavaScript.

 

i understand what you mean ;), but that is why a lot of users use codepen and study the hundreds of GSAP examples on there.

 

:)

  • Like 1
Link to comment
Share on other sites

I've made a really barebones codepen, 

 

this this is my question then: How do I "kill" the hover animation, once I've clicked on it, and bring it back ( hover animation ) only when wanted. 

 

See the Pen gwZVXA by axe-z (@axe-z) on CodePen

Link to comment
Share on other sites

yes but tweenMax/timelineMax at least should be demoed in all ways it can. 

Link to comment
Share on other sites

have a look at all the codepens, at least half of GSAP/TweenMax is not in there, not even talking about all your other great plugins. Just saying.. I'll stop on this topic, I've made all my suggestions for you, it's in your hands now. the last one would be to translate the docs. 

Link to comment
Share on other sites

hmm, I don't really understand. Right now it appears you are pausing the animation and that seems like a good approach. My guess is you could just resume() or play() it again later.

 

When you kill() an animation you are saying that it should literally be destroyed, never to be used again.

 

I'm not sure what you mean by "bring it back only when wanted". 

 

It might help us if you explained what should visually happen at each step of user interaction like:

 

  1. rollover dark grey element
  2. dark grey element grows
  3. click on dark grey element to make it stop growing and move over to the right

it seems all of that works ok. what are the next steps you are having trouble with?

Link to comment
Share on other sites

I want that the hover animations stop once the click animation is started, or reversed ( there is also a dblclick event that reverse the click animation ) I only want the hover animation to work, when it s back at the starting point. So no hover animations unless before the clicks event, or if the rectangle is back to it s original position. Like I said, sorry for my poor english. 

 

AND MANY THANKS FOR EVERYONES HELP.

Link to comment
Share on other sites

Ah. Ok. I think I understand more now. This little change should help a lot 

 

change:

if (flag === true) {
        rec.hover(function() {
            console.log(flag);
            tl.play();
        }, function() {
            tl.reverse();
        });
    }

 

to:

rec.hover(function() {
    if (flag === true) {
      console.log(flag);
      tl.play();
    }
  }, function() {
    if (flag === true) {
      tl.reverse();
    }
  });

http://codepen.io/GreenSock/pen/ALaBAK?editors=0010

 

 

In my version each time the user mouses over and out of the element it will check to see if flag is true. Your version only checked once to see if flag was true (which it was) and then said that every time the user mouses over and out it would do the different animations.

 

 

  • Like 1
Link to comment
Share on other sites

is there no way without using flags ? Also it is left on the hover state, and comes back at the end, or reverse, i ve ajusted my codepen to explain exactly what I mean. Is there a method, like kill() , that could be use instead of old time logic with IF statements? thanks!

Link to comment
Share on other sites

In my demo there is no hover animation after the user clicks.

 

I was only using old time conditional logic because it was in your demo already.

 

I suspect another approach would be to REMOVE the event listeners for hover when you click and then put an onComplete callback on the animation that you reverse when you double-click that will re-apply those listeners. In essence you will deactivate and re-activate the buttons. I'm not sure this is any cleaner that simple flag an conditional statement though.

 

This all falls into application logic and how you use jQuery. The GSAP API is all about animation. We really don't have anything that natively is going to handle the application logic of enabling and disabling different animations based on specific orders of user interatctions.

  • Like 1
Link to comment
Share on other sites

Thanks, I was hoping that tweens could be killed() or at least stoped?, there are several method in the docs,  I really do not understand why it does not work, As for the kill methods,  I have not seen any demos or explanations that fitted a timeline situation. Your codepen is not dooing what I hopped and explained , first, it's stuck on the hover result, then the hover is back if you dlbclick. So there is no way, to kill tweens if its on the same selection?  Removing listeners will create issues .  Well, i ll try to find a way around this. thanks again. 

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