Leaderboard

GSAP draws paths by animating stroke-dashoffset and stroke-dasharray which are CSS properties. Which you can do on canvas too. But SVG elements have a method called getTotalLength. Canvas has Path2D method that lets you print a path on canvas but it doesn't have method like getTotalLength. But you can create a path element and use it's getTotalLength method to construct your path and animation. Check the following example using this approach.

I don't think SVGs used as background can be animated using JavaScript. Your svgs are inline(included in HTML) not as background. So ya you can do that using GSAP, check out the following reply I posted yesterday.

Hi @jSwtch I made all those demos, and what you see in that thread is pretty much the only way to tween stuff in parallel. It's not super complicated. Basically, you tween a generic object with the properties you want, and then in a render method you combine the values and apply them to the actual object you are rendering. There's an old Pixi demo in that thread, but it's probably not the best example to learn from. This demo does a good job showing how to make an additive animation. Instead of using an array, I'm using a linked list to store the animations. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/LinkedList2.js

You can use GSDevTools to control your animations, it won't help you with interactive animations but you can build your animation separately and use GSDevTools to get your timing right. https://greensock.com/docs/Utilities/GSDevTools You can also use timeline to build such animations and make the flame effect at right moment using position parameter. https://css-tricks.com/writing-smarter-animation-code/ Apart from that not sure what to suggest you as your demo doesn't load images because they are hosted on http server, save them somewhere with https so they will show up on your demo.

In addition to Sahil's sweet demo and advice its worth noting that @OSUblake used MorphSVG to generate a canvas rendering. I suspect you could take a similar approach with an off-canvas SVG that you animate with DrawSVG and then query its path data and use an onUpdate to do some conversions and draw it on canvas. Haven't tried it myself but might be worth giving it a shot. That way you will be able to play(), pause(), reverse() or nest the animation in a timeline.

Hi @yulia, It would be good to judge your case and problems in a CodePen. "animation: 'bgscrolling .1s infinite'" is not a GreenSock parameter. "repeat: -1" lets this tween run infinitely here, it does not go on to the next tween. "transform: 'scale (1)'" is not a GreenSock parameter. Please take a little time for learning GSAP. Best regards Mikel

Animate is using Easel. There's no reason you can't use it directly. https://www.createjs.com/easeljs

Yep - you can target any of the elements, paths, groups, filters etc. inside the SVG, but you can also target the SVG itself. In some cases that may be exactly what you want. In those situations you just target the SVG like any other DOM element. Happy tweening.

I was showing @PointC that Coding Math has 4 videos on Verlet Integration, which is exactly what you want. This is the 4th video, which shows a weighted rope animation. It uses canvas, but feel free to substitute in whatever rendering method you like. The source code for that episode. https://github.com/bit101/CodingMath/tree/master/episode39

That works when importing Draggable with TypeScript with older versions of GSAP or when using the umd versions. If you're using the latest version of GSAP (2.0.1), try importing like this. import Draggable from "gsap/Draggable"; And there won't be any auto-complete for Draggable. If you get errors, the simplest way to silence is to add this to your code. declare var Draggable;

I was able to see the images, but I'm still having a hard time understanding the question. Are you trying to pause the tank timeline and animate an explosion or are you trying to find the tank's x position to start the explosion near it? We're happy to help with any GSAP related problems, but you can help us better assist you by creating simplified demos. The opening sequence of the demo you listed above is 26 seconds and uses your actual photo assets. We don't need all your final images or the full animation. Just some simple divs and enough code to demonstrate the problem/question is preferable. Thanks.

It was really hard to debug your example as you were performing some calculations onDrag which was re-positioning element at random position. That being said, what you are doing, I have done that countless times and I have never faced such issue. In which browser are you experiencing it? I didn't notice behavior you are experiencing. I looked further into it, at first I was going to say I am experiencing same behavior but I think you are dragging your Draggable of type 'x' vertically so it doesn't move. But if you drag it horizontally it behaves correctly.

Thread I mentioned shows basic example of parallax effect that responds to mouse movement. I looked up their website, they implemented it using Three JS. You can do that with HTML as well but you will need some practice and a lot more patience but effect will be slightly less immersive.

Like Craig said, it will be much better if we can see a reduced test case as it isn't very common that things just stop working. Although he already provided a starter pen for you, definitely check out and bookmark: https://greensock.com/try-plugins It gives you a codepen where you can easily copy the URLs of all the CodePen-safe bonus plugins OR fork a bare-bones demo that loads them all. Once we can see the undesired behavior happening will be much better equipped to provide solutions.

If snap and ThrowProps aren't working it almost sounds like that plugin isn't loaded. If you could drop it into a demo, that would be great. Here's a GS draggable starter demo that loads what you need. Please fork it and see if you can reproduce the problem with your code. Happy tweening.

Hi @popflier Yes you can add tweens to a timeline with add(), but in this case, that is not what the "part2" is doing. It's a position parameter label. I wanted both of those tweens to start at the same time so I used the label. More info about the position parameter can be found here: https://greensock.com/position-parameter In addition to labels, the add() method does allow you to add tweens, timelines and callbacks to the timeline. Yes they will play in sequence unless you add the position parameter. @Carl has an excellent article about creating timelines in functions and returning them to a master timeline with add(). https://css-tricks.com/writing-smarter-animation-code/ The "#image" target in that tween is indeed targeting #image1, #image2 and #image3 as it loops. You'll see that we have the index of the loop (i) in there? On the first iteration of the loop i has a value of 0 so we add 1 to that (i+1) which we then concatenate with the string "#image" and the result is "#image1". That's just one way of doing it. You don't even need the IDs on the images. We could get a node list and use that in the tween too. // get the elements var thePics = document.querySelectorAll(".image"); // this tween would do the same thing tl.to(thePics[i], tl.duration(), {opacity:1}, 0); I only used the IDs to show another option as I had already added an array option in one of the other tweens. tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); That little index is quite handy for many things when you're looping. Hopefully that makes sense. Happy tweening.

Do you remember this thread? I mainly showed the ModifiersPlugin, but there's nothing wrong with using rAF, particularly if you're managing a bunch of different events. If that's the case, you could use the ticker instead. https://greensock.com/docs/TweenLite/static.ticker The Pixi demo is using the ticker provided by Pixi, but it's the same concept.

Do you actually need to call requestAnimationFrame? The ModfiersPlugin might be a better option depending on what you're doing. Check out these demos. https://codepen.io/collection/AWxOyk/

That looks like an awesome tool. Citrix / Redbull use a similar effect here: https://www.thenewmobileworkforce.com/all-season (click next / prev arrows) no idea how they do it, but I suspect 3D canvas wizardry.

okay, if I understand your desired outcome correctly, I'd recommend creating the explosion timeline ahead of time rather than every time you click. You can then play() it on each click. In that click handler you can pause the tank timeline and then add a delayedCall to resume() it. Maybe something like this: Does that help? Happy tweening.

Figured it out. It was a scoping issue. I added window. to make the function global and it works. window.pauseTL = function () { tl.pause(); }

Hi @jimmymik, In addition to the hint from Sahil, I would say that a simple animation is easier to realize with inline SVGs. No background image is required for your example. Otherwise, I recommend the work and tutorials by Chris Gannon: a tutorial an article and my favorite Happy tweening ... Mikel

I don't think jquery.gsap is actually a supported product, that's why you don't see any mention of it in the docs. @Carl might be able to clarify that. If you really need it, I would just change stale to false. stale = false; And const is still in the output because a newer version hasn't been released yet. What's not correct?

Sahil, thank you!

I made a test case with Vue CLI and the import works. So there is something wrong with my configuration ?. I will look better into it!

I think I'm learning more in this thread than I did in 3 months of coding bootcamp. You've been so wonderful with your time and I understand if you will need to just cut me off from asking questions. That being said...I have a couple more questions about the menu I'm trying to code. However, I also have a question pertaining to the pen you did above for @smallio. For the pen, my question is about the "part 2" in the code. You have used tl.add("part 2"); And then called "part 2" again at the end of the timeline tween code: tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); tl.staggerTo(splitText.chars, 0.75, animations[i], 0.04, "part2"); So you can use the .add to literally add tweens to the timeline? Does this content get initiated after the previous content completes? For example, if I had a tween that said move box to x:0, y:0. Then I used the tl.add and then had a second tween on the same timeline that said move box to x:10, y:20. Would the box complete it's movement to x:0, y:0 and THEN do it's movement to x:10, y:20 because I used the .add? Can you explain why you are calling an ID that doesn't exist in the HTML or CSS here? There is an ID that is #image1, #image2, #image3 but there isn't an ID that is just "#image" and that's confusing to me. tl.to("#image" + (i+1), tl.duration(), {opacity:1}, 0); I'll ask the question pertaining to my menu in a separate post to not confuse the two. Thanks!

I don't know much about Animate so I can't be much help, but I wanted to make sure you were aware of this: https://greensock.com/GSAP-Animate-CC-2017 @Carl knows a ton so he may have some answers for you. Happy tweening.

Users have very little control over how tools like create-react-app import stuff. Same with Vue it seems. Bundlers really don't follow a spec, so splitting up GSAP's code is a good way to create errors. I have always maintained that the GSAP download folder should be installable. Manually setting it up... It would be nice to see those changes in the next version of GSAP.