animation

[lauraddr]

Hello everyone 🙂

I need your help with an animation I'm trying to do, I'm having trouble understanding it. 
I would like to launch a path that I will create, which will be triggered at the end of my first timeline. 

can you please enlighten me 🥺

 

See the Pen MWbWMaq by 134Laura (@134Laura) on CodePen

[GreenSock]

I'm struggling to understand the question. I glanced at your CodePen and noticed the following problems:

• You're loading two completely different (and incompatible) versions of GSAP. 3.6.0 (good), and also a very old TweenMax (version 2.x). Definitely only load the latest version. 
• You're declaring the same variable multiple times (tl)
• You reference timeline.play(); but you never declared a "timeline" variable. Did you mean "tl"?
• You're using the old syntax. I'd strongly recommend updating to the latest v3 syntax because it's much more concise and intuitive. You never need TweenMax, TimelineMax, TweenLite, or TimelineLite again - those are all consolidated into a single "gsap" object. See
• I don't know what you're trying to do with this line, but it's highly inefficient and probably unnecessary: 

  lottieControl.to({ frame: 0 }, 1, {
    onUpdate: function () {
      lottieAnimation.play();
    }
  });

If you still need some help, please provide more information because I still don't really know what you're trying to do. 

[lauraddr]

Thank you for your response, 
I'm sorry for the codepen link I provided there was a recording that shouldn't have taken place that's why you must have misunderstood...

In fact I would like to be able to control body movin with the help of gsap.
my goal would be to launch my animation using a timeline. 

I hope that I can express myself better. 

 

See the Pen ExNarav by 134Laura (@134Laura) on CodePen

[ZachSaucier]

Hey lauraddr. A few things:

• You're using the old GSAP syntax. We highly recommend using GSAP 3 the sleeker GSAP 3 syntax. Upgrading is easy!
• If you put the function to play your Lottie animation inside of a tween's onUpdate, that function will be called every tick that the animation fires (which is a lot). What I think you want to do instead is either:
  • Use the onComplete callback instead. That will fire your animation once the tween finishes.
  • .call() the function instead.

Here's an example using .call():

See the Pen XWNJQBK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: This sort of animation that you're using Lottie for is easy to create using DrawSVG. We highly recommend it!  

[MachoGwapito]

Do you guys have any plan on making a lottie equivalent plugin? Lottie is cool and all but i think you guys can do a lot better imo.

[ZachSaucier]

Hey @macho238 and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

We have no plans of making a Lottie-like equivalent as the JavaScript version of GSAP gives us more than enough to be working on. Plus Lottie does a great job for what it is. You can even use Lottie and GSAP in combination when appropriate.

[GreenSock]

Yeah, in order to do something like Lottie, we'd have to learn all the ins and outs of After Effects which no small undertaking. And then we'd also be dependent on Adobe - if they release an update that changes things, it could totally break the plugin. We prefer to focus our energy on the open web (pure JS) as much as possible.

 

I'm honored that you think we'd do a great job with something like that though.