Sahil

Ya I guessed it. That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API? How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish. EDIT: I guess you would suggest expoScaleEase, I will give it a try later.

My intentions weren't to discourage you from posting anymore questions, so don't hesitate. You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code. But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.

It is not really GSAP vs Pixi JS. They work together. Pixi JS will render everything to canvas. GSAP will handle the animation for you. GSAP animates any numerical values of objects so it works with PIXI JS really well. Some of properties of Pixi JS are under multiple objects like, pixiObject.scale.x so pixiPlugin simplifies your syntax. https://greensock.com/docs/Plugins/PixiPlugin There are some other plugins that will make your life easier. https://greensock.com/docs/Plugins/DirectionalRotationPlugin https://greensock.com/docs/Plugins/Physics2DPlugin https://greensock.com/docs/Plugins/PhysicsPropsPlugin Here is basic example of how you can use GSAP to animate PIXI objects. If your confusion was if you should use HTML or Pixi JS then, Pixi JS is ideal for game development.

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content. As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html

Well you will certainly get better performance compared to DOM elements because you would be writing minimal code that draws directly and skips any DOM API calls. If your game has a lot of effects or particles, PIXI JS might give you better performance because WebGL takes advantage of hardware accelaration. Otherwise canvas is your best option. If you really want to squeeze out performance then you can avoid rendering text on each frame and render text to offscreen canvas once to reuse it as image for far better performance because rendering text on canvas is expensive. In fact, you can do that for any complex shapes to avoid redrawing them and use sprites wherever possible. Check out following article, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas And our discussion about canvas performance,

GSAP works with objects, so in order to animate multiple square you need to use objects. But better option would be to use prototype so you can have more flexibility, each object will have it's own draw method and other methods as well if you need. I am passing context to draw method so just in case you want to reuse your code or it gets too complex, you can easily separate your code to organize it better or create your own simple library to draw common shapes. Once you do that you can animate each square independently just like you animate DOM elements. Also, please avoid posting private pens as we can't fork them. In case you haven't already, I would recommend getting this book: https://www.apress.com/in/book/9781430236658

You can improve your animation performance and shorten your code. 1. You are trying animate height, which triggers layout recalculation. Instead you can scale the divs. 2. I am setting different transform origin for both divs, which determines in which direction they will shrink. 3. GSAP works really well with ScrollMagic, you can pass a timeline that contains multiple tweens instead of creating multiple scenes. 4. I am setting position parameter for both tweens to zero so they will start at the same time. 5. You were using old syntax by wrapping your css vars in css object, it is valid but no longer required so you can just pass your css var in object like I did. 6. When experimenting with ScrollMagic, turn on indicators so you get idea when your animations trigger. 7. Also, the class that you are using as trigger element is not present in your html. https://greensock.com/docs/Plugins/CSSPlugin https://greensock.com/docs/TimelineMax To learn more you can check the docs, learning page or visit the youtube channel to watch some handy tutorials. Feel free to post if you have any follow-up questions.

You can use MorphSVGPlugin to do that, it is part of club membership but you can use it to practice for free on Codepen. Check out the docs and following video. The docs are here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/ There's a YouTube video explaining it here: Feel free to post any GSAP related questions, we don't have downvote button so nothing to worry.

As @GreenSock already had provided you solution, the only reason I posted that because you mentioned you wanted to recalculate values on resize. But svgs are scalable so resizing won't really change values unless you recalculate your paths manually so I thought you could just do same thing in canvas instead. But of course you know what fits in your requirements. Thanks. Just to clarify, canvas draws paths just like svg, just you have to do all the stuff manually. You can also support different pixel density, so raster etc isn't really an issue. Ya the Path2D is not supported by all browsers, but the pollyfill works in IE 9 as well without any significant performance issues. If you paste the url while in editor mode then it will get embedded.

Yup it is fun book to learn from, good to see you are enjoying it. I am not aware of any game development related book to recommend. @OSUblake can suggest for sure, he was the one who introduced me to that book. In the mean time take a look at following thread that might interest you. https://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/

Couple of days ago I was working on something out of personal interest. I didn't have any plans to post it in the forum, it was meant to be a PM to @GreenSock I haven't spent more than couple of hours on it so it is not complete and I haven't tested it for performance. Few days ago there was a question about using drawSVG for canvas, so I wrote little class as experiment that will do it. Today I saw your question and I modified it to support path modification. Bonus: You can use MorphSVG on it. Though all browsers don't support Path2D so you will need pollyfill for that. See if you can use it. Also, what I am doing is very little and I have too much freedom to do it, while GSAP is really big library and every change has to be considered for any side effects and if enough users need it.

Nice trick! The values that you are trying to apply are too small to see changes in Firefox. (At least that's what it seems like) Chrome is doing weird stuff, it doesn't render any changes. So I tried adding circle to svg and applied filter to it and it started working, only to stop when circle got out of the viewport. Then I set the svg's position to fixed and it worked. Maybe you can add tiny svg in background somewhere with fixed position and have it's opacity to 0 or stroke/fill same as background. Though not sure what is the reason for such behaviour.

I was on it too. It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path. PS: Yup I have started digging into files, seems fun.

In video, Chris mentions he uses Bodymovin to try out animations or prototype them to get approved and then recreates them using GSAP. I usually do what I am asked to do or from comes to my mind. @PointC probably has some process for planning animations.

Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.

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.

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.

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,

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.

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.

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()

I am not sure @GreenSock or @OSUblake can comment on that.

Oh right, we forgot to mention that Draggable has it's own properties like x, y and rotation. If you animate element externally you need to call update method of draggable so it will update these properties. Take a look at following thread. The version you are using is latest but I don't see the behavior of element jumping. Are you talking about behaviour in your project? And in which browsers is it happening? Please post a reduced test case.

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