Leaderboard

Hey @makis2404 With GSAP you can use Draggable's hitTest method to perform the hit test. On codepen under each panel there is option under drop down, called 'tidy'. It makes your code far more readable and neat, give it a try. I see you are having fun with small games etc. I would recommend a book you will enjoy learning from. All examples are for Canvas but you can apply same logic for the HTML elements. https://www.apress.com/in/book/9781430236658 All the examples from book can be found here: http://lamberta.github.io/html5-animation/ Checkout the video by author of original book,

You just answered your own question. They are drawing a sequence of images on a canvas element.

GSAP works with any JavaScript objects. When it is working with DOM elements like div etc and if you try to change the scale, GSAP will use the CSSPlugin to apply changes in CSS. Now your snippet, TweenLite.to(Picture 1, 1, {scaleY:-0.5}); That is incorrect because object names cannot have spaces, so you must be getting errors in console. In order for that to work your object name should be without spaces, if it has spaces then it isn't an object. Second, your Picture1 object must have a scaleY property so you can use it to animate. I am not sure what kind of output you get with Articulate 360, if you can post a super simple demo on Codepen then I can take a look at which properties can be animated. A quick google search shows you can manipulate it with JavaScript but one page I visited only had examples to call functions.

Hi @makis2404 Your demo didn't embed properly, but I found it in your profile. The reason that doesn't work is you have each click create a tween that is added to the end of the timeline. The first tween on the timeline is 100 seconds in duration so the y position animation tweens won't happen until that tween ends. You could create a separate timeline for the click handler or you could simply use TweenMax like this: Keep in mind that on the first click the square will move up to y:0 since you're animating the attribute 'y'. I'm assuming you don't want that so I set the variable to 200 instead of 0. That should get you started. Happy tweening.

Hey @smallio This thread gave me an idea for a new demo so I thought I'd post it for you. I animated the menu icon into the x and also added a little handwriting effect for some fun. Maybe it'll give you some ideas. Happy tweening.

Hi @hyconnect It looked fine in Edge to me. I'm not sure what version of Edge you're using, but you can also try a slight rotation of the mask to force Edge to repaint. I wrote about that in our SVG Gotchas thread here: Hopefully that helps. Happy tweening.

If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo. I am just using Draggable to detect swipe, you can add that on top of your demo. If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started. The demo is responsive and you can use media queries as well, given that all your slides are of same width.

So cool dude!

Ohk there is too much confusion here. You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it. Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead. Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.

GSAP is an animation engine that changes values over time. It doesn't do any rendering so the bottleneck is usually the browser. There shouldn't be any issues with GSAP animations on mobile. Are your elements ready when the tweens fire? If you could put together a simplified version of your project that demonstrates the problem, we can most likely point you in the right direction. Happy tweening.

Happy to help and I'm glad it's working for you now. Edge can be such a fussy pants. This is my usual reaction to working with Edge and its diva nonsense.

I'm not sure what you're trying to do, but here's a quick example of a SVG with an image and a circle clip-path. It's all centered and the toggle will play/reverse the timeline. Hopefully that helps. Happy tweening.

@PointC Everything seemed to work inside codepen, on Edge, without a 0.01 rotation, but not my local file. Once I placed rotation: 0.01, inside my local project everything worked like a charm. Thank you for the point in the right direction!

This might also be useful for bookmarking because it provides an overview of which tools are inside TweenMax, what the CDN links are, which of the tools are members-only, etc.: https://codepen.io/GreenSock/full/djXzyR/ Happy tweening!

Yes - if you load TweenMax, you can create all the timelines you like.

I'm not at all familiar with Articulate 360 and I don't recall it being mentioned in the forums before now. Someone around here may have some knowledge about it, but I'm guessing you'd have better luck posting in their discussion forum. https://community.articulate.com/discuss

Uh! Uh! Uh! I know this one! I do! ✋ That is because arrow functions automatically bind the scope to their containing block. ? Nice tip, by the way.

Awesome man, you are a lifesaver. Dunno why, Adobe XD generated it with that transform. I will investigate it further.

Hi @reflex Welcome to the forum. The problem is you have a massive group transform on line 10: <g transform="translate(-508 -3551.334)"> You'll need to account for that with an x/y offset like this: var motionPath = MorphSVGPlugin.pathDataToBezier( $("#how-i-do-it__graph__path"), { align: "#how-i-do-it__rocket", offsetY: -3551, offsetX: -508 } ); Hopefully that helps. Happy tweening.

Just so you know, Google updated to GSAP 2.0.1 and the URLs are listed at: The URLs are much more friendly now

Sorry, Chris, but I'm not familiar with Google Ad Manager at all, but perhaps someone else here can chime in with some knowledge. Happy tweening!

TweenMax loads the following: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack https://greensock.com/tweenmax https://greensock.com/docs/TweenMax Happy tweening.

Correction: there was this post: I have no idea if that will help, but that's all I could find.

Hi @harp30, Probably you are looking for the scroll animation. Not serious, just a little gimmick: Maybe it will put you on the right track. Happy tweening ... Mikel P.S.: @Sahil , thanks for pointing out the video from @chrisgannon. Awesome type. Very creative ... Lets cycle ...

While Doubleclick does not require GWD, they definitely push you towards that solution, and have no active forum for Studio creative. The Doubleclick Studio dynamic template files are from 2014, and from what I can tell, any newer template activity in the database is all GWD. That being said, there is live chat when you are logged into Studio, and they are very helpful, just don't mention Animate. I was able to determine that Animate CC canvas exports can play well with enabler.js, using z-index. You just have to change your images export path to ./ as Studio does not work with subfolders.

You can reduce your code to few lines. While defining the timeline, set it's paused property to true so you don't need to use pause method. Also set it's reversed property to true. Now inside click function use the ternary operator, on first execution it will check if timeline is reversed, if it is reversed then it will play the animation. If it's not reversed then animation will reverse. That's where setting reversed property comes into play for first execution. Also I am using from tween, so you don't have to use 0 duration tween to hide your div. In cases where you want to do that, you can use set method instead. Plus in case your animation is just single line then you can instead use a tween instead of timeline.

Not sure which effect you are referring to. If you meant the blobs for loading animation, you can achieve that by using blur and contrast filters, take a look at following video by Chris Gannon. If you meant the logo animation, that can be achieved by DrawSVGPlugin, take a look at demo by @PointC in following thread. Apart from that I don't really see any animation on the site.

Sounds like you got it! Going back to my example real quick, if the logName method wasn't on the prototype, then it would work correctly without having to use call. function Person(name) { this.name = name; this.logName = () => { console.log(this.name); } } var dipscom = new Person("Pedro"); timelineCall(dipscom.logName); // Pedro function timelineCall(callback) { callback(); } However, without an arrow function you would have to save this to a variable. function Person(name) { this.name = name; // vm, self, _this, etc... var that = this; this.logName = function() { console.log(that.name); } }

You're creating a timeline and then immediately calling reverse on it. That won't do anything because the start of an animation is also the end of animation when reversed. You would need to do something like setting the progress of the animation to 1, and then call reverse. However, it would be better if you just kept a reference to the timeline, and then reversed it. var tl; //OPEN MODAL $(".modal-trigger").click(function() { modalTarget = '#' + $(this).attr("data-target"); tl = tlOpenModal(modalTarget); }); //CLOSE MODAL $( ".modal-close" ).click(function() { tl.reverse(); });

Not sure if you meant to post the same thing again. Try adding this code to prevent errors during server rendering. if (typeof window === "undefined") { var dummyElement = { style: {}, appendChild: function() {}, removeChild: function() {} }; global.window = {}; global.navigator = { userAgent: "" }; global.document = { createElement: function() { return dummyElement } }; } I just ran that in node without any errors. The "GSAP encountered missing dependency: plugins.CSSPlugin" message can be ignored as that is displayed before it loads TweenLite and the CSSPlugin.

Thanks a lot guys. Having TweenFromTo as a master part was not clear to me that works. This is totally the solution I was looking for. Thank you so much.

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!

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

@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.

Where is coordinate 25, 25? The top-left corner of the screen? The top-left corner of the page? The outside top-left corner of the container? The inside top-left corner of the container if there are borders? There's a lot of variables to consider. So no, there is no built-in support for this. What Dipscom did is what I would do. Have everything start from the same origin with left and top set to 0, and then transform everything. That will eliminate the math, and make everything really simple.

Left and Top are not the same thing as X and Y. X,Y are an alias to the translate() transform. So, if you are setting you element at left:300, top:200, it is effectively sitting at x:0, y:0 (in the CSS lingo, transform: translate(0,0); ) To achieve what you are after you can leave all your starting objects at left:0, top:0 and place them where you want using GSAP, then you can use absolute x and y. Like so: http://codepen.io/dipscom/pen/BWKvJb?editors=0110