_youri Posted October 15, 2020 Share Posted October 15, 2020 Hi ! I don't understand why my code works ? I thought my right div should be pushed to the center with a positive value instead of x: -1200, like with css positioning ? Also, is it possible to make this stuff responsive ? Always have those 2 divs centered, side by side, in the middle of my page ? thank you for your help. <!DOCTYPE html> <html> <head> <style type="text/css"> body { height:3000px; } .boxleft { background:url("404.svg"); width:400px; height:400px; position:absolute; top:1500px; left:-400px; } .boxright{ width:400px; height:400px; position:absolute; top:1500px; right:-400px; } </style> </head> <body> <div class="boxleft"></div> <div class="boxright">Stack Overflow est un site web proposant des questions et réponses sur un large choix de thèmes concernant la programmation informatique. </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js'></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.to(".boxleft", { scrollTrigger: { trigger: ".boxleft", start: "top center", end: "center 400px", scrub: 1, markers: "true", toggleActions: "restart pause reverse none" }, x: 800, duration:3 }); gsap.to(".boxright", { scrollTrigger: { trigger: ".boxright", start: "top center", end: "center 400px", scrub: 1, markers: "true", toggleActions: "restart pause reverse none" }, x: -1200, duration:3 }); </script> </body> </html> Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 Hey _youri. This is mostly a CSS question. I highly recommend that you not use absolute positioning if you want to center two things in your viewport, especially if you have other elements on the page. There are multiple other ways of centering things with CSS. I recommend creating a container element around the two elements you want to center and then centering that container. Forget about the animation until you've got things centered correctly. Once they are and that's done in a responsive way then use a .from() animation to animate your elements from a starting position other than the center. I highly recommend that you give that a try. If you run into issues you can't figure out then create a shareable demo for us using CodePen as this thread talks about. I went ahead and put the code you can into a CodePen which you can fork here. 1 Link to comment Share on other sites More sharing options...
_youri Posted October 15, 2020 Author Share Posted October 15, 2020 I've tried a Pen : See the Pen wvWMYbG by _youri (@_youri) on CodePen If this is ok, I will need to trigger it while scrolling. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 Good work! I recommend creating a timeline and adding both tweens to the timeline. Then you can add that timeline to a ScrollTrigger. For more information about all of that see these resources: The GSAP Getting Started article The timeline docs The ScrollTrigger docs How to animate efficiently Link to comment Share on other sites More sharing options...
_youri Posted October 15, 2020 Author Share Posted October 15, 2020 For the timeline I have to use addLabel, in order to trigger both animation at the same time ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 No, you can just use the position parameter. Set it to 0 1 Link to comment Share on other sites More sharing options...
_youri Posted October 15, 2020 Author Share Posted October 15, 2020 Well, for animating 2 lines, with both divs on scrolling, I've created a new Pen but it seems very clumsy !!! It looks catastrophic See the Pen ExyPJVx by _youri (@_youri) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 It's doing what you're telling it to do Sorry, I can't read your mind so I don't know what your goal is. 1 Link to comment Share on other sites More sharing options...
_youri Posted October 15, 2020 Author Share Posted October 15, 2020 Ok I explain myself, each time I scroll I want to see the image and the text corresponding (same line) displayed at the same time. The more I scroll, and the more I see image+text gathered in the center of the screen. I hope you see what I've got in mind ? And between each group (image+text) they might be an .empty div of 400px height to separate each line. Here .boxleft2 translate after .boxright2 .. Am I clear ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 16, 2020 Share Posted October 16, 2020 Yes, that makes sense. To do that it's probably easiest to create a container around each section that you want to animate in. Then loop through each of those containers and set up an animation and ScrollTrigger for each. I talk more extensively about how to do that sort of thing in my article about animating efficiently that I linked to earlier. I'd probably set it up this way: See the Pen PozNYXo?editors=0100 by GreenSock (@GreenSock) on CodePen I changed your HTML, CSS, and JavaScript a good bit so I highly recommend that you go through it piece by piece to learn and understand what each part is doing 3 Link to comment Share on other sites More sharing options...
Yannis Yannakopoulos Posted October 16, 2020 Share Posted October 16, 2020 Just an addition to what Zach suggested , for this part of your question: 9 hours ago, _youri said: The more I scroll, and the more I see image+text gathered in the center of the screen. If i understand correctly, you want to link the progress of the animation to your scroll? If so, you can just use scrub: See the Pen xxOVVaW?editors=1010 by neundex (@neundex) on CodePen 3 Link to comment Share on other sites More sharing options...
_youri Posted October 17, 2020 Author Share Posted October 17, 2020 Yes Zach, I will read your code step by step. I'm not very familiar with Loop, but I'll try to figure it out. I made a new animation ! See the Pen XWKdGMq by _youri (@_youri) on CodePen 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