[Questions about tween in a timeline]

Sorry about that.. I had your main timeline with paused: true and forgot to add play() at the end of your master timeline. This way you only play master timeline when tweens are created. Check my codepen again!

 

Thank you so much for helping me out! I've finalised the codepen, but this definitely appreciates some cleaning up.

[Questions about tween in a timeline]

Im looking into this right now to see what might be causing this, please standby

 

Ok you can try and give the left hand and right hand the same label and you if you want to offset the timing you can add a relative position

 

like this:

See the Pen NAkARp?editors=0010#0 by jonathan (@jonathan) on CodePen

.add(hoverHandLeft(), "hand")
.add(hoverHandRight(), "hand-=0.5");

You can find more about labels in the GSAP API docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

add() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

 

You can also add rotation:0.01 to make the translation of x and y more smooth inside your timelines within your various timeline functions.

 

Thank you so much! I'm reading the docs to at least understand what was wrong without the labels...

 

I added labels and it's working on my codepen but nothing shows on your codepen thou xD

[Questions about tween in a timeline]

Have you tried adding that repeat:-1 and yoyo:true on your individual tween in the timeline instead of the new Timeline cosnstructor of TimelineMax()

Yeah I did that yesterday (forgot to save it so in the pen it looked empty) but it didn't work. 

 

Now I added hoverHandLeft() and hoverHandRight() (line 400 & 417 respectively), each with yoyo: true and repeat: -1 inside. However, only the left hand is hovering.

[Questions about tween in a timeline]

Sure .. here are some helpful resource links on GSAP:

 

GSAP JS Jump Start Playground:

 

https://greensock.com/jump-start-js#from-tween

 

GSAP API Documentation:

 

http://greensock.com/docs/#/HTML5/

 

GreenSock Learning Youtube Channel

 

https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg

 

GSAP Blog:

 

http://greensock.com/blog/

 

Helpful links on CSS:

 

https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

 

if your animating with SVG then learning all you can about SVG:

 

https://developer.mozilla.org/en-US/docs/Web/SVG

http://tutorials.jenkov.com/svg/index.html

 

A strong foundation in CSS is very helpful so you understand the various CSS transforms 2D and or 3D CSS transforms to animate DOM elements. But keep in ind SVG can only use CSS 2D Transforms. SVG 2.0 which is not yet will support CSS 3D transforms.

 

Since GSAP is basically JavaScript learning some JavaScript is also beneficial:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

But if I was you i would dig into the GSAP Docs .. You can start with TweenMax to get familiar with the API to help understand what is possible:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

And we are always here to help in the GreenSock Forums

erm another question... after finishing all animation, I wanna animate the hands (same codepen) like's hovering up and down and keep them that way (one moving up left, one moving up right)

 

What would be the best way to implement that? I've tried using repeat: -1 with yoyo: true on a new timeline but it doesn't work. On line 400, I implemented function hoverHandLeft() and added it to the master timeline after everything. Am I doing it the wrong way cuz a while back, I could only repeat: -1 and yoyo: true on 1 element.

[Questions about tween in a timeline]

No worries Glad you got it working shelune!!!

 

Let us know if you have any other issues

This is not related to the topic but do you have some advice how to advance on learning GSAP (and web animation in general?)

 

I can do basic stuff but now I'm a bit lost how to progress properly.

[Questions about tween in a timeline]

Hello shelune, and Welcome to the GreenSock forum!

 

Thank you for the example, very helpful This might take some time since you have a lot of SVG and JS code to go through to try and narrow down this issue.

 

Have you tried to comment out everything but the elements clavicle() and eyes() are animating. And just try and animate the 2 functions you are having an issue with clavicle() and eyes(). That will help us as well so we can focus on just the trouble areas of your tweens and SVG code which has 1205 lines.

 

This way we can focus on just your issue since it will take awhile to debug all of your code.

 

Much appreciated, Thanks!

Well before I used the master timeline way, I just use a TimelineLite() and do everything on that timeline (fromTo, stagger, etc..) and everything worked. That's why I'm confused. 

 

But anyway I solved it. Turns out I shouldn't have named the function the same as the variable pointing to the SVG (very basic mistake indeed).

 

Thanks for your help

[Questions about tween in a timeline]

Hei,

 

I'm doing a basic timeline test, making functions to return a timeline and use a master timeline to organize them. Most of them seemingly work as I intended, but some refuse to, and block the tween after that as well.

 

Specifically here I have function clavicle() (line 337) to do a simple .to() and display the SVG out. It does not display anything when I run it and block the following tweens as well. Same with function eyes() (line 376)

 

I'm afraid I might have overlooked something since it's just basic stuff...

See the Pen dXEzgd by shelune (@shelune) on CodePen

[Synchronizing element and its path timing]

Bezier easing and a Bezier motion path are two totally different things. As it is, your ease value of [0,0,1,1] isn't doing anything. That's just a linear ease.

 

The problem is you're using CSS to do the job of the DrawSVGPlugin, which will calculate the correct length of the stroke. Also, your paths seem to be reversed so I flipped them using scaleX = -1.

See the Pen KrJaYp?editors=0010 by osublake (@osublake) on CodePen

 

Thank you so much for saving me tons of time looking though the docs

[Synchronizing element and its path timing]

I'm trying to make a kinda widget that has the icon rolling from one side to the other, with an arc filling the same path. So I tried Bezier Easing plugin to make it similar to the css cubic-bezier but there's still discrepancy

 

I wonder if there's a way to track the path and make the icon move along with the progress?

See the Pen jAvZNJ by shelune (@shelune) on CodePen

[Particle dissolving from text]

Hi and welcome to the GreenSock forums,

 

What you want to do is absolutely possible.

 

See the Pen jqzMRj by zadvorsky (@zadvorsky) on CodePen

See the Pen BKJQep by zadvorsky (@zadvorsky) on CodePen

 

However, those examples above use a 3D rendering engine called three.js in conjunction with GSAP. And there would be quite a bit of logic and custom coding you would have to do on top of that. 

 

Pixi.js handles 2D WebGL rendering on canvas which is also super fast and perhaps a bit easier to learn than three.js. Here are some examples to get the idea of the speed: http://www.pixijs.com/examples/ You can use Pixi with GSAP and get great results but you would still have to code your own particle engine.

 

If you are just starting out I would guess that both options above would be a very difficult path to go down right now. The good news is that GSAP is very easy to learn and once you have the basics down you can do amazing things very quickly. 

 

Thanks a lot for your advice. Well I did start out with a basic course on ihatetomatoes so I got the basics of tweening, fromto, timeline, etc... Do you have any recommendations what to take next to take closer steps to what I wanted to achieve up there? 

[Particle dissolving from text]

Hi guys, I'm really new to GSAP and web animation. Just wondering how this effect can be achieved? (the dissolving letters at the end)

I searched through a bunch of GSAP examples but most of them are creating particles or booming them up...