I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's. I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy. I am wondering if there is anything I can do to up the performance.
Link:
http://melissamorgandesign.com/portfolio
Here are the tweens that are going on, the trouble seems to be scaling the div/bgimage while scrolling with scrollto. Going horizontal also adds a wrinkle.
TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}});
TweenMax.to("#div" + section, 1, {width:"60vw"});
TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0});
TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0});
TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1});
TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1});
TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1});
Any thoughts for smoothing this out?