Varinator

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 ?

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() ?

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.

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.

Bumping this as I came across similar issue, trying to make a responsive scene work in IE11. Is it still not possible to use percentage values on SVG child elements? This works in Chrome: <g id="chicken-whole">...</g> chickenMoveLeft = new TimelineMax({repeat: -1,transformOrigin:"50% 50%"}); chickenMoveLeft .to("#chicken-whole", 2, {x: "-80%", ease: Power0.easeNone}) .to("#chicken-whole", 5, {x: "-80%", ease: Power0.easeNone}) .to("#chicken-whole", 1.2, {x: "0%", ease: Power0.easeNone}) .to("#chicken-whole", 2.5, {ease: Power0.easeNone}); but it doesn't work in IE11. If I use xPercent - it still won't do anything in IE11. Is there a workaround for this? Do I really have to wrap everything in individual div's?