Leaderboard

Just to confirm what @OSUblake has already figure out: The data() object in Vue is for reactive data, not to store any static values. You can do exactly what he has sugested and just add any static values to the this of the component you are working with, you will be able to access it from anywhere in that component's instance. However, I am assuming you are working with DOM elements, don't initialize your timelines in the created() hook. Use the mounted() as you will not have access to the DOM in the created() call. Vue has some bluit-in $options property that you might want to use depending on your case. I haven't seen the real need for it and it does make it ever so longer to reach anything this.$options.customOption but it's there. I guess in a big enough project it would be handy. You might even want to consider not putting your timeline methods inside the methods property. You can, depending on when you need to build your timelines just attach them to normal properties of you component's instance. export default { mounted() { this.someAnimation = function() { const childTimeline = new TimelineMax(); //... return childTimeline; } this.mainTimeline = new TimelineMax(); this.mainTimline.add(this.someAnimation()); } }

Hi @HodgeHeg Welcome to the forum. It played fine for me in FireFox. (all other browsers too). The only error I saw was your ease on lines 14 & 21. You have this: ease: Expo I'm not sure whether that should have been an easeIn or maybe the new ExpoScaleEase? I didn't really dive into your SVG, but it all played fine for me. Happy tweening.

You can use endTime method instead. In other cases you might want to calculate the time based on local and global timeScale. https://greensock.com/docs/TweenLite/endTime()

There's nothing unusual or complicated about your animation. Firefox nightly is unstable, and probably not a good idea to use for testing production code.

@GreenSock you know what? Today I understood your reply on this topic. At last. This is the crutial detail. It took me two years and four days to understand what this line was saying. Today being August 12, 2018. To anybody else that reads this thread and is feeling the struggle: Persevere. You will get it. One day. And you won't even notice when it clicks.

t This is beautiful!

I only mentioned killTweensOf() as a possibility because you said you just wanted to stop the element from animating. This method won't kill() the other timeline, but it can stop the element while it's animating. Something like this for example: function introAnim() { var tl = new TimelineMax(); tl.to(yourElement, 5, { x: 500 }); return tl; } function hideIntro() { TweenMax.killTweensOf(yourElement); var tl = new TimelineMax(); tl.to(yourElement, 1, { opacity: 0 }); return tl; } But this will not kill() the introAnim timeline so it's probably not what you needed. Happy tweening.

Looks like I was right about storing stuff on 'this'. Vue doesn't have a proper place to declare/store non-reactive stuff. https://github.com/vuejs/vue/issues/1988 According to that issue, you can add/initialize private stuff in the created hook. For example, if you want to create some sort of master timeline, this should work. export default { created() { this.mainTimeline = new TimelineMax(); }, methods: { someAnimation() { const childTimeline = new TimelineMax(); this.mainTimeline.add(childTimeline); } } }

timeScale doesn't change the duration. It scales the time like so... tl.totalDuration() / tl.timeScale() But that's just at one level. If a child timeline has a timeScale of 0.5 and its parent has a timeScale of 0.5, then it's timeScale would be 0.25 0.5 * 0.5 = 0.25

So what made it click? It's a confusing concept. Maybe I can confuse you some more. Let's create a simple person object. function Person(name) { this.name = name; } Person.prototype.logName = function() { console.log(this.name); } var dipscom = new Person("Pedro"); Call the logName method. Simple enough, and works as expected. dipscom.logName(); // Pedro Now look what happens if you try to call that method without dipscom timelineCall(dipscom.logName); // CodePen function timelineCall(callback) { callback(); } CodePen??? ? dipscom wasn't the caller of the logName method, so this now becomes the global object i.e. the window. It just happens that CodePen created a global name property with their name. In strict mode that would actually be an error because this would be undefined. To get the correct behavior, you would need to call the method with call or apply. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply timelineCall(dipscom.logName, dipscom); // Pedro function timelineCall(callback, scope) { callback.call(scope); } If you're curious, this is how GSAP handles callbacks. Animation is the base class for TweenLite/Max and TimelineLite/Max Animation.prototype._callback = function(type) { var v = this.vars, callback = v[type], params = v[type + "Params"], scope = v[type + "Scope"] || v.callbackScope || this, l = params ? params.length : 0; // speed optimization; call() is faster than apply() // so use it when there are only a few parameters switch (l) { case 0: callback.call(scope); break; case 1: callback.call(scope, params[0]); break; case 2: callback.call(scope, params[0], params[1]); break; default: callback.apply(scope, params); } };

Aaaand I solved it. Error was clearly between chair and computer: wrong import. I imported Draggable in Typescript like this: import * as Draggable from "gsap/umd/Draggable"; instead of import Draggable from "gsap/Draggable"; now it works!

hmmm... I just looked at it again and it all played fine for me in all browsers. The only thing I see in the SVG is an extra group closing tag (</g>) on line 110. I don't think that would crash FireFox, but weird things happen sometimes. Other than that I guess you can check the usual suspects. Check FF on other machines, update graphics card drivers etc... Just an FYI: you can shorten your code a little by not using the add() method to add tweens to the timeline. //this tl.add(TweenLite.to(rainbowPTop, 5, { scale:85, transformOrigin: "50% 100%", ease: Expo.easeOut, }), 2.5); // could be shortened to this tl.to(rainbowPTop, 5, { scale:85, transformOrigin: "50% 100%", ease: Expo.easeOut, }, 2.5); Hopefully that helps. Happy tweening.

You don't have to worry about it, it is your forum.

Sounds like you're using an old version of GSAP. You shouldn't see a 3d matrix in the style for SVG elements. The current version is 2.0.1. https://cdnjs.com/libraries/gsap You really shouldn't be messing with a transform or matrix. Use and "x" and "y" directly. TweenLite.to("#groupAll", 0.4, { x: startX, y: startY }); And I need to remember to refresh the page before posting. I didn't see that @Sahil already posted.

You just need to reset x and y properties. GSAP creates an object _gsTransform and attaches it to the DOM object to keep track of all the transform related values. Usually you will want to avoid trying to manipulate css transform directly and use gsap instead. It keeps things simple. For draggable of type 'rotation' you will need to reset 'rotation' property. https://greensock.com/docs/Plugins/CSSPlugin

The hover and click didn't work because you have the .xBtn class z-index set to -50. Change that and the hover and click work just fine. There is one error in the exitAnim() function. The tween on line 118 is missing the duration. (You also wouldn't want that timeline paused.) Here's a new fork of your pen with those changes. In answer to your question about the +=180 for the lines: I used that because you said you wanted the x shape to rotate 180 degrees on hover. Those lines have already rotated several times so rather than try to figure out an exact rotation it's just easier to rotate 180 degrees from their current location. Hopefully that helps. Happy tweening.

It looks like you're trying to animate something like buoyancy. I'll just throw this out there if you want to see an accurate simulation. There's no GSAP involved, but it might give you some ideas about the behavior. Click anywhere to move/throw the ball.

You might be able to use CustomWiggle for symmetric movement from center. https://greensock.com/docs/Easing/CustomWiggle Following is a demo I created where elements have their default animation but when you move mouse they start following the mouse. Instead of animating actual elements, I have some objects that I tween. The elements follow certain item based on some conditions and their speed is changed as their target changes. It uses Canvas but that shouldn't be issue, you can duplicate same logic for html elements. Though feel free to ask if you have questions about certain parts in the demo.

What? We're done with this one already? I was happy to help and I'm glad it's coming together for you. If you need additional GSAP assistance on this or any other projects, we're happy to help. Thank you for your support with your membership in Club GreenSock. It's most appreciated. Happy tweening.

<<The hover and click didn't work because you have the .xBtn class z-index set to -50. Change that and the hover and click work just fine. >> I am so glad that I asked you about this because I absolutely would never have figured out that this was the issue. I obviously only copied the JS and not the CSS from your pen. <<There is one error in the exitAnim() function. The tween on line 118 is missing the duration.>> My thinking in doing that was I thought that if I left the duration off that it would default to 0. <<(You also wouldn't want that timeline paused.) Here's a new fork of your pen with those changes.>> I'll be honest. I'm still trying to figure out the callbacks. I usually have to add and remove them just to see how it affects the timeline, but I've been researching them in the docs. <<In answer to your question about the +=180 for the lines: I used that because you said you wanted the x shape to rotate 180 degrees on hover. Those lines have already rotated several times so rather than try to figure out an exact rotation it's just easier to rotate 180 degrees from their current location.>> Okay, so that's how you do that! I kept trying to find a way to append or join the those two lines. I must have tried 50 different lines of code and spent hours researching it. I knew there must be a simple way to do it...and there was. I'm pretty sure that I've got it from here on this menu, which I am sure that you must be ecstatic about since you've spent so much time helping me with this. I need to do some timing tweaks an make a few other adjustments but I'm confident that I can finish it on my own. Thank you so so very much for your time and assistance. I greatly appreciate it! I have a couple of other things to put together so I'm sure it won't be the last time I post a question

¯\_(ツ)_/¯ This works... https://stackblitz.com/edit/angular-kyfkfu

Why don't you just start the animation from the top instead of the center? These do the same thing. var tl_bobbing = new TimelineMax({repeat:-1, onRepeat:checkShouldStop}); tl_bobbing.fromTo("#redSquare", 0.5, { y: toPX(-5) }, { y: toPX(5), repeat: 1, yoyo: true, ease: Power1.easeInOut }) .time(0.25); // start at y = 0 var tl_bobbing_yellow = new TimelineMax({repeat:-1}); tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(5), ease:Power1.easeOut}); tl_bobbing_yellow.to('#yellowSquare',0.5,{y:'+='+ toPX(-10), ease:Power1.easeInOut}); tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(+5), ease:Power1.easeIn});

I don't use Vue, so I'm not the best person to ask. Maybe @Dipscom can chime in and give some tips. I looked at Vue's documentation, but I didn't see any mention about where to store stuff besides the data object. I could be wrong, but the data object doesn't seem like the correct place to store stuff like animations, so I'm just going to assume that it's safe to store animations directly to 'this'. export default { mounted() { this.introAnimation = this.introAnim(); }, methods: { introAnim() { const tl = new TimelineMax(); return tl; }, hideIntro() { const tl = new TimelineMax(); return tl; }, onClick() { this.introAnimation.kill(); this.introAnimation = null; this.hideAnimation = this.hideIntro(); } } } Since you working with an object, you could also store the timeline directly inside the method instead of returning it. export default { mounted() { this.introAnim(); }, methods: { introAnim() { this.introAnimation = new TimelineMax(); }, hideIntro() { this.hideAnimation = new TimelineMax(); }, onClick() { this.introAnimation.kill(); this.introAnimation = null; this.hideIntro(); } } }

If you're not comfortable coding something like that yourself, you could get that exact functionality super easily in Google Web Designer using the Swipeable Gallery and Gallery Navigation components. They also have a bunch of existing templates with the gallery and navigation already implemented, which you could start with and restyle if you don't want to build one from scratch.

Hi @jiggles78, Another version "Scroll the blob" Happy tweening ... Mikel

Thank you @mikel. There are quite a few extra tricks in there that I have learnt from and will be helpful as the project builds. As I can not control the User scrolling too fast, I would like the blob to morph to whatever relative slide they are on. i.e. Blob 1 for slide 1 relates to the content. I've played with it a bit more (longer than i would like to admit), and can't seem to quite figure out how to let this occur.