Jump to content
GreenSock

MisterBrownZA

GSAP and external plugins

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 
I'm "converting" to GSAP, and I just can't seem to find anything regarding external use in any of the documentation.
 
Please visit www.duwaynebrown.com to see what I have now.
 
Since I don't see "typewriter" plugin under the tweens, I'd like to know if I would be able to create an instance in the timeline where it would call the typewriter() function ?
 
Also, the h2, how would I "convert" that to tweening ?
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

If you are asking how to use a jQuery typewriter plugin or effect with GSAP, no, we don't support that.

 

You can use our TextPlugin to achieve something very similar.

 

 

Check out this codepen here:

http://codepen.io/GreenSock/pen/e86dfc30824e7eeb42cc0b0b57bd0e36

 

For advanced character splitting (words, lines, chars) our SplitText tool is really the way to go:

http://api.greensock.com/js/com/greensock/utils/SplitText.html

 

demos coming soon.

 

SplitText is a bonus tool for Club GreenSock members.

  • Like 1
Link to comment
Share on other sites

Thanks Carl!

 

I managed to code something that's closer to what I was doing with typewriter, however your codepen example has something I haven't seen before.

 

What does the "-=0.95" serve as ?

 

It seems being a club member sure has its benefits, ehh.

 

Either way, thanks for the help!

Link to comment
Share on other sites

the "-=0.95" means "insert this tween 0.95 seconds before the current end of the timeline." To learn more about the position parameter:

 

Check out this video here: http://www.greensock.com/sequence-video/

Read the TimelineLite docs description of the to() method (the position parameter is used in many of the TimelineLite/Max methods)

Link to comment
Share on other sites

Hi Carl,

 

Thanks for the explanation. That video sure was useful.

 

I would like to know from you... I've got two timelines for the separate animations (the timeline one, and the "wavy text" one), and I would like to somehow nest/attach them to a "main timeline", so that I can use one control to control all the timelines. Please see my sourcecode:

$("#typewriter").lettering();
	// $("#myCanvasContainer").show("fade",1000);

	var tltypewriter = new TimelineMax(/*{paused:true}*/);
	var iIter = 0;
	var iTimeScale = 2;
	var iCharDelay = 0.4 / iTimeScale;
	$("#typewriter span").each(function(){
		iIter++;
		tltypewriter.fromTo("#typewriter span.char14", iCharDelay, {display:"inline-block"}, {display:"none"});
		tltypewriter.fromTo("#typewriter span.char"+iIter, iCharDelay, {display:"none"}, {display:"inline"});
	});
	tltypewriter.fromTo("#typewriter span.char14", 0.5, {display:"inline-block"}, {display:"none"});
	
	$(".tlt").lettering();
	var tlletter = new TimelineMax(/*{paused:true}*/);
	var iIter = 0;
	var iTimeScale = 2;
	var iCharDelay = 0.4 / iTimeScale;
	$(".tlt span").each(function(){
		iIter++;
		tlletter.from(".tlt span.char"+iIter, iCharDelay, {opacity:0, top:"-20"}, "-=0.1");	
	});

Just to re-iterate, when I click on a button, I would like to be able to control one timeline instead of trying to operate them individually.

 

Kind Regards,

 

Edit:

This seems to be another evident problem:

 

 

$("#typewriter").click(function() { 
tltypewriter.reverse(); 
tlletter.reverse(); 
$("#typewriter span.char14").animate({opacity:0},3000); 
//Insert other animations here 

//restart the animation to restore back to normal 
tltypewriter.play();
tlletter.play(); });
}

 

This is what I'd like to achieve:

    	var tlMain = new TimeLineMax({paused:true});
	  	tlMain.append(tltypewriter.reverse());
	  	tlMain.append(tlletter.reverse());
	  	tlMain.append($("#typewriter span.char14").animate({opacity:0},3000));
	  	tlMain.append(tltypewriter.play());
	  	tlMain(tlletter.play());

	  	tlMain.play();
Link to comment
Share on other sites

Sorry for being a drag... I managed to get to this...

   $("#typewriter").click(function() {
    	clearTimeout(timeStart);
    	var iProgress = tltypewriter.time() * 1000;
    	// alert(iProgress);
    	tltypewriter.reverse();
    	tlletter.reverse();
    	$("#typewriter span.char14").animate({opacity:0},3000);
    	$("#myCanvasContainer").hide("fade",3000);
    	var timeClick = setTimeout(function(){
    		tltypewriter.restart(); 
    		tlletter.restart(); 
    		var timeStart = setTimeout(function(){$("#typewriter span.char14").hide("fade",3000); $("#myCanvasContainer").show("fade",3000)},6000);
    	},iProgress);
    });

It seems to respond the way I would like it to, but when controlling more than just 2 timelines, I think this sure would be an awesome feature...

 

edit : For some reason I can't get the underscore ("_") to show when I restart the timeline... any idea's ? 

Edited by MisterBrownZA
Link to comment
Share on other sites

here is a look at the preferred way to nest timelines inside another timeline using the add() method:

 

http://codepen.io/GreenSock/pen/8c621324714caeedcb45ee83aaf99793

 

I'd advise you not to get in the habit of using 

timeline.append(someOtherTimeline.play())
timeline.append(someOtherTimeline.reverse())

That code attempts to add the same timeline at 2 different locations in the parent timeline which is impossible to do. A timeline can only have 1 parent timeline at a given time and can only be in one place at a time. 

Link to comment
Share on other sites

Thanks Carl,

 

You're helpful as always.

 

Would you then advise to create multiple "main" timelines, and never "recycle" currently used timelines as rseources/children..?

 

Edit:

 

Alright, so I tried implementing the code.

 

It seems that when I try to implement the anim_main timeline, it stops listening for my click events.

 

Please see below:

        anim_Start = new TimeLineMax();
	anim_Start.add(tltypewriter);
	anim_Start.add(tlletter);

$("").click(function() {
anim_Start.reverse();
});

In reality, we're not trying to add new elements to the anim_Main timeline, we're just looking to control it as per normal. Think of the other two timelines as if they were tweens.

 

Would it be wise to create 2x tltypewriter, tlletter and put them in anim_Main, and anim_Main_reverse respectively ?

 

edit2: 

 

In my attempt to try and get codepen to work, I may have broken your code. If you don't mind, would you please do it again.

Link to comment
Share on other sites

Hi Carl,

 

I hope you can help me.

 

I've been spending more and more time on greensock. Which is great. Although, I've reached a point where the animations aren't very... effective.

 

If I add the files I'm working on under a sub directory of my main website (www.duwaynebrown.com), would you be able to help me out and streamline a few things.

 

Maybe I can learn a thing or two :)

 

Have a nice day!

 

PM your response...

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