drawSVG, part of SVG not rendering on init, fromTo seems to be breaking the timeline.

melissa · December 9, 2016

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);
			});
	});

Dipscom · December 9, 2016

Hi rsr,

Welcome to the forums!

A demo would be great, it really helps to have all the code in a live environment where we can edit and debug. You don't need to have a PRO account in CodePen to use GSAP, even test drive all the Premium plugins (although you already have access to the whole set).

Carl has a post with more details how to create a Pen.

Here's a video as well:

worth mentioning that you don't need to copy and past ALL of you html document into the Pen, just the bits inside the <body> tags that are relevant to you issue.

If you have any issues, just holler and we'll help you out.

Thanks!

PointC · December 9, 2016

Hi rsr

Welcome to the GreenSock forums.

I'd echo Dipscom's request for a demo so we can more easily troubleshoot for you.

Something to keep in mind - fromTo() tweens by default have immediateRender set to true. From the docs:

NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins.

Notifications

Messages

drawSVG, part of SVG not rendering on init, fromTo seems to be breaking the timeline.

Warning: Please note

Recommended Posts

melissa

Link to comment

Share on other sites

Dipscom

Link to comment

Share on other sites

PointC

Link to comment

Share on other sites

melissa

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members