adamo Posted September 21 Share Posted September 21 Hi. I'm struggling to wrap my head around reversing the animation on leaving the sequence. The idea is to leave the trash bag on finishing the sequenced animation. I was trying to add another canvas section but the complexity grew and I do more errors which broke the first sequence. So my question is more on the approach suggestions then a coded result. I've worked with this for a while and right now the only problem I have is to pin (start) the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> from the top so both in and out animations would be almost seamless. See the Pen NWeXvMy by depcore (@depcore) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted September 21 Share Posted September 21 I'm not sure I understand your question or the issue it is rooted in. Could you elaborate? Link to comment Share on other sites More sharing options...
adamo Posted September 21 Author Share Posted September 21 Yes. After the last slide with numbers I want the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> to start at the top of the window - initially covering the previous section so the next transition seems like you're getting out ot the bag. Right now the bag-reverse section scrolls to top of the window to start the animation. Link to comment Share on other sites More sharing options...
Rodrigo Posted September 21 Share Posted September 21 Hi, This is mostly about your HTML/CSS setup. I've been playing with a similar simpler setup in order to try to get a section after the one, in order to pin it over the previous section without any luck. Maybe there is a simple way but is eluding me right now. I think the simpler way is to add an element on top of the one with the horizontal section with opacity zero and visibility hidden, then show it and animate it as part of a common timeline, like this simple example: See the Pen GRPyeQb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 22 Solution Share Posted September 22 Hi, Here is another option: See the Pen wvRpZOp by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
adamo Posted September 22 Author Share Posted September 22 Thank you @Rodrigothis got me on the right track, the're still some details, but I could show some version to the client at the deadline. 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