Jump to content
Search Community

GSAP parallax Random Polygons

DD77 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

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

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?



What's 50% of 5?



What's 10% of 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

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