Jump to content
Search Community

Animation after motion path complete

ezygaming test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hey Guys!

Faced a problem, I do not know how to solve, please help with advice.
I created animation using scroll trigger and motion path. The idea is to track scrolling using scroll trigger, then object move using motion path and at the end of the path additional animation start to work. Here is the small snippet: 

The problem is that when the path ends and the animation starts, it does not start smoothly, but at first with a jerk. Can someone please explain the best practices for tasks like this, thank you very much, have a nice day

const flow1 = gsap.fromTo('#coin', {
  y: -181.898 // End of the path coordinate 
}, {
  y: -212,
  yoyoEase: 'sine.inOut',
  repeat: -1,
  duration: 2.6
})

timeline.to('#coin', {
  opacity: 1,
  motionPath: {
    path: 'M292.801,16.834 C373.005,-181.943 489.752,-167.563 770.258,-181.898'
  },
  scrollTrigger: {
    trigger: '.big-form',
    start: 'top top',
    end: '+=300',
    scrub: 1,
    onUpdate: ({ progress }) => (progress === 1
      ? flow1.play()
      : flow1.pause())
  }
})

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help!

Link to comment
Share on other sites

@ezygaming I like to split out the animation to there respected elements and try not to animate the same object with multiple (separate) timelines. If that happens I'll just add a new element and animate that element instead.

 

That is what I did here. I gave your image a container and instead of animating the same element twice, I just animate the container. 

 

See the Pen ExLbrLV?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Thank you very much for your help, @mvaneijgen


I think I figured out what the problem is, but I still don't know how to solve it. The point is that the object should float only at the end of the animation, when progress === 1, now it floats on initialization step and when it comes to progress === 1, animation starts from the moment it ended at initialization step.

 

Is it possible to do like this:
1) Static position of the object
2) The object moves along the path
3) when it reaches the end, floating animation starts

 

Thank you!

Link to comment
Share on other sites

  • Solution

Of course! Just make sure the tween is paused initially and play it like you do now.

 

There are also a lot more callbacks you can use instead of onUpdate. There is onLeave for when you leave the ScrollTrigger and onEnterBack are the once that I would use instead of the if statement you have now in onUpdate, but this works, so you could also leave it as is.

See the Pen GRdOemP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

See the Pen GRdOemP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

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