GSAP parallax Random Polygons

[DD77]

I'd like the polygons to be more smooth and the scroll to be more "parallax" feeling.

I'd also like the functionality to be a bit more dynamic, possibly.

The Polygons, should move smoothly on scroll , appearing on different sizes and positions, perhaps colours. Its all dove in css. 
 
If anyone ha an example of code or something that would be great.

See the Pen XBMEqV?editors=1010 by davide77 (@davide77) on CodePen

[Carl]

It looks like you may have saved that pen in a broken state. I wasn't able to see anything at all when I ran it.

 

FWIW I don't think I have any examples of what you describe and it would probably take quite a while to refactor what you provided.

Unfortunately we can't offer general coding support and its really hard to know what you mean by make things "more parallax feeling" or "a bit more dynamic possibly". 

 

My suggestion for now would be to investigate using the cycle property in a staggerFrom() animation. It will allow you to add whatever variance you want to each animation: https://greensock.com/cycle

 

If you have a question specifically related to GSAP, let me know and I'll do my best to answer it.

[DD77]

@Carl thanks for your support, as usual really helpful. 
I saved the pen and now you can see the animation triggered and the GSAP working. Unfortunately it doesn't feel at all parallax. 

Any thought?

[OSUblake]

Parallax movement is very simple. Objects further away from the observer move slower.

 

Lerp your way to glory. While not a scrolling example, it shows how to use a simple multiplier value to set the speed i.e. duration for objects.

 

 

 

[DD77]

See the Pen XBMEqV by davide77 (@davide77) on CodePen

 

 

 

@OSUblake thanks, for your help. I've done something like this.  Any thought? multiplier aren't really my best friends..
 

[OSUblake]

28 minutes ago, DD77 said:

multiplier aren't really my best friends..

 

Oh, but they are. If you know what a percentage is, you're golden.

 

What's 100% of 5?

5

 

What's 50% of 5?

2.5

 

What's 10% of 5?

0.5

 

That's a multiplier, and that's all I'm doing in with the durations in that thread, but I don't do ScrollMagic, so I can't give advice on how to convert it over.

 

However, @PointC has a demo that might be useful.

 

See the Pen zaBYoW by PointC (@PointC) on CodePen

 

 

[DD77]

@OSUblake thanks, that's brilliant. I'm fine with one child/item.  I'd like to have this 
tl.to(child, 1, { y: -180, ease: Linear.easeNone }); on multiple polygons, with different y value. possibly:-) 

[DD77]

@OSUblake @PointC hi, I've made this demo, I was wondering if you could help me to make them moving individually rather than altogether. I want to have the parallax feeling on all polygons. Could you help please? 
 

See the Pen XBMEqV by davide77 (@davide77) on CodePen

 

[PointC]

How about this?

 

See the Pen bjrJKV by PointC (@PointC) on CodePen

 

Is that what you needed?

 

Happy tweening.

 

[DD77]

@PointC that's almost it. I made an adjustment on the random size of the polygons. What do you think?

Brilliant. Thank you.

 

See the Pen pZrmEp by davide77 (@davide77) on CodePen

 

that

[PointC]

Looks good. Use your new parallax powers responsibly. 

 

Happy tweening.