Jump to content
Search Community

Fixing background issue when pinning scrollTrigger Animation

Puneet Sharma test
Moderator Tag

Recommended Posts

I am creating a page http://143.244.130.104/ which basically, has a map animation section where the animation on codepen has to go. When I try to set the animation from codepen to the homepage I can see issues with my background image.

 

So the background image on the hompage is from top to bottom which isn't the smartest thing to do, but it was required because of the design that had to be implemented. background is set using :  url("/wp-content/themes/lacadives-theme/dist/images/1920px-Desktop-BG.jpg") right center  . It actually properly fits the screen size. But when the animation is added my guess is it doesn't fit and it becomes bigger.

 

Starts looking like this.

image.thumb.png.1b2911bc94dac0d09b62237266e195d3.png

 

This only happens when pin is true in my scrolltrigger which makes sense as it increses the screen size for the animation to accomodate to the scroll.

 

Is there any way it can be solved with pin:true and it not affecting the background ?

 

See the Pen jOwXQqB by krenovate (@krenovate) on CodePen

Link to comment
Share on other sites

5 hours ago, Cassie said:

Hi there!

I don't see an image in this codepen at all. Could you clarify your question or add the code necessary?

Hey Cassie, yes the image is not in the codepen. The background image is on the website. http://143.244.130.104/ 

I was able to integrate with the issue, as I fixed a Yarn issue. You can see the issue on the link (I.P)

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...