Jump to content
Search Community
deb 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

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

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

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

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