Jump to content
Search Community

Carousel or Parallax Effect

Sphinx test
Moderator Tag

Go to solution Solved by Carl,

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

I don't know how to correctly articulate this question. 

In GSAP when I move the image 'left' it goes off the screen, when I repeat, it jumps back to the initial position. Is there a way to make it so it 'repeats' in a kind of carousel effect/loop? / like repeat-background x, where the background is touching when there is no more space.

 

Or will I need to use a larger picture or more than one picture. Somehow I think stagger might be able to be applied here but I'm not yet sure how to apply it to get the effect that I want. I also thought about a globe or a sphere and having that bigger than the canvas and rotate but it just seems much simpler than that.

 

(I articulated that the best I can but will try again), so when Left moves off the screen, instead of jumping backwards, it starts directly behind it, so that it looks like it is never ending?

 

See the Pen RGaRQK by eternal_wanderer (@eternal_wanderer) on CodePen

Link to comment
Share on other sites

Hello Sphinx,

 

There really isnt anything to make it loop seamlessly, since it depends on what starting CSS properties you want it to match your ending values and the HTML markup.

 

I think the issue is that you would need it to either start off with .twinkle hidden and fade in, so the red is shown at first. Since when .twinkle fades in and scales up at the end of the tween, it ends with a red background-color. So you want both start and ending colors to be the same.

 

Either .twinkle needs to start out red and fade to green while scaling or it needs to fade from red to green at the end of the tween so you match the beginning background-color of green. Its more of getting your initial CSS values setup so they match colors in the start and end. You might have to adjust your HTML and CSS to make it loop seamless.

 

You know what i mean?

 

But there might be something to make it seamless loop but i will need to research that or ask my honorable Sensei Carl and Jack if maybe the GSAP Modifiers plugin could help in this instance, but I'm not sure.

 

:)

Link to comment
Share on other sites

I'm kind of confused how the codepen relates to the question. I didn't see any left to right movement of anything. Just what a appeared to be a huge pixelated image scaling up and down while some colors changed.

 

However, if you are just trying to simulate how a background image repeats (tiles) with a foreground image you will need to have multiple copies of that one image and a repeating tween like:

 

http://codepen.io/GreenSock/pen/rrZWmw

Link to comment
Share on other sites

Sorry you guys for the confusion.

 

The codepen I linked didn't automatically save the changes I made to my fork of the last codepen I used (so I didn't have to find all the links again). I've updated the codepen with what I am referring to.

 

I'm trying to make a parallax effect, so I have a background that moves "left" off the screen. But instead of the picture just 'ending' I want it to loop back around if this makes sense. I apologize, I thought the codepen saved it, and didn't realize when I exited that it hadn't (at least since it auto-updated).

 

 

The pixelated image is just a dummy image but yes! So to simulate how a background image repeats, or in essence to create a horizontal parallax 2D side scroller effect, I would have to take many images cut up to make it repeat across. I have Overflow-X disabled so that I don't have to use the horizontal sidebar, is there a way to have it all loop around on the "Y" axis.

 

Sorry not sure if I am verbalizing correctly, hopefully the updated codepen shows what I mean. I'm trying to create a horizontal parallax effect/carousel effect, with different backgrounds moving, but not sure how to do that with greensock.

 

 

^ Here where the left image moves off the screen, I was trying to figure out how to have it come behind it. To do that I would have to follow it up with the same image (and any extra images) right behind it? Similar to the codepen linked above?

Link to comment
Share on other sites

Welcome to GSAP Forum buddy!

Here's my solution to your awesome post! Your GSAP codes are looks good!
Just add background-attachment: fixed; on your .twinkle selector!
 

.twinkle {
 @extend .scene;
 background-attachment: fixed;
 background-image: url("http://www.script-tutorials.com/demos/360/images/twinkling.png");
 background-repeat: repeat;
 background-position: center;
 background-color: green;
 z-index:1;
}

Here's the codepen demo!

See the Pen dprdxB by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

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