Jump to content
Search Community

Trying to create a similar animation

PWSey test
Moderator Tag

Recommended Posts

I was trying to create something similar to: https://www.theclimatepledge.com/us/en/progress

Which I believe does use GSAP and Scrolltrigger as I was inspecting their scripts, I initially thought it was also using with threejs since elements seem to be coming towards the camera and disappearing.

Since I am kind of new to GSAP and threejs, I was not be able to make something similar with Next.js and wanted to know if I were correct on using threejs. Would love any advice on how to create something similar or if there are any examples with GSAP and threejs.

Link to comment
Share on other sites

Hi,

 

You mean the timeline scrolling animations?

 

I don't think you need THREEJS for that, just scale up and down elements as well as their opacities.

 

I'd recommend you to create the HTML and CSS first so everything has the starting point you need/want for your site and animations. Then create the animations and see that they work as expected. Finally when the animations are behaving exactly the way you intend, only then you add ScrollTrigger to the mix. We've seen a lot of folks around here trying to create everything in one step and getting very confused in the process. These steps that I mention are the ones that I follow when I create examples and animations and many of our moderators follow them as well, because it seems a bit redundant but in the end it saves you a lot of time and headaches.

 

If you have any GSAP related questions along the process, we're more than happy to help you with those, we just don't have the time resources to build custom solutions for our users. You can contact us for paid consulting services or post in the Jobs & Freelance forums as well.

 

Finally always remember to include a minimal demo that clearly illustrates the issue you're having.

 

Good luck with your project! 👍

Happy Tweening!

  • Like 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.
×
×
  • Create New...