Share Posted August 14, 2014 Hi,I am trying to animate two div in the same ScrollScene simultaneously but only once has animation, the second is not animated.I just made a fiddle for this problem, I have other ScrollScene before and after.Codepen URL: See the Pen qtsgi by dhenriet (@dhenriet) on CodePen Link to post Share on other sites
Share Posted August 14, 2014 Hi David and welcome to the GreenSock forums. I'm not seeing any animation in the fiddle you posted. Looking the tweens targets in dev tools, the background positions are not tweened progressively, they just jump to the values you indicate. Also there's no error in the console, so that throws me off even more. We don't support third party plugins that work on top of GSAP. We love getting back to the users and solving as much as we can, but for time reasons the focus has to be on GSAP related issues. Also I'm not very familiar with Jan's plugin. Perhaps you could go to ScrollMagic's repository for support or try StackOverflow, so other devs that work with the plugin can guide you better: https://github.com/janpaepke/ScrollMagic Link to post Share on other sites
Author Share Posted August 15, 2014 Hi Rodrigo, thanks for your answer. There wasn't tween on background position (set in pixel instead of percent), I updated the jsFiddle link in case of someone has a few time to look it. http://jsfiddle.net/gamedware/wdn8q6oh/ I already create an issue on ScrollMagic Github because I don't know if the problem comes from ScrollMagic or GSAP I am very worried because I have to make a parallax animation (so I choose ScrollMagic + Tween Js) and if I can't tween more than one <div> it's problematic. I understand you don't support third party plugins but I create a CodePen with only GSAP and I have the same problem, only once has a tween See the Pen qtsgi by dhenriet (@dhenriet) on CodePen Link to post Share on other sites
Solution Share Posted August 15, 2014 Hello david, I am seeing the same as Rodrigo.. no tweens animating. The only way i got them to tween was to use pixels instead of percent. Converting the percents to fixed pixel values. See the Pen nLhGw by jonathan (@jonathan) on CodePen var bgH1 = $('.vi-left').height() * 0.80; // height x 80% var bgH2 = $('.vi-right').height() * 0.85; // height x 85% TweenMax.to('.vi-left', 10, {backgroundPosition: '0 ' + bgH1 + 'px'}); TweenMax.to('.vi-right', 10, {backgroundPosition: '0 ' + bgH2 + 'px'}); Does that help? Link to post Share on other sites
Author Share Posted August 15, 2014 Hi Jonathan, thanks a lot, yes it helps ! It doesn't work because backgroundPosition was defined in percents in CSS, I need to use same unity to tween it. Link to post Share on other sites
Share Posted August 15, 2014 Sure, it will work correctly when you apply units to both values i.e. TweenMax.to('.vi-left', 10, {backgroundPosition: '0% 80%'}); TweenMax.to('.vi-right', 10, {backgroundPosition: '0% 85%'}); 1 Link to post Share on other sites
Share Posted August 15, 2014 NIce catch Jamie.. looks like initial value for background-position isn't 0 0 but 0% 0% Good find 1 Link to post Share on other sites