Share Posted January 2 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. Link to post Share on other sites
Share Posted January 2 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 Link to post Share on other sites
Author Share Posted January 3 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 : Link to post Share on other sites
Share Posted January 3 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 ExgEENL by akapowl (@akapowl) on CodePen 4 Link to post Share on other sites
