Jump to content
GreenSock

b0dg4n

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

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :D ) 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!!

  • Like 5
Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

No problem, glad you solve it.

 

Happy Tweening!!!

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