Leaderboard

You can create a single function that handles your tweens. It will also reduce the number of tweens you have to manage.

You were passing timeline as a string with single quotes instead of actual timeline.

If you use the cycle property, you can define some clever way to select your desired elements using a function and adding a delay to each instead of using the staggerFrom/To own stagger:

Nice find! Let me tell you about "that". Before arrow functions came along, using "this" was very error prone. "this" inside an inner function is the wrong "this", which is very easy to overlook. var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { this.colors.forEach(function(color) { this.logValue(color); // ERROR }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff(); To fix it you would have to put "this" in a variable. I would always name it "that", resulting in code that confused everybody. Q. What's that? A. this. Q. What?!? A. It's this! Q. I don't know what that is! var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { var that = this; this.colors.forEach(function(color) { that.logValue(color); // WORKS }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff();

.getTotalLength() for other shapes like a polyline is part of SVG 2. https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength And Microsoft is like, meh... it can wait. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svg2/?q=svg I totally forgot about this. You can get the length using the DrawSVGPlugin. var totalLength = DrawSVGPlugin.getLength(polyline);

You can make it work with the progress() method and no labels. All you need to do is measure each segment and divide that by the totalLength() of the polyline. Push those results into an array and you'll have a progress stop for each point. I forked my pen from above and changed the path to a polyline. How about something like this? Hopefully that helps. Happy tweening.

Yep, exactly. Originally we applied transforms via the CSS transform property across the board, and only fell back to the "transform" attribute on SVGs in certain browsers that didn't support CSS, but we eventually discovered quite a few browser inconsistencies and problems with CSS transforms on SVG elements, so we switched to being consistent with using the transform attribute across the board. Also keep in mind that the SVG spec doesn't support 3D anyway, so I certainly wouldn't recommend trying 3D stuff with SVGs at this point. You can, of course, use a 3D transform on the SVG container itself, or put it in a <div> with a 3D transform - you just can't do it reliably on SVG elements themselves, like <path>, <circle>, <rect>, etc. Happy tweening!

Nice job, @PointC I made a demo to show the tile drawn centered at 0,0 and a lot of your code looks like mine. One issue though, .getTotalLength() won't work on a polyline/polygon with browsers from Seattle, so you should convert it to a path. Well maybe a clone so you don't have to deal with messing up the actual polyline points.

Welcome to to the forum. Your timelines have already played so an easy fix is to play(0) like this: $("#blue").click(function(){ Anim3.play(0) }) ; $("#red").click(function(){ Anim4.play(0) }) ; Happy tweening.

Thank you very much!! Excited to understand this - appreciate your help Dipscom!

I remember 3D transforms working in Chrome. But looks like they dropped the support for 3D transforms from transform attribute for svg elements. GSAP used to use CSS transforms for chrome but it was changed to transform attribute in 1.19.1 for all browser consistency. Though 3D transforms do work with older versions of GSAP it will only work in Chrome as other browsers don't support 3D spec for SVG elements. https://github.com/greensock/GreenSock-JS/releases/tag/1.19.1

Hi, You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable. Just add dragClickables: true in your Draggable instance and it will work: export default class App extends React.Component { componentDidMount() { this.draggable = new Draggable(this.draggableRef, { type: "x,y", dragClickables: True }); } render() { return ( <div ref={ref => {this.draggableRef = ref;}} style={{width: 100, height: 100, background: "#f00"}} /> ); } } Another alternative is roll-back to React 16.4.2 For more details and information about this issue, please refer to this post: And this issue in React's repo: https://github.com/facebook/react/issues/13654 The next release of GSAP will have this fixed. Happy Tweening!!!

Thanks for your help PointC!

You're seeing the easing there. With Linear easing, your point on the path at progress(0.5) will be halfway on the path. But other types of easing will not necessarily be at the point you expect. They could be far ahead of the halfway point or way behind it. Switch line 25 to this and you'll be good to go. tl.to("#tile", dur, { bezier:{values:path, type:"cubic"}, ease:Linear.easeNone }); If you want some easing between jumpPoints, you can add that to the tween on line 43. Happy tweening.

Looks like they're using Pixi with a displacement map. http://www.pixijs.com/ Here's a demo from a different thread that shows the basics of how it works. Hopefully that helps. Happy tweening.

Welcome to the forums, @jschins! Hm, we'd really need to see a reduced test case to see what's going on. How are you getting the height? Using element.offsetHeight? And is it display:none at that point or visibility:hidden? Once we see a codepen, I'm sure we can offer some assistance. Cheers!

As Sahil said, if you killAll it will get rid of ALL of your tweens in the entire page. You cannot unkill it. It's not that it is a bad thing, it has its use cases, you just need to know when to use it. It really sounds like the answer is to simply pause the animation on mouse enter and resume on mouse leave. You could overwrite tlEsad but why would you want to do that unless you plan to change its animation? If you are going to re-use the same animation, you are far better off by just pausing it.

Working with 50 timelines wouldn't be hard. I think the problem you might be having is wrapping your head around "this", and that's not uncommon. Everybody struggles with "this", and I do mean everybody. You should look at what "this" is in your component. Vue creates a flattened object from your component code. console.dir(this); You're not calling the allAnims method. A call will have parenthesis after it. It might help if you view your methods without the ES6 syntax. Methods are functions, and you can't add a dot (chaining) after calling a function unless something is returned. Adding your animations to "this" allows you to access them from other methods. methods: { allAnims: function(refs) { this.logoAnimation = refs.Logo.animateLogo().pause(); }, play: function() { this.logoAnimation.play(); }, reverse: function() { this.logoAnimation.reverse(); } }, mounted: function() { this.allAnims(this.$refs); // WORKS this.play(); } https://codesandbox.io/s/3vrnv37rvm

I love a challenge, so I took a crack at it here: Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. Does that help?

Here's a tip. Don't position stuff you're going to move where you initially want it. If you drew your tile at 0,0 or centered on 0,0 you could easily move it to a coordinate on your polyline without any issues.

Hi and welcome to the GreenSock forums, The easiest way to get something to follow a polyline would be to use MorphSVG to convert your path data from your polyline to an array of points and then pass those points to the BezierPlugin as explained here: https://greensock.com/path-animation I made a demo showing how that would work var path = MorphSVGPlugin.pathDataToBezier("#route", {align:"#tile"}); console.log(path); TweenMax.set("#tile", {xPercent:-50, yPercent:-50});// center tile on path TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}) If you want to use MorphSVG you can upgrade your membership to a Shockingly Green via your account dashboard /// If you want to manually translate the coordinates of your #tile so that you can animate to coordinates on your line please read this post (especially blake's final demo) You'll see that each chicken animates from the center of the box.

I just forgot to document it (until now). Thanks for the reminder

Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.

Yep, it's super cool. GreenSock also has a plugin dedicated to controlling parts of it. https://greensock.com/?product-plugin=js-pixiplugin If you search the forum for "pixi' you'll find a ton of posts and demos by our resident expert @OSUblake. Happy tweening.

Sorry, the current SVG spec doesn't allow 3D transforms on child elements. SVG 2.0 probably will. For now you can rotate the whole SVG all you want. Hopefully that helps. Happy tweening.

The easy solution here is to play/reverse on hover. var logotl = new TimelineMax({paused:true, reversed:true}); $('#box').hover(function() { logotl.reversed() ? logotl.play() : logotl.reverse(); }) If you could provide a demo with your questions, it would help in getting you the best answers. More info: Happy tweening.

Hm, it sounds like maybe you're creating a tween with selector text that doesn't actually return anything when that tween renders for the first time. You can kill() the tween, of course (like if you're removing the element and you no longer want the tween to run). ScrollToPlugin does NOT use addEventListener() at all. The error you're getting would only occur on the very first render when the tween is trying to figure out the starting/ending values (which it caches for the rest of the tween's duration). If you're still having trouble, feel free to post a reduced test case (maybe stackblitz.com?) and we'll try to take a peek. Disclaimer: I have zero Angular knowledge/experience.

?‍♂️ Thank you @Sahil

How did I not know that? Or did I know and forgot about it? ? I honestly can't tell anymore if I'm learning something for the first time or it's something I knew and it fell out of my thick skull.

Clamp the actual width.

It's good. That's what I would do. ?

ahhh... good catch. I like to pretend those browsers don't exist. I actually thought .getTotalLength() worked for polylines, but I stand corrected. I made the switch in my demo. I just used my highlight path since it was a duplicate of the polyline.

Sounds a lot like a question I answered a few weeks ago in this thread. I used the progress() method to tween along the path. It would be pretty easy to adapt that for your needs. Hopefully that helps. Happy tweening.

If you name that tween, you'll be good to go. var tween = TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}); $("#pause").click(function() { tween.pause(0); }); Happy tweening.

Yep, using a negative stagger is absolutely fine - it'll go through the array in reverse order.

Hi Sahil, Thanks a lot for prompt help.

I was actually considering hyperlinking VHS and VCR but figured those kids would just ask Siri or Alexa.

If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.

By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.

You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,

Hi there! My name is Sarah, I'm on the Vue core team and do a lot of work with Vue and SVG animation using GSAP. Yep, you're on the right track, refs are the way to target these elements though technically it still works to target an id or class as usual. However, there are some key pieces in here that I want to separate out in case it's helpful to you, because really the sky's the limit! And they play so well together: 1) The way that animation and rendering work, you are *always* going to be touching the DOM in the case of animation, this can't only happen in the virtual DOM (something that people miss about React, too, even when looking at libraries like React-Motion) 2) There's a way to interpolate numbers that then update the DOM by transitioning state, and then there is accessing the DOM directly. You can use Vue and GSAP for both. I rewrote the docs example to use GSAP for our transitioning state example here: https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers, but the way you're working with the DOM nodes and watchers, you may be more interested in this chart I wrote with where I'm spinning up SVG DOM nodes with directives, which is similar to what you're doing. In other words, you can use Vue and GSAP to interpolate number or values, and then apply that to a style binding, OR you can just update the fill in GSAP by targeting the element directly, that will still work. There is even a relative HSL tween that gsap offers if that's your jam 3) You might also want to set things up with a transition component, which offer some javascript hooks for beforeEnter, enter, and leaving states: (I have a bunch of pens that do this but this is probably the simplest Vue Book Content Typer) The nice thing that the transition component offers you is an ability to coordinate one thing entering and another leaving, with transition modes. They're pretty spectacular. You will also be given FLIP under the hood with the transition-group component. 4) You can also plug directly into the mounted lifecycle hook, as you can see here: Vue Weather Notifier Pen. This way you can activate an SVG animation on the component as soon as it's in the DOM. You can also see in this pen I'm changing opacity, using drawSVG, changing color, rotating, you name it- it's all possible on SVG elements and you don't *have* to put them in data. Though there's nothing wrong with transitioning state that way either. I also wrote this article that should help you: https://css-tricks.com/intro-to-vue-5-animations/ And have this open source repo which is a whole workshop just about vue and svg animations: https://github.com/sdras/animating-vue-workshop Please feel free to ask any questions as well. Thanks!

Hi FatMunkey, With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore. In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border. Why I am using triggers and what are they? Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?

Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.

Use xPercent/yPercent to center a nested trigger... http://codepen.io/osublake/pen/caab223301f9a68f8b23894bd3c903b5 Here's how I've created resizable containers in the past. It uses flexbox, so the basis is the width or height. http://codepen.io/osublake/pen/WRQjJx/?editors=0010 .

Hi Gary, This simply has to do with "when" you're adding the nested timelines to the parent one. What you're doing is this: Create the master and nested timelines, and storing them in variables. Add the nested timelines to the parent. Adding set() and to() instances to the nested timelines. What happens is that when you add the nested timelines the duration of both is 0 seconds so they're both added at 0 seconds in the parent one, therefore they play simultaneously. If you add the nested instances to the parent after you add the to() and set() instances to them, it works as you expect: var outer = new TimelineMax({onUpdate: showProgress, paused: true}); var inner1 = new TimelineMax(), inner2 = new TimelineMax(); inner1.set(foo, {x: 100, y: 100, fontSize: 128}); inner1.to(foo, 4, {rotationZ: 360}); inner2.to(foo, 0.5, {scaleX: 0.5, scaleY: 0.5, repeat: 5, yoyo: true}); outer.add(inner1); outer.add(inner2); Rodrigo.