Horizontal Scrolling - After Animations

[Paddyaa5]

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

[akapowl]

 

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

 

[Paddyaa5]

Huge help and not too complicated! Was trying something similar but not quite getting it.

 

Thanks Paul 👍