Jump to content
Search Community

ScrollToPlugin | GSAP | ScrollTrigger

enkicoma test
Moderator Tag

Recommended Posts

Hi guys,

my first post here ^_^, 

I tried to animate on `x` axes and it works ok but I want to make this animation better. I am quite lost because to achieve such thing I need many marker "start&end". 
https://codesandbox.io/s/nextjs-global-css-migration-forked-6psms?file=/pages/index.js:138-200

I know that my markers are messed up but I want to achieve 2 things:
1. At the moment my animation works only 1 way "when scrolling from top to bottom" - I want the animation to happen in both ways... 
how is possible to tell "end" to become "start"?
2. `left-col`, `middle-col`, `right-col` are under 1 `section` and when the animation `start` hits the `section` the third/last `right-col` could finish till it gets there. - I would prefer the animation to `start` when the view port hits `right-col` not `section`
(`snap: 1 / 2,`) works but sometime is quite slow and animation and `snap` is not in sync.  looks like something is missing.

I don't think my GSAP code is clean, feel free to delete/simplify things if required ^_^

Any guidance/support will be much appreciated!

See the Pen index.js:138-200 by s (@s) on CodePen

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