Sahil

I would say use draggables events instead as it will keep things organized, check docs for equivalent events.

If you still want to use event listeners of your own then you need to set "allowEventDefault" property to true while defining the draggable.

You were using really old version of TweenMax. Current version is 2.0.1

TweenMax internally uses for loop instead of forEach that's why it performs far better. A bit less convenient but far better for performance.

https://stackoverflow.com/questions/43031988/javascript-efficiency-for-vs-foreach

Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.

On line 237 you are setting time to zero which causes animation to complete and your blocks end up in end position. If you uncomment that you will notice it continues animating.

Though please avoid posting such demos with 100+ lines as it takes a lot of time to go through unfamiliar code to figure out what is going on and what is suppose to happen.

Also, I edited your question because other users can't see your demo when you are posting links in 'full page' mode. I had changed it to 'editor mode' but you seem to have undo it again.

You seem to be right about it,

1. Setting small rotationX works as expected.

2. Setting transform perspective from GSAP without rotationX doesn't work as expected.

3. Setting perspective in CSS works as expected.

You need to set perspective not transformPerspective. Even I got fooled by your demo. You are confusing transformOrigin and perspective.

You can do that using MorphSVGPlugin. It is part of club membership but on codepen you can use it for free to practice.

Very easy if you are familiar with SVG.

https://greensock.com/docs/Plugins/MorphSVGPlugin

Your parent element didn't have display and position property set. In most browsers you need to set them to make overflow hidden work.

And renaming your tree class worked because it was setting position of tree to absolute.

It is happening because how from tweens work. When you rebuild your timeline, you are setting timeline's progress to 0. At progress zero your element is at 100% so first tween goes from 100% to 100%.

Easiest solution would be to use fromTo tweens.

No there is no setting to set maximum velocity. You can instead set  max and min duration and resistance. Check throwProps under 'Config object properties' https://greensock.com/docs/Utilities/Draggable

What you are doing might be done without Draggable, you can use ThrowPropsPlugin directly to track velocity. And use Physics2DPlugin.

https://greensock.com/docs/Plugins/ThrowPropsPlugin

https://greensock.com/docs/Plugins/Physics2DPlugin

Ya you can create a DOM element and use that as proxy and use your target element as trigger.

To get velocity you need to use ThrowPropsPlugin, check 'Getting the velocity section' in docs: https://greensock.com/docs/Utilities/Draggable

They use canvas to display video in different blocks as trying to play 5-6 videos at once is going to decrease performance.

Take a look at following simple example that shows how you can draw video frames to canvas or you can use PIXI JS to do same thing.

http://lamberta.github.io/html5-animation/examples/ch04/12-video-frames.html

I am not sure what is going on here but but IE is doing really weird stuff. I would definitely recommend getting club membership and using drawSVGPlugin.

I reduced the demo to 2 paths and I am noticing following behavior,

1. If I don't use getTotalLength method then animation works but ofcourse you want to get length of path so not the solution.
2. If I remove stroke-width from path then animation works even if I use getTotalLength.
3. So basically using getTotalLength and stroke-width together causes animation to freeze.
4. If I use both and instead of animating single path if I animate all paths then animation works.
5. If I remove all other paths and use 'path' query selector then animation freezes again.
6. I tried using different svg and it behaves same

@GreenSock what is going on here? This has to be weirdest thing I have seen so far. I can understand that it can be rendering issue but how does getting total length affects it. Super weird.

34 minutes ago, themepunch said:

Sorry to being a pain and for disturb you guys with something which is not GS based at all.

If you wish, please just close the blog, since it is a Safari Issue and not a GS issue.  

Don't worry about it, it is still indirectly related to the forum. @Jonathan is CSS wizard, he loves taking on such questions. I am sure he would be able to offer the solution as long as it isn't a bug.

Ya I am in same boat. Why would you bother with with recording time etc? Unless I am missing something, you are taking really wrong route to achieve this.

And if you really want to use something like setTimeout then you can instead use delayedCall and update it on mousedown.

Depends on how you have implemented it. I noticed following error as I try to scroll,

Quote

Value can't be converted to a dictionary.

Though we can't really spent time trying to debug live sites. I would suggest to try implementing it from scratch on something simple. Once you figure out how it works you will be able to implement it on live site.

No you can't do that with DOM. It uses paths to achieve that effect, which can only be used in either svg or canvas. Following is demo by waaark, it should be good starting point.

Take a look at these two threads, it is pretty advance topic but demos in there would help you achieve the effect.

Not exactly sure what effect you want help with,

1. If you meant the first title, it probably uses svg filter with displacement map.

2. If you meant scrolling effect, here are couple of threads you can read to achieve that effect.

3. The background animations are most probably videos, or you can achieve them using PIXI JS.

4. The skull that you hover on at the end is just simple image that is scaled up on hover.

Ya certainly possible, here is one demo by  @OSUblake and you will find some more useful posts and demos by him on forum or codepen profile.

Quote

I am just curious why the element get a color:rgba(255,255,255,0); background-color:rgba(255,255,255,0);border-Color:rgba(255,255,255,0);  at setting or tweening things to "inherit".  I would except color:inherit; background-color:inherit... on the element.   

GSAP doesn't support 'inherit' and treats it as any random string that wouldn't be a color so it animates to default rgba value.

I understand what you are saying about clearProps, I think it has to do with the how add method works. @GreenSock can explain more accurately what is happening in this particular case but in the mean time take a look at following thread with similar issue.

I instead used set method of timeline directly and it works as expected.

That is happening because your child timelines are paused so when you add them into the parent timeline, parent timeline starts playing but tweens remain paused. That's why when you click on 'play 1 and 2' nothing happens.

When you click on 'play 1' and 'play 2' they jump because your parent timeline is complete and playhead of child timelines is tied to parent timeline. I doubt you can play child timelines independently, though you can tween them.

Ya same approach could work by using staggerTo tween instead.

Ya onRepeat fires after repeat delay. I am not sure how staggerTo will fit into this scenario.

I think you can use timeline with set call at the end, or use onComplete callback of the tween inside timeline.

Problem was your box was covering the buttons so subsequent clicks were not happening. You either change the z-index of the elements or change the order in html.

Also, you don't need to add your tweens in the timeline, it is going to add new tweens to your timelines on every single click. Using tweenmax or local timeline is enough in this scenario. I also tweaked your conditions as second if statement was unnecessary.