Share Posted April 24, 2018 Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks. See the Pen erZvpG by cbg (@cbg) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 24, 2018 You can do that by using multiple scenes for different sections. But it can get complex with too many unexpected behaviors. I will say avoid using from tweens unless you know how the immediateRender works, check the following video. You can use to tween instead to avoid complexities. For example the following demo works without any issues, See the Pen vjGxMN?editors=0010 by Sahil89 (@Sahil89) on CodePen Then following demo with from tweens shows some unexpected behavior, it will make sense once you watch the video. See the Pen ELKmYJ?editors=0010 by Sahil89 (@Sahil89) on CodePen 4 Link to comment Share on other sites More sharing options...
Author Share Posted April 24, 2018 Hi Sahil, just wanted to say thanks. This really helped me out! 2 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