Need help on a animation effect

[thedarkstrix]

Hi guys,

 

I am very new to gsap and trying to achieve the effect that's linked below.

https://dribbble.com/shots/12225235-DSX-About-Page

 

The effect I am trying to make is animation that comes up after "OUR MISSION" section (the sticky div/section part).

 

I really have no idea on where to start. 

Any help and suggestion on how to achieve that effect is very much appreciated. 

 

 

 

[ZachSaucier]

Hey thedarkstrix and welcome to the GreenSock forums. I'm still not clear on which part of that shot you're trying to recreate. Is is the text effect? Is it the pinning of the text? Is it something else? Please be a bit more descriptive as to what you're trying to create  

[thedarkstrix]

Hello,

 

Thank you for your response .

 

I am trying to recreate this text effect, the way it animates on scroll, but if we notice "Our mission" section the div actually doesn't change , while the text inside the div is animated.

 

To be more clear the text animation from this :  

 

 

to this :

[akapowl]

 

Hey @thedarkstrix

 

@Carl's answer in this recent thread shows basics of how to get to achieving an effect like this for the text.

 

You could use the Split-Text plugin (and split by lines)

But be aware that this is a Club Greensock plugin for Shockingly Green Members and above.

 

 

 

If you have a specific setup, you could also just wrap those specific lines of text in a wrapper that has overflow: hidden, and animate them inside of that wrapper - just to say, that SplitText is not a must on this, but it sure is nice to have and makes a lot of nice effects easy to accomplish.

 

As for the scrolling part: you could use ScrollTrigger for that.

 

You'd probably just want to pin the section while you animate that split-text.

(Not neccessary if you just want the animation to run, but sure nicer if you want to use a scrub)

 

And here is a basic quick and dirty demo that you can have a look at, using the technique suggested by @PointC in this thread

 

 

 

See the Pen 9d0c8fb16fb07a1b6819b012a2966541 by akapowl (@akapowl) on CodePen