Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DD77

GSAP parallax Random Polygons

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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.

 

 

 

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

  • Like 6
Link to comment
Share on other sites

@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:-) 

Link to comment
Share on other sites

@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

 

Link to comment
Share on other sites

How about this?

 

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

 

Is that what you needed?

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

Looks good. Use your new parallax powers responsibly. ;)

 

Happy tweening.

:)

 

  • Haha 1
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.
×