Jump to content
GreenSock

Rojan

SVG animation in the middle of timeline ruins the flow and timing in TweenMax

Go to solution Solved by Carl,

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 everyone,

 

This is my first post here.

 

First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for.

 

Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations.

 

The problem:

When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen.

 

1) The SVG elements animation order will be missed up and will not work correctly.

2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation.

 

I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up.

 

It would be really nice if you can figure this bug out and release a new bug-fix version.

 

I am currently working on a project and I really need this feature to word correctly.

 

Thanks in advance.

See the Pen LNejRy?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

It appears to be working correctly. I tried my best to explain how the position parameter is working in the comments.

I think you may need to re-think how are you are using negative relative values there.

 

Pay close attention to how the last animation of circleBLACK is actually starting at a time of 1.5 seconds.

 

If you need more help perhaps you can explain the exact order you want each element to animate and we can suggest a good way to do that.

 

update: demo http://codepen.io/GreenSock/pen/MyrmWJ?editors=0011

  • Like 5
Link to comment
Share on other sites

Hi Rojan  :)

 

Wecome to the GreenSock forums.

 

Carl has a great answer for you and I was coming to the same conclusion as he was posting. Everything looks like it's working correctly to me.

 

To add my two cents worth, I think this type of timeline is an excellent argument for adding labels. With all those negative offsets, it's easy to get lost in the woods pretty quickly. By using labels and tweening relative to those labels, it becomes easier to handle. 

tl.add("playCircles") // add label
tl.to( element1 , 1, {...} ),"playCircles") // start at the playCircles label
tl.to( element2 , 1, {...} ),"playCircles+=0.5"); // starts 0.5 seconds after the playCircles label

// Having tweens relative to a label also makes it easy to change all of them at once
// since they're relative to the label.
// You can add the label relative to other tweens in the timeline like this:

tl.add("playCircles","+=2") 

Hopefully that would make things a bit easier.

 

I'd also recommend Carl's terrific video about the position parameter:

http://greensock.com/position-parameter

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Thank you so much for your replies Carl and PointC,

 

I had newer thought that I hadn't gotten the timing positions in GSAP tools.

 

With the comments from Carl and the suggestion from PointC, now I have understood the timing positioning better and gotten the code working as expected.

 

Here is the updated demo for anyone curious about how I wanted it to look like: 

See the Pen eZyRzQ?editors=0010 by Sojaner (@Sojaner) on CodePen

  • Like 3
Link to comment
Share on other sites

Very glad that we were able to help.

 

Thank you for posting your latest version. I think you will be happy to see that the code can be reduced quite a bit!

 

var tl = new TimelineLite();
tl.to(".red, .blue", 1, {width:"100px",height:"100px"})
  .staggerTo("circle", 1, {scale:0.5,transfromOrigin:"center center"}, 0.5)
  .to("circle", 1, {scale:1,transfromOrigin:"center center"})
  .to(".svg", 1, {width:"100px",height:"100px"},"-=1");
 
 
Once you fully understand the position parameter (tutorial)I think you are going to find that the system is very easy to work with. You are doing exactly what you should be with experimenting and asking for help.
  • Like 3
Link to comment
Share on other sites

Very glad that we were able to help.

 

Thank you for posting your latest version. I think you will be happy to see that the code can be reduced quite a bit!

 

 

 

var tl = new TimelineLite();tl.to(".red, .blue", 1, {width:"100px",height:"100px"})  .staggerTo("circle", 1, {scale:0.5,transfromOrigin:"center center"}, 0.5)  .to("circle", 1, {scale:1,transfromOrigin:"center center"})  .to(".svg", 1, {width:"100px",height:"100px"},"-=1");

See the Pen LNejRy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here are the docs on staggerTo() http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerTo/

 

Once you fully understand the position parameter (tutorial)I think you are going to find that the system is very easy to work with. You are doing exactly what you should be with experimenting and asking for help.

Well, that is awesome. It is so beautifully structured.

 

And thanks for the super fast reply.

 

You people rock. Keep the great work going. :)

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