Jump to content
Search Community

How to create same animation effect that is on this example hki.paris.

puneetsakhuja 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

Hey Puneet,


I replied to your email, but it's worth answering here as well. We don't have access to all of the code for showcase websites but we'd be happy to help if you're having trouble recreating a specific part of the webpage that you linked.


Is there a particular aspect that you're trying to recreate? What issues have you faced in attempting to recreate it?

  • Like 1
Link to comment
Share on other sites

I think that you might like working with another tool called ScrollMagic in addition to GSAP to rotate text on scroll. @PointC recently wrote this very helpful article on how to get started with GSAP + ScrollMagic. You might be most interested in demo 3 but you can modify the demo to rotate on scroll instead of just move and change size.


If you run into any issues, you can create a minimal demo of the issue on CodePen and we can help you out. See the below post for more information on how to do that.



  • Like 2
Link to comment
Share on other sites

Hi @puneetsakhuja,


Hmm - I'm not sure what you want to achieve.


Small hints:
Please make sure GSP is loaded before ScrollMagic.
Set the first object to be animated below the triggerHook.
For the 'braked scroll effect' you need the objects #scroll / #scrollDistance
and and ...


About like that


See the Pen rXNdye by mikeK (@mikeK) on CodePen


Happy tweening ...




  • Like 3
Link to comment
Share on other sites

1 hour ago, puneetsakhuja said:

we want responsive height according to scrollbar height


Hmmm ... ???




// in CSS


// or ...

var action = new TimelineMax({paused:true})
.to('.container',1,{y:-wrapperHeight + 500, ease: Sine.easeInOut})


Best regards




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