Jump to content
Search Community

Where to learn beyond the basics for gsap?

harp30 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

There are many great sites made by gsap on this website.

 

i want to learn how to create such amazing experiences as well, I’m good with the basics but how to reach the next step with gsap animations? Where/how to learn more compelling animations?

 

Thank you.

Link to comment
Share on other sites

Some of the things that help me:

 

1) Answering questions in online forums - Like this one. Specially the questions that I have no idea what the person is asking for. There is a ton of people trying to achieve a ton of things that you (or I) don't even consider trying. That saves the time of coming up with such challenges.

2) Picking up ONE effect on a site that I like and ripping it off completely. Reverse engineering stuff is super time-consuming, hard but it pays off. At the start you won't be able to work much out but after a while you get better at it.

3) Reading other people's explanations on performance, concepts, effects. Also, reading on stuff of other disciplines, general animation, graphic design, light/colour, math, trigonometry, physics simulation, user behaviour and psicology.

4) Have someone who's got no clue about the web's limitation ask you to create something. The more unreasonable/demanding the better. This is the worst of all suggestions because it usually comes with a ton of stress and is bad for your health. But, there is no such thing as a 'special secret place' where you can learn all the amazing techniques that are out there. There are several online courses and books out there teaching a plethora of stuff.

 

Out of the suggestions above, the answering questions in forums is the best to start with. You don't even need to post your answer if you are not confident or if someone else has already done so but, just by coming up with your own version of that will be a great way to practice your knowledege.

  • Like 6
Link to comment
Share on other sites

Hello thank you!

 

im going to copy websites to learn, that’s a great idea.

 

ill build websites I see in gsap’s example page,

i will start with this one:

https://www.igoodi.eu/vision

 

i wanted to know if there’s a tutorial to help me get started with the scroll up effect? Is this a slider? And on scroll the slide changes? If so how to implement the mousewheel and how to set up the HTML/css?

 

thank you! Excited to show you what I come up with.

Link to comment
Share on other sites

Don't even know what you mean by scroll up effect... There are so many things these days triggered by scrolling around. There are a few threads here in the forums talking about scrolljacking and scroll-triggered effects. Have a quick search here and maybe something will show up.

 

As for copying the websites, make sure you are taking small bites at it. Otherwise the frustration of understanding something too complex might put you off.

  • Like 3
Link to comment
Share on other sites

These are not exactly sexy and are largely invisible, but are super important in making complex animations.

 

1. Mastering the Timeline with callbacks, multiple nested timelines, function-based values, counted and infinite loops, etc.

2. Responding to events like mouse over, click, hover, etc.

3. Writing modular code using variables, arrays and functions where you can change things back and forth. That goes hand in hand with writing clean and properly formatted code.

  • Like 2
Link to comment
Share on other sites

Thank you everyone for your detailed guidance.

 

Okay so for each page of animations, example: loading page, landing page, and etc. Each set of animations should have their own timeline objects? 

 

And I’ll start studying he topics for complex animations! Thank you all!

 

 

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