Jump to content
GreenSock

deb

Fixed background with horizontal moving loop

Recommended Posts

Hi,

 

Can the animated background be created differently?  The animation loop is not smooth. After a while, it resets with a shake.

 

I want to make the sky fixed in its position and scroll only the floating parachutes with Micky. Suppose there will be about 100 Micky mouse. Can't able to make the clouds fixed. 

 

Thanks in advance!

See the Pen jzwxzM by debrajr (@debrajr) on CodePen

Link to comment
Share on other sites

I read it couple of times, but not sure what you are trying to do. Check the discussion in following similar thread,

 

 

Animating 100 elements will be overkill, you will probably be better using canvas.

  • Like 2
Link to comment
Share on other sites

Thanks for the reply. I am looking for this:

See the Pen bvRPrm by debrajr (@debrajr) on CodePen

 

The background is limited to the div. When the content is long, it doesn't show up. I want to make the background fixed and the loop will keep going on and text can be scrollable. Just like a CSS background-attachment: fixed; do but with animated background.

Link to comment
Share on other sites

5 hours ago, deb said:

I want to make the sky fixed in its position and scroll only the floating parachutes

 

Are you sure you are accurately describing what you want, you say the sky is meant to be fixed which I  interpret as unmoving yet your codpen seems to explicitly intend to move it.

 

I suspect you actually mean an infinite scrolling sky?

Link to comment
Share on other sites

Hi, Sorry if my description is not clear. I want a moving sky which is positioned fixed. The contents of it can be scroll down, but the infinite moving sky should remain in the same position. Imagine like texts moving on a video. So the video playing in background and texts over it can move independently. Hope that helps.

Link to comment
Share on other sites

You can use an element with fixed position as background, it will scroll along the page.

  • Like 1
Link to comment
Share on other sites

It's not working that way. I have tried. You can see here: 

See the Pen jzwxzM by debrajr (@debrajr) on CodePen

 

The background is not showing up when you scroll through the contents.

 

Link to comment
Share on other sites

Is this what you are trying to do? I changed how you were creating your tweens because you can use staggerTo tween to do same thing instead.

 

See the Pen MVEWNW?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Just made your sky container's position fixed. Changed easing on mickys to Power1.easeInOut because you are animating elements for long time to short distance so it was looking stuttering. With easeInOut animation will be fast at start and end so you won't notice stuttering a lot. Changed your tweens to staggerTo tween. And commented out anything that wasn't important. And added new div tag for content.

  • Like 3
Link to comment
Share on other sites

Awesome! Thanks! :)

  • Like 2
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.
×