Lottie-web: My HTML preview is not playing back as it should

[clincdrew]

Tell us about your environment

• Browser and Browser Version:
  

• After Effects Version:
  CC2018
  What did you do? Please explain the steps you took before you encountered the problem.

What did you expect to happen?
I expected my animation to play back as it does in After Effects
What actually happened? Please include as much _relevant_ detail as possible.
When I rendered it with Bodymovin, my HTML preview is not playing the same as it does in After Effects. It plays as it should at first, but the animation is supposed to reverse and my dashed lines do not animate. I didn't use time reverse layers..I just created new keyframes that make it go in reverse.

Please provide a download link to the After Effects file that demonstrates the problem.

[bodymovin]

hi, can you share the .aep?

[clincdrew]

Hi hernan, I believe I figured it out. Trim paths was giving me some grief.
Thanks!

On Thursday, August 16, 2018, hernan [e-mail] wrote:

hi, can you share the .aep?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/1200#issuecomment-413709499,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Aoeo_lbuFHWPaln-MKJAL5d-4bf-Dqi2ks5uRfnHgaJpZM4WAL_e
.

--
[image: photo]
Drew WILLIAMS Multimedia Producer
*Clinc, Inc. * | clinc.com

[email protected] | 1-989-493-4960
206 E. Huron St.
https://maps.google.com/?q=206+E.+Huron+St.Ann+Arbor,+MI+48104&entry=gmail&source=g
Ann Arbor, MI 48104
https://maps.google.com/?q=206+E.+Huron+St.Ann+Arbor,+MI+48104&entry=gmail&source=g

http://twitter.com/ClincAI?lang=en
http://www.linkedin.com/company/10865993/ http://facebook.com/clincAI/

[ahainen]

@clincdrew mind if I ask specifically with trim paths what happened? I'm trying to do multiple trim paths on a single path and not working so far.

[clincdrew]

Hello! Trim paths was just making my animation play back funky. I've
noticed that any add on to shape layers (trim paths, wiggle paths, etc.)
will not work. Which is a GIANT bummer. I ended up having my designer make
me .png files that I then just did scale changes, which gave me a similar
effect as trim paths.

On Wed, Sep 19, 2018 at 10:13 AM ahainen [e-mail] wrote:

@clincdrew https://github.com/clincdrew mind if I ask specifically with
trim paths what happened? I'm trying to do multiple trim paths on a single
path and not working so far.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/1200#issuecomment-422819708,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Aoeo_lCBJ2HrIJJpPM9_GhxSqW-XvmAXks5uclEMgaJpZM4WAL_e
.

--
[image: photo]
Drew WILLIAMS Multimedia Producer
*Clinc, Inc. * | clinc.com

[email protected] | 1-989-493-4960
206 E. Huron St.
https://maps.google.com/?q=206+E.+Huron+St.Ann+Arbor,+MI+48104&entry=gmail&source=g
Ann Arbor, MI 48104
https://maps.google.com/?q=206+E.+Huron+St.Ann+Arbor,+MI+48104&entry=gmail&source=g

http://twitter.com/ClincAI?lang=en
http://www.linkedin.com/company/10865993/ http://facebook.com/clincAI/

[bodymovin]

@clincdrew trim paths should work, at least on most cases.
Can you share the .aep so I can take a look?

[ahainen]

Crap, hmm. Yeah, watching the first video on https://airbnb.design/lottie/ really set me up for wanting to use Trim Paths nonstop :/ Grabbing a link to my .aep that I was having trouble with as well

[ahainen]

.aep, demo.html, and screenshot here: https://www.dropbox.com/sh/b80wqnfipql4xfk/AAClkY285vR82f2x0KKMY0ena?dl=0

[bodymovin]

lottie.zip
I think it's fixed.
Can you give it a try?

[ahainen]

lottie.zip
I think it's fixed.
Can you give it a try?

Sorry if I'm being thick - that just gave me a lottie.js. Trying that in the browser, in the AE player, no luck. What should I be doing with that lottie.js file? Thanks

[ahainen]

Furthermore, can you tell me what you did/changed? Is this an update to the plugin or to the source files I posted?

[bodymovin]

It's the updated player.
I fixed the trim path modifier which wasn't interpreting open paths correctly when multiple trims were concatenated.

[ahainen]

It's the updated player.
I fixed the trim path modifier which wasn't interpreting open paths correctly when multiple trims were concatenated.

Got it, will try and use today, will post results. Much appreciated

[ahainen]

Update: I've been using the "Standalone" and "Demo" options when exporting from AE, so trying to figure out how to use the player. Will post multiple trim paths result once I figure out

[ahainen]

Sorry, banging my head against the wall, trying to work from https://codepen.io/airnan/project/editor/ZeNONO but can't figure out what I'm supposed to do with this lottie.js file. It references boymovin.js on that page. When I export in AE, no matter what I do, I end up with demo.html or data.jason, not sure where or how to use lottie.js

[bodymovin]

@ahainen Not sure how familiar you are with web development, but you should load the js file as a script tag on your html page.
If you have no experience at all, can you get someone to help you on this?

[ahainen]

@ahainen Not sure how familiar you are with web development, but you should load the js file as a script tag on your html page.
If you have no experience at all, can you get someone to help you on this?

Where I'm at: https://youtu.be/YslTPnbIibw

[bodymovin]

@ahainen the lottiefiles.com site has an outdated player, so that's the reason it's not going to work.
I can share with you a full build of the AE extension (.zxp) so you can export the demo.html running with the latest player.
Does that work?

[ahainen]

That would be much appreciated, thank you - yeah that demo.html file has been my goto. Thanks so much

[bodymovin]

@ahainen
bodymovin.zip
Here it goes.
I had to rename the extension to .zip to share it in github. Rename it back to .zxp before installing

[ahainen]

@ahainen
bodymovin.zip
Here it goes.
I had to rename the extension to .zip to share it in github. Rename it back to .zxp before installing

Awesome, demo.html is working perfectly with multiple trim paths. Thanks so much, I really appreciate the help