Jump to content
Search Community

Help needed with background-position animation related to mousemovement

Alexyn0o test
Moderator Tag

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

Hello, is there a way to integrate such an effect with GSAP?

 

I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position.

 

an idea/approach about what I'm thinking:

.. //


TweenMax.to(".top-image",  1, {backgroundPosition: newvalueX+"px     "+newvalueY+"px", ease:Power4.easeInOut})


// ..

 

ps: The pen is just a preview example for what I'm trying to achieve.

 

Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field...

 

Thank you,

Best regards!

 

Alex

See the Pen VrqrbN by Mojer (@Mojer) on CodePen

Link to comment
Share on other sites

Hi Mikel, thanks for the greet I'm happy to be here and eager to learn and share experience!

 

Thank you for the feedback too, based on the first post I managed to edit the code into something like this:

 

See the Pen MRJKLQ by Alexyn0o (@Alexyn0o) on CodePen

 

$(document).ready(function() {
    var movementStrength = 25;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();

  $("#bgmove").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
    var tlmovebg = new TimelineMax()
          TweenMax.set("#bgmove", {backgroundPosition: "center " + +newvalueY+"px"});
    });
});

 

It works.. (but not sure if it's the best way)

It's only moving on the Y axis... haven't figured out how to add the X axis variable yet.

 

And now I get an error in the console that says: 'too much recursion' - I understand it's an rangeError making too many calls but I don't know how to fix this...

 

Anyone mind giving a hand?

 

Thank you, I appreciate your time.

 

Link to comment
Share on other sites

Because it is not hardware accelerated and it is not calculated in the composite stage of the browser so the browser has to do more calculations than necessary.

 

You want to only animate transforms and opacity if you can help it.

 

I don't see how transfoming an element would cause the background of the element to be modified. Have you got a simple example where that's happening?

  • Like 4
Link to comment
Share on other sites

Sorry I don't know how to describe this... hope you understand what I'm trying to explain...

 

 

Look at the left of the screen "DaVinci statue" element being rendered from bottom-to-top on scroll because of the attachement: fixed.

Using TweenMax.set backgroundPosition for moving-animation, doesn't mess the scrolling effect and gives the element the movement.

But, if I use transforms to move-animate the image, then the "DaVinci statue" element would already be rendered fully because of the translations. It doesn't preserve the attachement-fixed "parallax feeling" on scroll.

Link to comment
Share on other sites

Thanks for the example.

 

I took the time also and made these examples for a better understanding.

 

 

 

See the Pen MROxJJ by Alexyn0o (@Alexyn0o) on CodePen

 

vs

 

See the Pen JVOzqw by Alexyn0o (@Alexyn0o) on CodePen

 

So, I need the first example where the statue is being fixed by background-attachment so that the scrolling makes visible(reveals) the image from bottom-to-top vs second example where the visibility of the statue is already full when you scroll.

 

First example is fine for me. But are there bad implementations with gsap (.set for bgPosition) that makes the performance poor? Should I find a new solution into achieving this effect with translations still? 

 

ps: Just by applying any transform to the #statue element makes it's background- attachment null.

 

Thank you all for your time and information,

Hope you have a nice day

 

Alex

Link to comment
Share on other sites

4 minutes ago, Alexyn0o said:

Should I find a new solution into achieving this effect with translations still? 

 

Bottom line here is the context. "Poor performance" is relative. Is your user's computer going to struggle with that implementation? How much more interaction are you going to have going on at the same time?

 

You don't HAVE to change your current code just because we said it's better to use transforms and opacity only whenver possible. Specially if it is working and not causing problems. There's no point on you spending hours on this when you could be completing the rest of your project.

 

Just be aware that animating the background position is not as efficient as using translation. If your animation starts to get janky, that's a place for improvement.

  • Like 3
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...