Jump to content
GreenSock

web_roll

First GSAP animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I am fairly new to GSAP & JS as a whole so sorry in advance for such a probable basic question! I have spent the last couple of days creating a basic animation with ScrollMagic which works as intended:



When I load it onto our site it still works, but it seems to cause a significant amount of repaints in the browser causing an unwanted lag when I scroll. 

So my question is - Looking at the code on Codepen, have I set this up correctly? Could it be simplified into fewer scenes to help speed this up?

Thanks again!

See the Pen JBrBxb by web_roll (@web_roll) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Congrats on creating that animation. Really nice.

 

Unfortunately SVG doesn't benefit from any type of hardware / gpu acceleration with CSS transforms (x,y,scale, rotation) as regular DOM elements do.

From my understanding the SVG needs to be re-calculated and re-rendered on each tick. The more complex your SVG... the more processor intensive it is going to be to animate.

 

I looked at your code and definitely didn't see anything jump out as wrong. However, I don't use ScrollMagic at all so I'm not sure what the best practices are there. I have a hunch that any lag you are seeing is more directly related to the complexity of the SVG than anything else.

 

 

  • Like 4
Link to comment
Share on other sites

Hi Carl, 

Thanks a lot for that explanation, I figured that much but wondered whether trimming down the JS code into fewer timelines might help.

It's funny how it loads perfectly on iPhone but not desktop! Anyway, thanks again, I'm having a lot of fun with GSAP so far, maybe I'll get back to actual work someday soon!

Link to comment
Share on other sites

The codepen runs smoothly enough on my machine.

 

FWIW maybe try removing animation elements on by one and try to find the point at which it is starting to lag, may give you some insight into the problem.

 

Seems odd that it would run fine on a phone and fail on a desktop I would have expected the opposite. 

  • Like 3
Link to comment
Share on other sites

Yeah, I didn't see any performance issues on my machines either. That being said, my personal design preference is to limit SVG gradients and filters to only those that are absolutely necessary. Just my two cents worth. YMMV. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Hello,

Thanks for both your insight & your two cents, much appreciated.

I will dull down the SVG a little bit & work on optimising it, I read somewhere else about the linear gradients so will see how I get on testing!

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? The first pen below shows 1.19.0, the latter uses 2.0.1

Thanks again
 

See the Pen JBrBxb by web_roll (@web_roll) on CodePen

See the Pen WKYdYb by web_roll (@web_roll) on CodePen

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Weird how it works fine with the old version but not the new version though...

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

[Sorry about the late reply]

 

For the record, the newer behavior is indeed the correct one, as @Sahil mentioned. One of the main challenges here is that I don't believe that SVG transforms even recognize %-based translation values (at least in the transform attribute). In the spec, I only see px-based units (well, more like a viewport unit because SVGs scale). Some browsers may go beyond the spec and support %-based values anyway, but GSAP has to be very concerned about compatibility and consistent behavior across browsers, so we're translating percentage-based values into px-based ones (and baking them into the matrix). 

 

Happy tweening!

  • Like 3
Link to comment
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.
×