Sahil

I couldn't reproduce that behavior using snippets you posted. Can you post that as reduced test case demo?

@alessio Sorry I am not sure what effect you are trying to achieve and what problem you are facing. It will be great if you rephrase your question and post a simple demo that shows your problem.

Quote

I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids. 

I was on a mission to win 7 days straight, had to give up all hopes when I saw Blake online today. Looks like I will have to start over again someday.

Still 2 more to go, if anybody has 10 questions please post them today when none of mods are online.

Quote

If you've ever heard about the FLIP animation technique, that's basically what @Sahil was showing you.

   I thought you will never mention FLIP on forum again.

It was supposed to be,

if (
  target.classList 
  && (target.classList.contains("map-card__header") 
      || target.classList.contains("map-card__close"))
) {
  target = target.closest('.map-card');
}

Why it still worked then? Because in your demo if dataset.mapCard is undefined then animation would reverse.

Quote

event.stopPropagation();

That is used to stop event bubbling. What was happening was, you were listening to click event on map card and close button so when you clicked on close icon, your timeline would start reversing but then even would get bubbled to the parent that is map card and it would again play your animation so you must have felt that close doesn't work.

In following demo animation is set to play or reverse when you click on '.container' but all three elements are listening to click event. So

1. if you click on edge of container then animation will play or reverse.

2. If you click on edge of wrapper then nothing will happen because event is getting bubbled twice

3. but if you click on center then animation will play or reverse because event is getting bubbled three times. So lets say animation is reversed, it will start reversing then playing and again reversing but you will only see it getting reversing because everything happens at the same time.

I thought you meant you want video to play when you hover text and pause when you mouse out.

I have updated the demo and wrapped your content boxes in a wrapper so you can use that wrapper to listen mouse events.

Adding delay to tweens using delay method does not get affected by the TimeScale but it seems like it does get affected by globalTimeScale or timeScale of parent timeline. So you will need to set timescale on individual tweens instead of timeline.

if you want to change globalTimeScale or parent timeline's timeScale and want the tweens to keep delay then you will need to update delay and multiply it with timeScale.

Easiest way would be to change your click handler to header so your map card won't listen to click event.

Alright, I ignored that part completely. To play, pause video you need to select the video element and use it's play or pause method and you can reset time by setting currentTime property to zero. Check the updated demo.

The way you have created your tweener class(or is it Blake's demo? ), it takes one container as trigger element and runs the animation on all items that you pass. If you want to trigger animation independently then you will need to create multiple instances of Tweener and add items to them.

Do you mean like this?

Nice question. I have had similar question but never bothered too much about it because it works. I will try to explain with what I know.

JavaScript runs in a single thread so it will execute all statements before rendering/updating the page. So let's say on click event you are executing a function, JavaScript will execute all the statements before rendering the layout. In following demo you can see a there is a loop that executes 10 times it executes 20 statements of TweenMax and many more that you don't see from library. In console you can see that it takes about 2-8 miliseconds to execute the loop, it can vary depending from system to system. Once all statements are executed then browser will update the layout with any changes that occurred.

Now for your animation to run at 60FPS browser must update any changes every 16 milliseconds so if you are doing a lot of animations that take more than 16ms, it will start degrading the performance by dropping the frames because JavaScript is busy executing other stuff. In demo, If you change the count to something like 5000, you will see that it takes browser about 1500ms to execute the loop. If you log the performance of the page using devtools you can see that for that time browser never rendered anything so no question of seeing jumps, just horrible user experience.

Interestingly, just today a video was published about whole JavaScript event loop that talks in detail how JavaScript is executed, I haven't seen the video yet but it will be worth watching. You will find a lot more videos on that channel about everything in details.

An article that talks about rendering and performance in details, https://developers.google.com/web/fundamentals/performance/rendering/

Another article worth reading that talks about how different scrolling methods affect the performance https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

Another thing is how animating certain properties affects the layout, for example if you animate left, top, height or width it will trigger the layout and browser will have to recalculate entire page. While animating transforms won't cause layout trigger in most browsers. On following page you will find list of browsers and what property triggers what, so you want to avoid those triggers wherever possible for better performance.

https://csstriggers.com/

About how animations work, at core GSAP just calculates over time with different easing formulas and set those values on the element. So basically you can animate numbers of any object, that's why it is very easy to use GSAP to animate different libraries like Three.js, PIXI js etc. GSAP uses the requestAnimationFrame function which makes sure everything animates at constant frame rate given that you don't animate too many pixels at once.

Following is simple demo of how you can ease using simple Math,

But of course GSAP does a lot more than simple easing, it makes sure that your animations execute at exact duration that you set and a lot of other work to work around different browser inconsistencies.

Possible with modifiersPlugin. Though out of box solution sounds interesting to me.

@GreenSock Isn't there a property that will snap object to the start point of path before animating? I think I have used it once but can't find it in docs.

Here is how you can animate element as you change it's parent. You can do that by recording element's old and new position using getBoundingClientRect and then animate the difference using from tween.

Problem is you are using timeline to animate three elements with random sequence. So lets say you click on circle and quickly click on body, then your both timelines start almost at same time.

1. The body click event's timeline finishes first tween and sets the alpha of '.copy' to zero but by the time it reaches third tween.

2. Your hotspot click event's timeline reaches third tween which sets alpha of '.copy' back to 1.

You can get around that by maintaining two arrays that will hold your timeline at that index so you can kill the animation.

Take a look at following thread with similar idea, it uses same animation to play or reverse but you will find it helpful in future.

In your demo you were using TweenMax 1.20.3 under javascript settings then you had TweenMax 1.20.4 link added under HTML setting. You don't need TimelineMax when you are using TweenMax, it is bundled with it.

Also, in the demo you are mixing jQuery with vanilla js randomly it will lead you to a lot of errors and confusion.

You can do that by only start animating once scrollY is greater than element's offset. Then use window.innerHeight to set progress. You can use innerHeight to set the percentage, the way scrollMagic trigger works.

https://www.kirupa.com/html5/get_element_position_using_javascript.htm

https://stackoverflow.com/questions/19618545/body-scrolltop-vs-documentelement-scrolltop-vs-window-pageyoffset-vs-window-scro

You can improve performance by avoiding calculating offset every time you scroll by saving it as Skroller property and calculating it on resize.

Quote

Am the only one? that shocks!!! that everybody use the method TweenMax.to

You can use TweenLite PixiPlugin as you don't really need all other plugins bundled within TweenMax. TweenMax also has some additional methods like stagger tweens, killAll, pauseAll, globalTimeScale etc so if you don't need them you can use TweenLite only. . There is of course less code to execute in TweenLite but you probably will never notice any difference.

Quote

Is it not ? more logical for the performances to initiate one time only this class ?, and then modify these parameters with a scope.

You mean initilize TweenMax just once? Performance has always been main focus of GSAP so I doubt @GreenSock will miss something obvious.

You need to set dragClickables property to true. Also, you were using 4 year old version of draggable. Latest version 1.20.4 will fix any issues you are having.

@WilliamBay Happy to help! It looks beautiful. Nice work.

@jonForum No problem at all.

I gave it a try using ThrowPropsPlugin, see if it helps.

I also tried to ease it in a way where object will slow down before animating reverse but I doubt that will be possible, maybe Blake can suggest something.

Also, try avoiding easeIn and easeInOut because they behave very unexpectedly.  @GreenSock can explain why that happens.

That's pretty unique approach I have seen for the first time. I don't see any issue with it except the play part. I will try to explain.

When you tween something GSAP records the start and end values to optimize performance plus that's what tween engines do I guess. So when you play the Tween GSAP will record the values and and if you play that tween again it will repeat the same animation. Which you can see in following example. If you click again on window you will see that GSAP is repeating same animation, instead of taking into account new value.

You will also notice that I am passing 0 as argument to the play method, if you remove that you will notice that after first run animation won't repeat. That's because playhead of animation is already at the end so there is nothing to play further.

So to get around it you will need to invalidate your tween which will cause GSAP to record new values and your animation can move to new location.

Though you will still need to pass the zero because even though you invalidated the tween the playhead is at the end. Does that help?

I am just getting started with PIXI but this seems like an interesting thread so feel free to ask any questions. @OSUblake will join the conversation once he gets online.

Also, most of the resources are targeted towards web developers so I don't think you will find a lot of useful tutorials for you. But if it helps you can visit the YouTube channel: https://www.youtube.com/user/GreenSockLearning

There is also learning page link at the top of menu but I doubt you will find a lot of help there, so feel free to post your questions.

Hey @jonForum

Unfortunately no. You can chain certain methods but can't do something similar for easing. Your best way would be write your properties per line, far easy to read or comment out.

TweenLite.to(obj, 2, { 
  pixi: { 
    pivotX: x, 
    pivotY: y 
  }, 
  ease: Power2.easeOut 
});

Here is simple example. Trick is to animate scaleX so element looks like it transitions out and new element comes from left and changing transform origin of your element. Also animating scale instead of width gives you far better performance.

You can check that using tl.reversed() method.

Quote

See... this is why it's Jack against the whole mod team. (and we'll still probably lose)  

@OSUblake Would be on our team. Let's have a code off between Blake and Jack. I will some popcorns.