Paddyaa5 Posted January 18, 2021 Share Posted January 18, 2021 Hi all.. I'm just trying to re-create some awwwards.com websites with horizontal scroll using gsap and using the codepen attached as a base. My question is, how then do I initiate further gsap animations inside each section? For example, if i wanted to add a simple gsap.from(..{opacity: 0}) on the text in Part Three, how do I get the scrollTrigger working now that its on horizontal scrolling? Sorry if this has been asked before, but I cant seem to find any forum answers around this and really struggling to work it out myself. See the Pen GRZORvX by olig (@olig) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 18, 2021 Solution Share Posted January 18, 2021 Hey @Paddyaa5 - welcome to the forums. I wrote up quite a lenghty and detailed explanation on the trickiness of this in this thread here You could apply a similar concept for the 'offset' to your pen. Luckily enough, applied to your base-example it looks much cleaner than in the examples of the thread I linked to. See the Pen cc86810dacb287478f4cace69ac7dc8d by akapowl (@akapowl) on CodePen Hope this helps. Cheers, Paul 3 Link to comment Share on other sites More sharing options...
Paddyaa5 Posted January 18, 2021 Author Share Posted January 18, 2021 Huge help and not too complicated! Was trying something similar but not quite getting it. Thanks Paul 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now