opacity/visibility/autoalpha not being set once app is built

[b0dg4n]

I believe this might be a bit weird, but here goes...

 

Got a react app boilerplated with create-react-app. Got a svg with a bunch on paths that I want animated using drawsvg.

 

Added `visibility: hidden` to all paths initially to avoid that initial flash.  Then ran `TweenLite.set('#paths path', {visibility:'visible'})` after componentDidMount to make the paths visible and then `tl.fromTo('#paths path', 2, {drawSVG: '0%'}, {drawSVG: '100%', ease: Power2.easeInOut})` to animate the paths.

 

Running this locally, works perfectly fine. However, as soon as I build and serve the app, this simply does not do anything. Inspecting the paths in the build version, you can see the `stroke-dashoffset` and `stroke-dasharray` changing, but visibility is not changed.

 

I tried then removing `visibility: hidden` from the css and replaced it with `opacity: 0` then tried setting opacity to 1 with TweenLite.set, as well as with `autoAlpha` - exactly the same result - paths are not visible.

[b0dg4n]

I actually copied over the example from this codepen 

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

 and I got the same result - the paths are not visible once the app is built

[b0dg4n]

so...another update - I create a brand new app with `create-react-app` and added the code from the codepen above - nothing else - same result: when running locally, all is fine, it renders and animates...once built, the svg remains hidden - visibility is not changed

[Rodrigo]

Hey Bogdan,

 

Perhaps this is about Tree Shaking in the production mode of Create React App, when it ejects all the code. Please see this and try creating a reference for the plugin to se if that helps, scroll a little bit and you'll see the tree shaking part):

 

https://greensock.com/docs/NPMUsage

 

Also normally when I hide stuff at runtime and then show them using GSAP (since there is no other way actually  ) I use autoAlpha, which is a combination of visibility plus opacity, so I start with this in the CSS:
 

.my-class {
  opacity: 0;
  visibility: hidden;
}

 

And then:

 

TweenLite.set(myElement, { autoAlpha: 1 });

 

Give tree shaking a try and let us know how it goes.

 

Happy Tweening!!

[b0dg4n]

@Rodrigo damn it - that was it! I remember reading that part when looking into the docs, but simply did not realize what it was about...this makes sense now.

Thanks!

[Rodrigo]

No problem, glad you solve it.

 

Happy Tweening!!!