Ryosuke Posted October 2, 2020 Share Posted October 2, 2020 <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style> body, html { margin: 0; padding: 0; } ul { list-style: none; } #wrapper { z-index: 1000; overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: fixed; height: 100%; width: 100%; } .box { position: fixed; display: flex; justify-content: center; width: 100%; } </style> </head> <body> <div id="wrapper"> <div class="box"> <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);"> <ul> <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li> <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li> <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li> </ul> </div> <div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);"> <ul> <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li> <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li> <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li> <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li> </ul> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script> $(function () { const loop = document.getElementById('loop_js'); const loopAnim = new TimelineMax({ repeat: -1 }); let loopItem = (window.innerWidth, loop.children[0]); loop.appendChild(loopItem.cloneNode(true)); loop.appendChild(loopItem.cloneNode(true)); loop.appendChild(loopItem.cloneNode(true)); loopAnim .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 }) .to(loop, 0, { ease: Power0.easeNone, y: 0 }); var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(e){ e.preventDefault(); var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail); if (delta < 0){ loopAnim.time(loopAnim.time()+1); } else { loopAnim.time(loopAnim.time()-1); } }); }); $(function () { const loop = document.getElementById('loop_js2'); const loopAnim = new TimelineMax({ repeat: -1 }); let loopItem = (window.innerWidth, loop.children[0]); loop.appendChild(loopItem.cloneNode(true)); loop.appendChild(loopItem.cloneNode(true)); loop.appendChild(loopItem.cloneNode(true)); loopAnim .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 }) .to(loop, 0, { ease: Power0.easeNone, y: 0 }); var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(e){ e.preventDefault(); var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail); if (delta < 0){ loopAnim.time(loopAnim.time()+1); } else { loopAnim.time(loopAnim.time()-1); } }); }); </script> </body> </html> i make vertical infinite loop slider. On the left side, i made it but i want to make slider that phote is coming up from below like right side. And then on the left side, it's infinite but on the right side the infinite loop stop on the way. so i want to make vertical infinite loop slider from below like left slider's loop. please help me See the Pen qBZeZZa by ryosuke888 (@ryosuke888) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 2, 2020 Share Posted October 2, 2020 Hey kjvd and welcome to the GreenSock forums. Sorry but I do not understand what you're asking. Please make a minimal demo of the issue using CodePen if you'd like our help debugging: Additionally I see that you are using the old syntax for GSAP. We highly recommend using the improved GSAP 3 syntax which also allows you to use new features. See this post for info about upgrading: Link to comment Share on other sites More sharing options...
Ryosuke Posted October 3, 2020 Author Share Posted October 3, 2020 Sorry for the incomprehensible. I am creating a slider that comes up from the bottom of the screen like the slider on the right, but as you can see when scrolling, the slider breaks in the middle. I want to create an infinite loop stider like the slider on the left, what should I do? Do you have any ideas? Link to comment Share on other sites More sharing options...
mikel Posted October 3, 2020 Share Posted October 3, 2020 Hey @Ryosuke, Take a look at the GSAP modifiers plugin and the new GSAP 3.0 See the Pen oNXoOBq by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 3, 2020 Share Posted October 3, 2020 Check out this thread and apply the technique to your situation: 2 Link to comment Share on other sites More sharing options...
Ryosuke Posted October 4, 2020 Author Share Posted October 4, 2020 Hey @mikel Thanks your help i have a question. i create a slider like you and then i am creating a slider that comes from the left of the screen like this Codepen . But when the slide finishes once, the slide strats from the left of the screen again. Is it possible to cotinue the sliders? See the Pen NWNQMWd by ryosuke888 (@ryosuke888) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted October 4, 2020 Share Posted October 4, 2020 2 hours ago, Ryosuke said: Is it possible to cotinue the sliders? Sure, that is the job of the GSAP modifiers. But you commented it out (??? line 22 ff). Happy weekend ... Mikel Link to comment Share on other sites More sharing options...
Ryosuke Posted October 4, 2020 Author Share Posted October 4, 2020 Hey @mikel When commenting in, the slider loops halfway through the screen So i want to create a slider that starts from the left edge of the screen Do you have any ideas? See the Pen YzqmjYd by ryosuke888 (@ryosuke888) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted October 4, 2020 Share Posted October 4, 2020 Hey @Ryosuke, Increase the width of the boxes or add more boxes See the Pen 779c22fe2ea38589f02d7eb1d3220d48 by mikeK (@mikeK) on CodePen Happy testing ... Mikel 2 Link to comment Share on other sites More sharing options...
Ryosuke Posted October 5, 2020 Author Share Posted October 5, 2020 Hey @mikel I want to start from left end like this codepen See the Pen YzqmjYd by ryosuke888 (@ryosuke888) on CodePen if I add more boxes and start from left end, once the slide is over, it will start again from the left end. So i want to create a slide that connects forever Link to comment Share on other sites More sharing options...
mikel Posted October 5, 2020 Share Posted October 5, 2020 Hey @Ryosuke, You could fade in the individual boxes piece by piece. Then it runs in from the left. This is a kind of helper construction. There may be better solutions. See the Pen af864b2472e234469cd4fb65b71bc7e3?editors=1010 by mikeK (@mikeK) on CodePen 1 Link to comment Share on other sites More sharing options...
Ryosuke Posted October 5, 2020 Author Share Posted October 5, 2020 Hey @mikel Thanks for your help. I couldn't come up with this great ideas and I got it. But It takes a little time to display and I want solve it. Do you have any ideas? Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 5, 2020 Share Posted October 5, 2020 Hey Ryosuke. When making new versions of your demo please use the "fork" button on CodePen so that the old versions are retained for context in these forums. As for your issue, I am not understanding what you're wanting. What's wrong with mikel's demos above? What specific question do you have? 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