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

[puneetsakhuja]

I want to create animation with scroll like that example (http://hki.paris/about/). Can you please explain what
java script file i have to include.  

Thank you.

[ZachSaucier]

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?

[puneetsakhuja]

Hi, ZachSaucier

Thank you for reply.

I want to create animation scroll with rotating content currently i have created on this url http://blivetest.com/development/puneet/version15/clients.html

but there is issue. This is not like that previous example.

I have send admin details on your email.

[ZachSaucier]

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.

 

 

[mikel]

Hi @puneetsakhuja,

 

Welcome to the GreenSock Forum.

 

Here is a playful playground ...
 

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

 

Happy tweening ...

Mikel

 

[puneetsakhuja]

Hi,

I have created demo on Code Pen can you please check what i have done wrong.

Thank you.

See the Pen eqYVpQ by anon (@anon) on CodePen

[mikel]

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

Mikel

 

 

[puneetsakhuja]

Hi mikel,

Thank you for help.

I want to animation same like on  (http://hki.paris/about/) this example.

 

[puneetsakhuja]

Hi,

we have created this animation on scroll but we have problem with smooth page scroll with animate line text and also can we rotate this line like on http://hki.paris/about

this url page scroll.

Please check what i done wrong.

See the Pen WVQQqm by anon (@anon) on CodePen

Thank you.

[mikel]

Hi @puneetsakhuja,

 

As I mentioned, you need For the 'braked scroll effect'

the objects #scroll / #scrollDistance and its css

plus the js code ...

 

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

 

Happy tweening ...

Mikel

 

 

[puneetsakhuja]

Hi mikel,

Thanks for your help,

But there is fix height included in "#scrollDistance", we want responsive height according to scrollbar height. Here after content is finished there is still scrolling.

[mikel]

Hi @puneetsakhuja,

 

Life is hard, you can not get everything.
Unless one works consistently on an individual solution.

 

Try it and happy tweening ...

Mikel

[puneetsakhuja]

Thanks?

[ZachSaucier]

Couldn't you use mikel's approach but use innerHeight (or something similar) to set the height height based on the content? You could even update it on resize if needed.

[mikel]

1 hour ago, puneetsakhuja said:

we want responsive height according to scrollbar height

 

Hmmm ... ???

 

Try:

 

// in CSS

#fullpage{
  height:100vh;
}
.container{
  background-color:grey;
}

// or ...

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

 

Best regards

Mikel