jbanj Posted April 3, 2022 Share Posted April 3, 2022 Hi, I have not been able to find an example to what I am trying to achieve but hopefully I can explain it well. I am trying to animate two images in separate divs to meet at the center of the main div (not overlap) on scroll. One image comes from top, the other comes from the bottom of the screen. Thanks. Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2022 Share Posted April 3, 2022 Hey there @jbanj, This sounds like a job for ScrollTrigger - have you taken a look at the ScrollTrigger docs? Maybe you can give it a go - if you get stuck we're right here! Pop what you've tried into a minimal demo and we'll take a look. Link to comment Share on other sites More sharing options...
jbanj Posted April 3, 2022 Author Share Posted April 3, 2022 Thanks @Cassie I know scrolltrigger should be able to do it, but I need a few pointers. Or a working technique. Thanks. Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2022 Share Posted April 3, 2022 I'm afraid we don't have capacity to just build custom solutions for people here. (see the forum guidelines) However we're more than happy to help if you've attempted it and got stuck. There are lots of examples in the docs! Here's a little starting point. let tl = gsap.timeline({ scrollTrigger: { trigger: containerElement, } }) tl.from(image1,{yPercent: -100}) tl.from(image2,{yPercent: 100}, 0) 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2022 Share Posted April 3, 2022 Here's a collection of demos too. Sometimes it's easier to learn by deconstructing examples. Good luck! Pop back with a minimal demo if you get stuck. 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