Jump to content
Search Community

ScrollTrigger - Pinning a transformed element

Pieter Biesemans test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

So I have a banner with some content in a container, and text outside the container.

The text has been rotated to read from bottom to top instead of from left to right. It contains two titles, aligned to the right.

 

Now I want to pin the large title, while the smaller title can scroll out of view together with the rest of the banner.

Reduced test case in the Codepen:

  • If I only pin the large title, it pins the large title relative to the left. Because of the rotation. This makes sense. But I can't seem to figure out a solution for this.
  • If I pin the transformed element, it gets pinned correctly. I can then animate out the small title, which gives the impression it just scrolls with the rest.

 

What I tried:

  • Adding wrappers at different places. But that doesn't seem to help.
  • Transforming both titles separately. But then it becomes a real pain getting the text to line out to the right, positioning the smaller correctly, etc. Not fun.
  • Tried setting pinReparent and pinType to different settings on different elements, but that just resulted in weirder and weirder behaviour.

 

Sooooo, am I missing something obvious and is there an easy solution? Or do I just use the workaround and go on with my day?

 

 

See the Pen PoQKyzr by pieter-biesemans (@pieter-biesemans) on CodePen

Edited by Pieter Biesemans
formatting
  • Like 1
Link to comment
Share on other sites

Yeah, pinning rotated elements isn't supported, but you could wrap it in another (non-rotated) container element and pin that instead. But as you said, you'd have to do that separately for the "should be pinned" line and the "can scroll away" one. You could get fancy with MotionPathPlugin.convertCoordinates() to handle some of the calculations dynamically, but it may be simpler to just build it via CSS initially. 

 

Good luck!

  • Like 1
Link to comment
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.
×
×
  • Create New...