TimelineMax TweenMax.to(backgroundPosition) > simultaneously two div

[david 0 Likes (Newbie)]

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

[Rodrigo 3,567 Likes (Superhero)]

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

[david 0 Likes (Newbie)]

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

[Jonathan 5,324 Likes (Superhero)]

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?

[david 0 Likes (Newbie)]

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.

[jamiejefferson 1,193 Likes (Superhero)]

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%'});

[Jonathan 5,324 Likes (Superhero)]

NIce catch Jamie.. looks like initial value for background-position isn't 0 0 but 0% 0%

 

Good find

[david 0 Likes (Newbie)]

thanks !