selfishound

TweenMax is blocking Jquery

Recommended Posts

I have two javascript elements here:

1. The green box moves upwards and stops. - Done with GSAP TweenMax

2. The green box parallaxes as you scroll down - Done with Jquery

 

The problem here is: 

   when you start scrolling before GSAP is finished, the parallax doesnt work. Once the animation is over, Jquery makes the box jump into its intended parallaxed place. This can be replicated by scrolling down a bit and then wait for the animation to finish and then scroll a bit more to make jquery set in.

 

What I want:

  I want them to work at the same time

 

Thank you very much.

Share this post


Link to post
Share on other sites

@selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there 🤣). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around.

 

So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

This is incredibly helpful. Thank you very much!

 

@Shaun Gorneau

 

Now I am doing it all in GSAP :) But I do have another question for which I have another pen here:

 

 

 

This time we have:

1. Text moves up

2. 2 blur effects follow

3. all while parallax is activated

 

problem:

I hope you can reproduce it, but it seems to

1.sometimes run a bit glitchy and jump, as if the parallax and blur might be affecting each other (i guess blur is a performance heavy calculation?);

2.sometimes the blur freezes until I scroll;

3.sometimes the last blur effect never happens, it never returns sharp.

4.the first blur effect seems to be unaffected by the ease;

 

It must be my approach, so I a wondering if maybe there should be another timeline or something?

 

Share this post


Link to post
Share on other sites
On 12/1/2018 at 3:54 PM, selfishound said:

problem:

I hope you can reproduce it, but it seems to

 

1.sometimes run a bit glitchy and jump, as if the parallax and blur might be affecting each other (i guess blur is a performance heavy calculation?)

 

 

Reducing the progress value to 3 decimal places ... in Chrome, Safari, and Firefox I don't see too much jumping around (minimal and infrequent ... which is par for the course as far as any of my experience with parallax).

 

On 12/1/2018 at 3:54 PM, selfishound said:

2.sometimes the blur freezes until I scroll;

3.sometimes the last blur effect never happens, it never returns sharp.

4.the first blur effect seems to be unaffected by the ease;

 

 

2. I'm not seeing this ... but I do see browser inconsistencies with the way this attribute is tweened. Firefox tween smoothly between the values ... Safari seems to tween in whole integer steps, and Chrome seems to not tween the value at all.

 

3 + 4. I think this has to do the browser you're viewing this in and the fact that the values are small (0 to 3 then 0) and it is simply jumping quickly to the values (without tweening between the values). 😕 I tweened from 0 to 40 to 0 just to get something visual happening for my tests (in item 2)

 

I wish I had a better answer :( Hopefully someone else does :) 

  • Like 1

Share this post


Link to post
Share on other sites

A few comments:

  1. filters (especially blur) are very CPU-intensive, so be careful. This has nothing to do with GSAP - it's a browser rendering thing.
  2. Various browsers render the same blur value differently. For example, a stdDeviation of 3 is barely blurred in Chrome whereas it's very blurred in Firefox. If you crank it up to 10, you'll notice it in Chrome (and of course it'll be SUUUPER blurry in Firefox). 
  3. Be very careful about running logic on every scroll event (as in $(window).scroll()) because the browser will fire those VERY frequently during scrolls...like it could be over 100 events in less than a second. That's wasteful because the screen isn't updating any more frequently than 60 times per second in most cases. I'd recommend throttling those. 
  4. If you look at DevTools, you'll see that GSAP is doing exactly what you're asking it to do (update the stdDeviation value of the blur), but various browsers render the values differently, as mentioned in #2 above. I also believe that some browsers will only render whole values for certain things. So for example, if you animate between 0 and 3, GSAP will appropriately interpolate (with lots of values, like 0.1, 0.1247, etc.) but the browser may only actually render the closest integer value, like 0, 1, 2, and 3. Again, this has nothing to do with GSAP - it's a browser thing. 
  5. You might want to look into using <canvas> instead of SVG. I'd bet it'll perform better and give you more consistent results (though it's a bit more work). 

I hope that helps. 

 

  • Like 4

Share this post


Link to post
Share on other sites

Hi @selfishound and Welcome to the GreenSock Forum!

 

Sorry your having issues! To add to all the helpful advice given above ;)

 

When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag.

 

You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered.

 

You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace.

 

Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/

 

Also you might want to place your <filter> tag inside an SVG <defs> tag.

 

SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

<defs>
  <filter id="logo-f">             
     <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/>
   </filter>
</defs>

 

Here are some examples of animating SVG filter blur using GSAP:

 

 

And this other one animating SVG filter blur:

 

 

And then there is also animating CSS filter blur property examples:

 

 

And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin .

 

 

Just my 2 cents, hope this helps :)

  • Like 5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.