Jump to content
Search Community

How to not have stop time between 2 animations ?

kri2sis test
Moderator Tag

Go to solution Solved by Jonathan,

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

  • Solution

Hello kris2sis,

 

Is this what you wanted?

 

See the Pen wsbnh by jonathan (@jonathan) on CodePen

 

Looks like your codepen was missing the jQuery library and including GSAP in the JS panel (located when you click the gear icon next to the JS panel text)

 

I also added a label to the first two tweens so they animate at the same time.

 

Is this what you wanted, the SplitText and loader animation to play at the same time?

 

resource link for more info on labels: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

:)

  • Like 1
Link to comment
Share on other sites

ohhhhhhhhhhhhhhhhhhhhh  :-o

Can I call you God ?  :-P

 

I was looking for an issue and I saw this thing (labels) but I was far to htink it could be necessary for my issue....

 

Thank you again, I learn more and more (it's hard to learn in an other langage alone...)

 

Thank you very much... I'll try to make my mind growing up  :-P

Link to comment
Share on other sites

No worries kri2sis.. i only know one language, so your doing great! Just keep the GSAP Docs in a bookmark for quick reference.

 

GSAP JS Documentation: TweenMax, TweenLite, TimelineMax, TimelineLite, Plugins

 

Also here is a helpful video tut by GreenSock on Sequencing Tweens in TimelineLite / TimelineMax:

 

http://greensock.com/sequence-video

 

:)

  • Like 2
Link to comment
Share on other sites

Ok thnks...

Just a final question (for the moment eyh eyh) :

 

I've tried my animation on my website... it's cool but after anim, I can't access the web page. I mean, i can't clic or do anything with mouse...

 

I finished scrpt by : TweenMax.kill(); but nothing

 

Is there a tip to that reaction ?

 

please, thanks

Link to comment
Share on other sites

Hi,

 

Nice animation, pretty sweet.

 

Maybe you're not removing your preloader wrapper after everything is loaded or perhaps there's an error during preload.

 

If you're using jQuery's ajax to preload, is a good idea to use the deferred object in order to complete the preloading event no matter what. If you have errors during the preload (that could be caused by the server or something outside your code) and non-vital parts of your site are not loaded, you can still progress and complete the preload.

 

Here's a link to jQuery's deferred object docs:

 

http://api.jquery.com/category/deferred-object/

 

Finally, if you could create a reduced codepen that illustrates the issue would be very helpful.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hi and sorry to answer so late.

 here is a piece of the animation code :

tl.to(tableLoder,2,{rotation:360,repeat:1,opacity:1,delay:0},'here')
	.staggerFrom(spans, 0.3,{autoAlpha:0,rotationX:-90,rotationY:360},0.1,'here')
	.staggerTo([tableLoder,wrapper],2,{opacity:0,zIndex:0},0.2);
	Tweenmax.kill();
	

Indeed, I place the Zindex to "0", 'cause it was Over the rest. 

Now I think I got to work on something I never had understood : cookies.

Animation appear each time a page is loaded...

That's right ?

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.
×
×
  • Create New...