Sahil

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.

Quote

The video that was posted above by @Sahil - how do you plan out or design such interactive animations?  Using storyboards? Or is there another way?

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

Quote

I should probably mention that I am using this with Typescript and Angular inside of Electron, if that makes any difference...

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.

Quote

Am I using the wrong Draggable version?

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.

Quote

And I need to remember to refresh the page before posting. I didn't see that @Sahil already posted.  

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

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

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.

I don't understand. What is your expected behavior and what problem you are facing?

You can update Draggable using timeline's progress. You might want to tweak some calculations but this should get you started. The onDrag calculation assumes your page only contains the draggable. Maybe you will be able to use Scene's enter event and some element's height to do the calculation if you will have other content on page.

Check out demos in following thread, you can achieve it with little bit changes.

Draggable has it's own x and y properties. So in situations where you animate element that is draggable, you might want to update draggable to reflect element's current x and y translate. You can do that using update method. Or you can apply bounds by passing first parameter to true. The second parameter is sticky which is useful when you change element's parent as you are dragging, if you set it to true then element will stick to pointer even if element's parent changes.

I was creating a demo, but looks like @OSUblake responded already.

You can add them inside node_modules/gsap if that is fine for you. Adding them to a separate folder so you can track them will be a bit tricky. We had that discussion in following thread.

Following is another thread with angular 2 that might help you.

@Jonathan Strangely all three demos behave same as OP's demo on windows in both Chrome and Firefox. Only your demo with 'white-space' works as solution.

Quote

The all-knowing Oracle of CSS never disappoints. Well done Sir @Jonathan ?

We all are like Human Browsers at different levels. @GreenSock and @OSUblake(with Canvas) are 100% Human Browsers. @Jonathan is 100% Human Browser with all cross browser support plus he comes with quirk modes as well.

It works same in both versions to me in Firefox. In chrome it works as you are saying but that is incorrect behavior. It must be happening due to some quirk or incorrect values reported by Chrome. That's why it has been fixed, as 1.19 is 2 year old.

You should group your all three parts together and animate that group instead. And use latest versions of files to get consistent behavior across all platforms.

The bonus plugins are not hosted in any public repository. You will need to download them from your dashboard and add them manually to your project. Take a look at NPM usage page in the docs, that might help.

https://greensock.com/docs/NPMUsage

Quote

In the meantime does anybody have any idea why when I use the latest TweenMax script, the xPercent only takes effect on 1 of the 3 elements?

All three elements are animating but you xPercent is based on percentage of element's own width and yPercent is based on height. So one element has noticeable translate but other two elements just move 1 or 2 pixels so you don't notice any animation on them.

Try handcoding SVG you will save a lot of time when it comes to simple shapes and lines like these.

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368