Leaderboard

If this is what you're trying to do, then ridiculous seems like a good option.

Hi, I'm not very familiar with how the latest versions of Angular are bundled, so I'll guess that it uses webpack and perhaps you're bundling with a create app type-CLI. If that's the case, the culprit could be tree shaking. Please read this: https://greensock.com/docs/NPMUsage More specifically the tree shaking part (just scroll down a bit) and let us know how it goes. Happy Tweening!!

I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you. Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data var tl = new TimelineLite({onUpdate:updateSlider}), circle = document.getElementById("circle"); tl.to(circle, 1, {morphSVG:"#elephant"}) .to(circle, 2, {morphSVG:"#circle"}, "+=1")

Welcome to the forums, @Mmagic. I noticed a few problems... In your "restart()" function, you were looping through all the child animations and calling "restart()" on each instance, which basically rewinds them immediately, putting them back at their starting state. When you're using "from()" tweens, that means they'll all be at their "from" values at that point. And then you're creating all the from() tweens again...from those same values! In other words, x is 500 and you're tweening x to 500 (no change). That's why it looks like nothing is happening. It's just a logic flaw in your code. That's the most common mistake when people use "from()" tweens - they often forget that it uses whatever the current values are as the destination values which can cause logic problems (not a bug in GSAP). Imagine clicking a button really fast - if the user clicks when the current tween is partially finished, the current (destination) values are now different than the originals. It can get messy. Of course you can use fromTo() if you need to specify both starting and ending values. It's totally fine to use from() - it's just important to keep in mind how they work. Also, if you're trying to clear out a timeline... //BAD / WASTEFUL: TL.getChildren().forEach(tw => { tw.restart() tw.kill() }); //GOOD: TL.clear(); Also, you do NOT need to reuse timeline instances. It's not wrong/bad, but I often find that it's easier/faster to just create a new instance each time in cases like this. It probably takes more resources to scrub all the old stuff out rather than just creating a new one. Remember, GSAP is highly optimized for speed and it releases things for garbage collection on its own. Lastly, you could consolidate this code: //LONG: const tween = TweenMax.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }); TL.add(tween, 0.5); //SHORT: TL.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }, 0.5); Happy tweening!

I just quickly looked at your code, but that's probably the problem. You're calculating the position at the very start for all the walk calls. By referencing a function without parentheses, it will be called later. // called immediately .add(walk(1.1), "-=0.5") // called later .call(walk, [1.1], null, "-=0.5")

First, one of GSAP's most important features is its ability to help people create animations that tell stories. Your work certainly excels at that. Great job! The reason EGON moves so fast at the end is that he is moving a great distance in a short amount of time I know you know that, but now we have to consider why is the time so short and not longer for the big distance he has to travel. I have to admit I'm having trouble deciphering the walk() function. I see it takes a target parameter, in GSAP the target is the thing that is being animated, but it looks like you are passing in numbers like walk(0.1) walk(0.001) walk(0.25) its ok, to use your own target variable and be number... I just don't know what those numbers represent. I also noticed that you are getting the start value by doing start = egon.offset().left; console.log("start = " + start) If you log it out start you will see that it is always the same. In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created. I think it will take a bit of tinkering, so hopefully this helps you or someone else get into the proper solution. Again, great job on the animation!

That was the thing, thank you I will update the post with the solution, thanks!

Didn't we just cover this in your other thread?

given this gradient <linearGradient id="MyGradient"> <stop offset="1.281415e-03" stop-color="#FFDD15" id="stop1"/> <stop offset="0.5" stop-color="#EE4036" id="stop2"/> <stop offset="1" stop-color="#9E1F63" id="stop3"/> </linearGradient> you can tween those attributes using the attr plugin TweenMax.to("#stop1", 2, {attr:{"stop-color":"red"}}); TweenMax.to("#stop2", 2, {attr:{"stop-color":"white"}}); TweenMax.to("#stop3", 2, {attr:{"stop-color":"blue"}}); we warn not to tween stuff in <defs> so its worth testing. In the future please consider providing a demo as it makes things easier to test.

Thanks! Exactly this. I have simple svg picture which consists of few layers (paths) so i want to draw this picture. One layer morph to another, stays on screen and so on. I think it will be awesome using Greensock MorphSVG plugin. If I succeed i will share a link here) Thank you for explanation about data original attr btw.

Thank you very much for the detailed answer! Now I understand how it works) Great platform and site:)

Hi all, I wanted to let you know that you can now use TweenUI ad tags to run banners on the Sizmek DSP. This means you can create and publish, and later edit and re-publish banner ads and any changes will go live instantly. Also, TweenUI has been getting a facelift lately and some features have been greatly improved. Check it out at tweenui.com/animator and I'd love to hear any feature request or feedback. And yes of course — it's all GSAP powered. Regards, Erik

If anyone is wondering why setting the transform origin in CSS for SVG elements is a bad idea - besides not being consistent in every browser, there's a new property that you may need to use in order to specify where the origin relates to. Spoiler alert: IE/Edge doesn't support it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box view-box is kind of like setting svgOrigin with GSAP.

Don't set transform and transform-origin in your CSS for SVG. It will not work in every browser, especially transform-origin. By default, GSAP uses the transform attribute for SVG elements. CSS > attributes. GSAP is correctly setting the transform, but your CSS is overriding it.

I wasn't thinking about an eye when I posted my response. Resizing the movement vector if it exceeds a certain radius is one way you could correctly handle diagonal cases.

You need to set duration so class toggles back when you scroll further.

I figured I better stop in and tell you why I disappeared from the forum and didn't join up yet. As I kept trying to study over at Khan-academy, I kept getting more mixed up and confused in the sense that without knowing math I was not going to be able to finish that course, nor could I write good code without knowing the basic elements of the material, as the lessons skip forward quite quickly. So I am homeschooling myself to learn what I do not know so I will be able to proceed in coding with all the animations and elements needed to be on track. As I looked to your kind instructions I knew I needed to go back to school and so I am in fourth grade math leading up to pre-algebra, then algebra I & II. Then a bit of geometric concepts to round it all out. Then I will be back to learn more and truly understand what your trying to teach me. I really appreciate all the comments and the help you offered and provided even though my work was on another site. Hope to be back before the next year is over. I am studying hard and math is starting to make some sense. Thanks a lot for being so nice.

BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work.

Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.

When i saw PointC's helpful demo, i was thinking about pausing but was stumped on when to add the play(). Thanks Carl, now i know i can use play() inside the add() method for the returned child timeline. Great explanation and solution Carl

Hi PointC. What a great demo. Thanks so much for creating that. It sounds like your understanding of why / what is happening is pretty solid. To offer just a touch of clarity, its important to note that when your child timelines are created inside those functions they have no idea that they are going to be placed inside a parent timeline and scheduled to run in the future. When each timeline is created it says "ARGHHH! I have a set() at time 0! I better render that now!" Another thing you could do in this case is pause the timelines on creation and add() them in an un-paused state like var masterTimeline = new TimelineMax( { repeat:-1, repeatDelay:1, paused:true } ); masterTimeline .add( part1().play() ) .add( part2().play() ) .add( part3().play() ) .add( part4().play() ); http://codepen.io/GreenSock/pen/MKYJqK?editors=001 Hopefully this helps. Thanks again for the wonderful demo.

Hello angel.teran, and Welcome to the GreenSock Forum! Have you tried using autoRound:false in your tween? .. It is part of the GSAP CSSPlugin: Working example: http://codepen.io/jonathan/pen/yygNyj autoRound By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded. :: $(function() { var tl = new TimelineLite(); tl.to("#lifebar > b", 1, { autoRound:false, /* add this */ width: "50.5%", ease: Linear.easeNone }); tl.to("#lifebar > b", 1, { autoRound:false, /* add this */ width: "100%", ease: Linear.easeNone }); tl.to("#lifebar > b", 1, { autoRound:false, /* add this */ width: "50.50%", ease: Linear.easeNone }); }); : Feel free to check out the CSSPlugin Docs. Hope this helps!

Is there a way to specify lagSmoothing on a per tween basis? It seems like one global setting isn't flexible enough. I'm building a game. Most animations correspond to 'real' things happening in the game world therefore accurate timing is important. They can't ever 'pause' when someone minimizes the window or lags a little bit. However other animations, more eye-candy in nature, might benefit from the lagSmoothing feature.

I turned off lagSmoothing and it fixed my problem. This behavior still seems like a bug to me. Smoothing out lag is a great feature, but a minimized (or otherwise invisible) window is not lag. Having an animation pause when the window is invisible is, I imagine, rarely what is expected or desired.

Here's a sample: http://codepen.io/anon/pen/DwGoI Start the animation, then minimize your browser. Go get a cup of coffee, come back, show the window again, and the animation will pick up from where it left off when you minimized the window. I need the animation to keep running even when it's not visible.