Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lucasleibs

First GSAP Project(Tips!)

Recommended Posts

Hi Guys, 

First post here and first time working with GSAP in production(Fresh Junior Dev). My task is to get that green circle to animate to the next step down the path when the user selects the stepper on the right, and show some animations to the side when it reaches each step. I have worked with GSAP to make some scroll scrubs and loading animations and thats about it. Does anyone have some suggestions on how to tackle this. Only way I can think of doing it would be with react state( 1,2,3 etc...) and render different animations with a switch statement. Any ideas would be helpful!

 

Thank you!

Screen Shot 2021-07-08 at 4.22.22 PM.png

Link to comment
Share on other sites

also working with svg files here.

Link to comment
Share on other sites

Welcome aboard, @lucasleibs!

 

I'm not familiar with "react state(1,2,3 etc...)" but this sounds very doable with GSAP + vanilla JS. Some of it really depends on details like if the user clicks several steps ahead, does the green circle need to travel along the curved path or do you just want it to go straight to the new position? Anything is possible, but if you need to follow the path, you'll need MotionPathPlugin. 

 

It's beyond the scope of help we provide in these forums to write up a whole tutorial or build it for you (we try to stay focused on GSAP-specific questions), but the way I'd approach this is:

  1. Figure out the key data you'll need to go to each step, like a) the destination element, b) the animation that should happen when it arrives, c) maybe the progress value of where that element is on the MotionPath animation. 
  2. Organize that data, like in an Array:
    const animationData = [
      {element: "#circle2", progress: 0.21, onArrive: () => { ... }},
      {element: "#circle3", progress: 0.34, onArrive: () => { ... }}
    ];

     

  3. Then I'd write code around that so when the user clicks the second dot on the right side, that correlates to the 2nd element in the Array, so it can easily fire off an animation accordingly. 

I hope that helps! If you still need assistance, please provide a minimal demo. It doesn't need to be pretty - it should only be the absolutely essential bare-bones parts that illustrate the general concept. 

 

Good luck!

  • Like 4
Link to comment
Share on other sites

Hi, I think Jack's advice ist brillant as almost always. Especially if you need it to be flexibel, responsive and the circle has to be moved along the path etc.

 

If  you would in fact only need what you described an click on one element (the stepper) moves another element to a certain position (and scale) as a beginner I would probably try it by going a less elegant way, like writing 5 functions like 

function go2Pos1(){
  gsap.to('#cricle', {x: 300, y: 200, scale: 1.2 ....});
}
function go2Pos2(){
  gsap.to('#cricle', {x: 350, y: 150, scale: 1.5 ....});
}
etc...

document.getElementById('#stepper1').addEventListener('click', go2pos1);
document.getElementById('#stepper2').addEventListener('click', go2pos2);

....

And I'd attach those functions top the clickEvent of the steppers (and probably to the target zones).

 

Not a very elegant war to do it, no path following etc. but easy to write, and debug. You could go for arrays and loops but it may be easier to individualize the animations manually as a starting project. In the end it depends a lot on your general skill level and the number of steps you have...

If for example you have to scroll the background  to go to positions deeper down you could simply add: 

 

function go2Pos1(){
  gsap.to('#cricle', {x: 300, y: 200, scale: 1.2 ....});
  gsap.to('#container', {scrollTo: {y: "#target1", offsetY: 70} ....});
}

 

(Don't forget to load the scrollTo Plugin) in that case.

 

I know, not very elegant but as a starting point / playground to get a feel for gsap animation basic it might help.

 

 

 

  • Like 3
Link to comment
Share on other sites

@mikel @iDad5 @GreenSock Thank you everyone for those ideas! You guys gave me starting points to begin attacking it! Much, much appreciated!!

  • Like 2
Link to comment
Share on other sites

 

Because it is fun ...

 

See the Pen PomGKON by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 4
Link to comment
Share on other sites

This is great Mikel! Going above and beyond as always.

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

×