Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thedarkstrix

Need help on a animation effect

Recommended Posts

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

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

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  

 

image.png.3311384052591e2ab5653999ea52d8d8.png

 

to this :

image.png.3d95a40ef50b185d9d3e98b9258622cf.png

Link to post
Share on other sites

 

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

 

 

  • Like 4
Link to post
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.

×