Jump to content
Search Community

TimelineMax TweenMax.to(backgroundPosition) > simultaneously two div

david test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:



Link to comment
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 comment
Share on other sites

  • Solution

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 comment
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.
  • Create New...