Jump to content
Search Community

Need help with optimising tweens animation

HiLuLiT test
Moderator Tag

Recommended Posts

Hey guys!
 So I created this demo of a gallery with GSAP & ScrollTrigger - took we a while but I got there :)
Now i'm trying to optimize my code, since I have a monstrous function for animating elements on the timeline, and I read that this is considered to be bad practice...  so maybe someone here could guide me how to create an effective loop? I tried it myself but it really messed things up...
I created a demo, would appreciate any help - really trying to get better at this :)

See the Pen BazMOdL by HiLuLiT (@HiLuLiT) on CodePen

  • Like 1
Link to comment
Share on other sites

  • HiLuLiT changed the title to Need help with optimising tweens animation

Hey HiLuLiT. Good work so far! And great choice of placeholder images 😺

 

In order to write this more efficiently, loops and functions are definitely the way to go. I highly recommend my article about animating efficiently as it covers the core concepts of how to write this sort of thing more efficiently. You might also want to move your .set() calls to just being in your CSS and possibly a snap to your ScrollTrigger to make sure the user ends up viewing content when they scroll.

 

How about you give my article a good, long read, work on trying to rewrite your code using loops and functions, and then post what you come up with? That way we can help you where you get stuck instead of just doing it all ourselves.

Link to comment
Share on other sites

@ZachSaucier This was a great read, I really learned a lot :)

I managed to reduce the Tweens code  but now i'm stuck when trying to loop..

I created this function called pageAnimation and I want it to be added to the timeline for as many pages as I have (since animations are repetitive for each page).
I created a new demo

See the Pen ZEOdjgz by HiLuLiT (@HiLuLiT) on CodePen

but there are errors ( so i'm not sure it will help),
I marked out the repetitive code, that's actually what i'm trying to create inside the function 

The error i'm getting is: 

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement].titles' is not a valid selector.


I'm also not sure this approach is the best direction regarding how to achieve this, but i'd love to hear your thoughts about that too...

Thanks!

Link to comment
Share on other sites

3 hours ago, HiLuLiT said:

The error i'm getting is: 


Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement].titles' is not a valid selector.

 

The error is telling you what's wrong :) You're attempting to append the string '.titles' to a DOM element which causes it to use the .toString() method. That's not a valid selector so the error is thrown. What you probably want to do instead is thumbs[i+1].querySelectorAll('.titles') or something like that as the article that I linked you to covers. I encourage you to spend more time going over the demos in the article and playing around with them so that you make sure that you're understanding how they work. 

 

Additionally your target of ['.thumb.five .titles', '.thumb.five .credits'] doesn't make much sense. Since you're already using query selector strings, you should be using this instead: '.thumb.five .titles, .thumb.five .credits'.

  • 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.
×
×
  • Create New...