Hi everyone,
I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is.
What I tried:
When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused?
Timeline.progress has not worked,
but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init).
Any help would be hugely appreciated.
Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug.
$playButton.each(function (index, elem) {
$this = $(this);
var $circle = $this.find('#play-icon__circle');
var $caret = $this.find('#play-icon__caret');
TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1});
TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"});
var playButtonTimeline = new TimelineMax({paused: true});
playButtonTimeline
.fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut})
.set($circle, {rotationX: -180})
.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})
.to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4');
$this
.mouseenter(function () {
if(playButtonTimeline.isActive()){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
playButtonTimeline.play(0);
})
.mouseleave(function () {
if(playButtonTimeline.isActive()){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
playButtonTimeline.reverse(0);
});
});