Jump to content
Search Community

Questions about tween in a timeline

shelune test
Moderator Tag

Go to solution Solved by shelune,

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

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

Link to comment
Share on other sites

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!

:) 

Link to comment
Share on other sites

  • Solution

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 :D

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

:)

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
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...