Jump to content
Search Community

Performance issues with storyboard animation

Varinator test
Moderator Tag

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

We are building a quite long storyboard which consists of about 12 scenes. Basically, you scroll down the page and things happen: SVG animations, curtain div's coming down and up, pinned screens etc. 

We have a LOT of TimelineMax functions and we are starting to experience some performance issues, most likely because all the animations are still running even when not on the screen. Is there a way to stop/start functions to optimise performance? If you guys have any advice / links, please let me know.

Link to comment
Share on other sites

1 hour ago, mikel said:

Hello @Varinator!

 

Please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. 


https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ 

 

Kind regards

Mikel

 


It would be impossible for me to create a reduced demo as the whole issue here is that there is  12 scenes with a lot of animation going on which causes some performance problems. I also can't put unreleased project for out client on the web.... All I'm trying to find out is how other devs generally deal with the performance issues on their heavily animated projects.

Link to comment
Share on other sites

53 minutes ago, Dipscom said:

Hey there!

 

If you keep track of your elements, you can kill all of their tweens once they reach a particular point of your choosing with .killTweensOf() method.

 

I thought of that but the user can scroll back up so unless the animations can be "resurected" after being killed, this would stop the user from going back up. The whole 12 scenes are on one page. Also, does this method work with TimelineMax() ?

Link to comment
Share on other sites

Yes, it will.

 

You said yourself you are using functions to create the original tweens. It would be a matter of calling those functions again when you hit the desired triggers.

 

Having said that, depending on the complexity of your animations, it's not great to be recreating them all the time. In your situation, I would simply create references to the tween/timelines from the functions and pause/unpause whenever the need arises.

 

Have a look at this brand spanking new post and videos if you need some guidance on how to structure complex animation.

 

https://css-tricks.com/writing-smarter-animation-code/

 

  • Like 3
Link to comment
Share on other sites

4 minutes ago, Dipscom said:

Yes, it will.

 

You said yourself you are using functions to create the original tweens. It would be a matter of calling those functions again when you hit the desired triggers.

 

Having said that, depending on the complexity of your animations, it's not great to be recreating them all the time. In your situation, I would simply create references to the tween/timelines from the functions and pause/unpause whenever the need arises.

 

Have a look at this brand spanking new post and videos if you need some guidance on how to structure complex animation.

 

https://css-tricks.com/writing-smarter-animation-code/

 

 

Thanks for the info and the link.

All the animations are already broken down to a lot of separate timelines, running independently and triggered using "Scroll Magic". I believe that because they keep running in the background, they create performance issues.

The ideal solution would be to only play the ones that are currently in the viewport and pause everything that is not (as long as this actually helps with the performance?).  I can do that with Scroll Magic triggers I believe. If so, what do I do to pause and resume?  .addPause() and .resume() methods ?

Link to comment
Share on other sites

You'll be using the .pause(), .play() or .resume() methods depending on the situation.

 

You should see a significant improvement if you only have the visible elements animating. And it is perfectly feasible to achieve that with ScrollMagic, there are several discussions here on the forums on different ways of playing and pausing tweens with it.

  • Like 2
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.
×
×
  • Create New...