Tweening path opacity

[7linternational 0 Likes (Newbie)]

Trying to tween the opacity of a path like

gsap.to(play,{duration: 0.25, opacity:0, delay: 0.20})

but the path won't disappear for some reason.

 

I also tried via `#play_btn`

See the Pen OJZeQZL by 7linternational (@7linternational) on CodePen

[mvaneijgen 2,464 Likes (Superhero)]

Any particular reason you where using a really old version of GSAP? We're currently at version 3.11.3 and you are loading version 1.18.0 (/cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js). You're also using the new an old syntax randomly and that is where I think your issue lies. 

 

I've cleaned up your code some what, by only using the new syntax and loaded the latest version of GSAP and MorphSVG. If you need help migrating check out this post. 

 

 

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

 

[7linternational 0 Likes (Newbie)]

Thanks, no particular reason, it probably was like this when I forked it. Thanks!

Any particular reason why the circle with the pause Rect is out of position? Is the animation overriding styles?

[mvaneijgen 2,464 Likes (Superhero)]

I have no idea. I've changed the pause .to() animation to .from() and removed your CSS and it seem to have fixed the issue.   

 

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