Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
david

TimelineMax TweenMax.to(backgroundPosition) > simultaneously two div

Recommended Posts

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

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

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

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

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

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%'});
  • Like 1
Link to post
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.

×