Jump to content
GreenSock

rimedtades

Code Review Pls

Recommended Posts

I made the move I wanted but I think too much code and doesn't seem very flexible.

How can i make it shorter and more flexible? 

See the Pen Rwjjzar by rimedtades (@rimedtades) on CodePen

  • Like 1
Link to comment
Share on other sites

this was an interesting challenge.

typically I would use a loop and just create a different animation for odd and even circles.

 

I could probably throw that together later if you need.

 

however, this can also be done using keyframes and some gsap.utils.wrap() special powers

 

See the Pen PoOOrRK?editors=0010 by snorkltv (@snorkltv) on CodePen

 

check out

 

and

 

Offical Docs for wrap()

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

 

  • Like 3
Link to comment
Share on other sites

When you see yourself repeating code, that's a good sign you should start looking at using functions to do the heavy lifting for you.

 

To get you started, you can have function that you pass in the target and y values, and just rinse and repeat.

 

createAnimation(".cls-1", -1, 2, 0);
createAnimation(".cls-2", 1, -2, 0);
...


function createAnimation(target, y1, y2, y3) {
  var tl = gsap.timeline({repeat: -1, repeatDelay: 0});
  tl.to(target, {y: y1, duration:1, ease: "none"});
  tl.to(target, {y: y2, duration:1, ease: "none"});
  tl.to(target, {y: y3, duration:1, ease: "none"});
  return tl;
}

 

That code can definitely be improved even more, like using loops, but I'm not trying to overwhelm you right now. 😉

 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, Carl said:

however, this can also be done using keyframes and some gsap.utils.wrap() special powers

 

Love it! Always forget about keyframes 🤦‍♂️

  • Like 2
Link to comment
Share on other sites

thanks, @OSUblake it was a momentary lapse of ignorance for me 😁  I'm just starting to recognize where keyframes may work better.

 

@rimedtades the example I gave you is probably not the easiest for a beginner to grasp or to intuitively reach for. I was just going to the most concise version possible. 

 

A more practical progression for you would probably be 

 

1: 2 timelines that use complex selectors (to animate multiple targets per tween)

See the Pen LYOOwxy?editors=0010 by snorkltv (@snorkltv) on CodePen

 

2: build a loop that alternates between those 2 timelines for odd and even circles

See the Pen ExbbqXg?editors=0010 by snorkltv (@snorkltv) on CodePen

 

3: do something like Blake suggested for lots of flexibility 👍

 

4: do something like my suggestions above for code brevity

 

As you can see there are loads of options. Experiment and use what you are comfortable with. Blake and I have been doing this stuff for many, many years and still find different ways to do things.

 

 

  • Like 3
Link to comment
Share on other sites

Well done @Carl👏

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