Alexyn0o

Help needed with background-position animation related to mousemovement

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

Share this post


Link to post
Share on other sites

Hi @Alexyn0o,

 

Welcome to the GreenSock Forum.

 

Here are two interesting posts:

 

 

Happy tweening ...

Mikel

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

Am I the first one here to say u shouldn't animate backgroundPosition, but instead try to stick to transforms?

  • Like 4

Share this post


Link to post
Share on other sites

I'd second that. Animating the backgroundPosition can be problematic. I'd avoid that and use transforms.

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hi @Dipscom,

 

I did not know that you have a weakness for architecture.

 

Kind regards 

Mikel

 

 

  • Like 1
  • Haha 2

Share this post


Link to post
Share on other sites

Dearest @mikel,

 

The beauty of harmonious relationship between shapes, colour, light and shadows transcends flesh.

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Understood! I'll keep that in mind.

Thank you for pointing that out. :)

 

Stay awesome guys.

Until next time..

 

Regards,

Alex

  • Haha 1

Share this post


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.