Animate elements out of the viewport and then inside

[xoxoxoxo]

Hello,

I'm trying to animate the images out of the viewport and then make them appear from the bottom as if they were wrapping around the height of the viewport. I'm trying to repeat this N times and then make the animation stop at the original position of the images.

Note: "0" on transform values doesn't start from the bottom

My modifier/wrap function doesn't make sense and I can't figure out how to fix t. Any help would be appreciate it!

See the Pen BaNMWJb?editors=1010 by taher-space (@taher-space) on CodePen

[ZachSaucier]

Hey nullhook. You've got to take into account the position of each element. Something like this should work:

See the Pen poJGpVJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[xoxoxoxo]

Thanks for this!

Another question would be: How can I instantly set opacity 1, then 0, and element's background all together?

t1
  .set(el, { opacity: 1 })
  .set(container, { backgroundColor: el.getAttribute("data-bg") }, '-=0.1')
  .set(el, { opacity: 0 });

[ZachSaucier]

6 minutes ago, nullhook said:

How can I instantly set opacity 1, then 0, and element's background all together?

That code doesn't make much sense. Given .set() runs immediately, then all 3 of your lines will run at the same time (well, sequentially, but only be rendered once after they are all processes). It's the same thing as just .set(container, { backgroundColor: el.getAttribute("data-bg") }).set(el, { opacity: 0 }).

 

What are you trying to do? Maybe explaining it in context of the demo would be helpful.

[xoxoxoxo]

I'm trying to turn each box's opacity on and off with respect to the background color. for ex, When the box's opacity is 1, the background color should also be set at the same time, and when the box's color is 0, the background color should also go away...rendering the next box. 

After it loops through all box's, onComplete it should stagger all the element's opacity on.

I believe this has to do something with overlapping? Here's the

See the Pen rNVPdEB?editors=0010 by taher-space (@taher-space) on CodePen

[ZachSaucier]

18 minutes ago, nullhook said:

I'm trying to turn each box's opacity on and off with respect to the background color. for ex, When the box's opacity is 1, the background color should also be set at the same time, and when the box's color is 0, the background color should also go away...rendering the next box. 

So you want the boxes to animate one by one? Then once every box has finished animating show them all?

[xoxoxoxo]

1 minute ago, ZachSaucier said:

So you want the boxes to animate one by one? Then once every box has finished animating show them all?

Yes. Opacity and background color should be set at the same time. As you can see in my code there is an odd delay between these.

[ZachSaucier]

You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure.

 

Sorry, I still don't understand what you're trying to accomplish. Your code is a bit murky. Is this a completely separate question from the previous one? Or are you hoping to mix the two?

 

And what's wrong with the demo that you posted?

[xoxoxoxo]

5 minutes ago, ZachSaucier said:

5 minutes ago, ZachSaucier said:

You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure.

 

Sorry, I still don't understand what you're trying to accomplish. Your code is a bit murky. Is this a completely separate question from the previous one? Or are you hoping to mix the two?

 

And what's wrong with the demo that you posted?

 

Haha. Sorry, I should give a warning!

Although, this should run on a different tween, I'm trying mix them all together.
The colors and images don't seem to come in and go out at the exact same time.

[ZachSaucier]

You should use the position parameter:

See the Pen wvaNjOL?editors=0010 by GreenSock (@GreenSock) on CodePen

[PointC]

25 minutes ago, ZachSaucier said:

You really should add a seizure warning before playing the animation - those jumping background colors could cause one for sure.

+1 That is quite jarring.

[xoxoxoxo]

@ZachSaucier The background color and opacity 1/0 doesn't seem to sync together? I'm not sure if moving positions would help? Perhaps creating a timeline and adding it to an array and playing each one of them together with 1s? I'm not sure how achieve this though.

The image, background and opacity should be connected like a layer I think.

[xoxoxoxo]

I figured it out by adding an empty set and overall delay to 0.

.set(container, { backgroundColor: el.getAttribute("data-bg") })
                .set(el, { opacity: 1 })
                .set({}, {}, "+=2")
                .set(el, { opacity: 0 });