Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
melissa

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

Recommended Posts

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);
			});
	});
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

More reading about fromTo() tweens;

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/fromTo/

 

Hopefully that helps a bit. 

 

Happy tweening and welcome aboard.

:)

  • Like 3
Link to comment
Share on other sites

Hi everyone!
 
Thanks a lot for the help - CodePen video is super useful. Will use it going forwards :)
 
As for the immediateRender: false, that fixed my problem! Thanks so much, @PointC

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