Jump to content
Search Community

Scrolltrigger inside div and transformOrigin animation not working

PixeledCode test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I am trying to create something like this What a Tiny Masterpiece Reveals About Power and Beauty - The New York Times (nytimes.com) I think it's possible with scrolltrigger but I am facing few issues. Scrolltrigger is not really working for me, since it's inside another div. I think I am using it wrong.

Also transformOrigin works after scaling and animation does not work, even though it's applied in css.

 

Any help is appreciated, Thank You

See the Pen qBRJbvV by PixeledCode (@PixeledCode) on CodePen

Link to comment
Share on other sites

That's totally doable with GSAP/ScrollTrigger. I don't really have time to build it for you, but here are some tips:

  • Avoid CSS transitions. Use GSAP. You'll typically get much cleaner results.
  • The content on the left should just scroll normally in the flow of the page - the right side element should be pinned using ScrollTrigger. The "scroller" would be the default (the body/viewport). No need to set it. 
  • When you set the transformOrigin with GSAP, it applies it immediately (doesn't animate it) because that's almost always what people want. I wouldn't recommend trying to animate that either (it is possible with GSAP) - it'd just animate the x, y, and scale. 
  • Don't overcomplicate things by trying to set everything up at once with scroll-based triggers. Just focus on the right side zooming/panning first. Think of it in terms of a timeline. Like...literally, build it as a timeline. Once you have it working smoothly as a pure animation, THEN start figuring out how to wire it up to the scroll position. 

I hope that helps get you going in the right direction. 

 

Happy tweening!

  • Thanks 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...