Jump to content
Search Community

Search the Community

Showing results for tags 'carousel'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi all, I have created this carousel, How can I adjust the spacing so the each item is spaced equally? https://codepen.io/ginthozan-v/pen/BaXwpjd
  2. Infinite carousel of images with autoplay and with previous and next buttons but still infinite, please.
  3. Hello everyone. I want the card with the active class to be centered on top initially. And it is also unclear why draggable does not work properly. It is necessary, if we did not move the circle to the next card, then return it back to the active one, and if we moved the circle a little further and stopped, then move it to the next card and make it active. The wrapper block must not drop the rotate value below 0. I really need your help, I've been working on this task for a very long time
  4. Hi everyone ! I'm new to GSAP and I'm currently working on an animation for my website. I have a website with multiple section but in one of them I want to pin the scroll to the section and make images falling from the top and unpin until all images has been displayed. Here is a little schema to understand the idea, I tried a lot of things using ScrollTrigger but even using the pin parameter I can't get this type of effect.
  5. Hello, I need a banner like in the following example: https://www.moxionpower.com/industries/ It should work without jQuery and should use only the Gsap library.
  6. I'm using this slider from an other gsap question, however I would like to add buttons to go to next and prev slide. However I'm not totally aware in how can add this functionality. I've been looking on "startDrag()" method but didn't get it. Can someone help me with that?
  7. Hi. I was trying to reverse engineer this demo using the Modifiers plugin: https://codepen.io/GreenSock/pen/QEdpLe I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.
  8. Hi community, https://htxrgj.csb.app/ I want to animate my animation using scroll within 1/4 or circle, or in arc shape, please checkout for code given on codesandbox. The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth. I hope you got my point..! Thanks in advance..!
  9. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
  10. I need to create this Slider with GSAP free. please help me
  11. Hi, I'm making a carousel grid that is draggable in both directions and items repeat seamlessly to create a loop. I found an example here of infinite scroll on x-axis, as well as on y, I wonder how to combine them (a similar grid is implemented here https://skylinefilms.tv/). Thanks!
  12. Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the transition controlled by the dragging. Any helpful ideas? Thanks https://codepen.io/gooogooo/pen/oNjzpor
  13. Hello everyone! I'm trying to connect a circle shaped blue svg (but shown as a semicircle for design needs) with 4 control dots to a carousel made with the Swiper.js library, so that this semicircle (in HTML it is under the ROUNDED SLIDER comment), can act as a "controller" draggable to the carousel. What I need to do is: - The circle is only half visible and each point must be connected to a slide of the carousel, so that by dragging it, the swiper "responds" showing the slide connected to the dot of the blue semicircle positioned at the top of the semicircle. - The slides could be more than 4 (I have been having nightmares for weeks ...). - Each point will therefore correspond to a slide. - When I'm on the first slide I shouldn't be able to rotate the semicircle clockwise and when I'm on the last slide I shouldn't be able to rotate clockwise. - It shouldn't be possible to rotate the semicircle more than 90 degrees at a time. - If I rotate the semicircle by less than 90 degrees the movement should complete itself (the blue dot is “magnetically” moved down) to get to the next slide (insomnia and migraine associated with this point, with obvious anxiety attacks ...) What I have thought and done so far is: 1. I’ve created the carousel and make its Init (the css is really basic and only manage position of elements in the page). 1.1 when the slide changes I’ve managed to "take" the year and the title using the data attribute, but I’m not able to create the logic to assign to each semicircle dot the correct title/year. // ANCHOR Slider INIT let swiperHistory = new Swiper(".j_init_history_slider", { slidesPerView: 1, spaceBetween: 60, centeredSlides: true, loop: true, grabCursor: true, //OR mousewheel mousewheel: false, autoplay: false, autoplayspeed: 6000, autoplay: { delay: 5000, disableOnInteraction: true }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, on: { //slideChange OR realIndexChange slideChange: function () { // ANCHOR get current slide index and text for yeas and title let index = this.realIndex + 1; // slide 1 => slides[1] // ANCHOR get the slide years let years = this.slides[index].children[0].dataset.years; // ANCHOR get the slide title let title = this.slides[index].children[1].dataset.title; // ANCHOR give to each svg circle points the correct year an title // Maybe I must create an array and then loop titles and years...or assign it manually to each points or what?? northYear.textContent = years; northTitle.textContent = title; } } }); 2. I’ve identified the 4 points (calling them temporarily, for easier recognition, with the capital points north, south, east and west, they must contain the data "title" and "year" of the swiper's slides). //ANCHOR Text (years) over the circle points let northYear = document.getElementById("north_year"); let eastYear = document.getElementById("east_year"); let southYear = document.getElementById("south_year"); let westYear = document.getElementById("west_year"); //ANCHOR Text (title) over the circle points let northTitle = document.getElementById("north_title"); let eastTitle = document.getElementById("east_title"); let southTitle = document.getElementById("south_title"); let westTitle = document.getElementById("west_title"); 3. using the gsap draggable I’ve created some control variables for the rotation for the 90 degrees of the semicircle svg dots //ANCHOR Variables for circle animation let relativeDegree = 0; let checkDegree = 0; let check90 = 0; let globalrotation = 0; 4. I’ve created two temporary control buttons for the rotation of the 4 cardinal dots of the semicircle and the dots rotate correctly (but there is something strange with the titles that seem to change or rotate in an uncoordinated way ... I cannot understand which is the problem), but these buttons are not necessary for the final project, they will be removed. 5. the semicircle works on drag (even if the first click on the dot seems to be blocked), but when you drag the semicircle, the dots are slipped out from time to time (and it seems to me more each time) from their own "central meridian" and I don't understand what I'm doing wrong 8. onRelease I wanted to make sure that if I rotate the semicircle by less than 90 degrees the movement should complete itself to get to the next slide, but it doesn't work, it behaves really weird, there is definitely something I'm doing wrong with its logic (in fact the code is currently commented). 9. TODO ... connect the swiper to the drag ... for this point I was completely confused and I can't go on (in the code there are some attempts that don't work, also because I have been using gsap for a short time and I don't I feel very experienced), because I miss the fundamental part where I connect the slides to the semicircle, where I take the titles from the swiper and assign them to the right dot, and I can't "adjust" the drag of the semicircle correctly. I have been stuck for weeks, for me it is a really complex job, I was very doubtful about asking for help, but at this point, apologizing if this post is incorrect, wrong or not relevant with the forum (in case I remove it immediately!), I really need help. I immediately thank anyone who can and wants to intervene in any way. Thank you...!
  14. Hello all! It's been a while! I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of ? I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part). The difficulty comes when I have an interactive component above the carousel, like an accordion. When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap. I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck. Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet? Steps to replicate in codepen: 1. Click on any item in the carousel 2. Scroll to bottom of page. The carousel works fine, providing no accordion items are open. Any help is appreciated, thanks!
  15. Uzair Ahmed

    Divi Carousel

    Hi GreenSock community I want to know that can we acheive Divi carousel https://plugins.divigear.net/divi-carousel/ the Material Carousel example Please help me.
  16. Hello! First of all, thank you for everything related to Gsap, you guys are great. Second, I came with a little problem, I created a carousel using gsap and the progress is controlled with draggable. The thing is that it works great in a project I created using Vue.js but when I built it using only javascript it does not work properly. The actual problem is that it does not snap as the one created with Vue. This is the codepen, I commented out liveSnap, so you can see how it works but if you uncommented liveSnap you will see the problem. https://codepen.io/maxrpark/pen/ZEvmEJp I am also sharing a gif of the one I made with Vue, to show how is supposed to work. Many thanks in advance Max.
  17. Hello! I'm new to gsap and I'm trying to implement this animation in my project. Is there any simpler way to do this? What I'm thinking is to make a function which makes current screen to negative transformX and reveal the image viewer under it. I'm finding it hard to implement those colored bars which follow the transition from right to left. Here's the video: https://we.tl/t-pjHc3wYqcU
  18. Hi, I want to create a carousel slider (200x100) that will animate on scroll. I am not an expert and still trying to figure out GSAP. I want to pin the section which will contain the carousel as the user scrolls down. Thanks in advance :D
  19. For real this time. I have codepen above showing an animation and currently the autoplay(carousel) is disabled, what I am trying to get to happen is once the animation plays it rotates to a new slide and replays the animation. I just need it to replay since all that will change per slide is the background image, front square image and text(swatch). So simply just need it all to repeat and to start over once finishes. Any help/insight? Thanks! EDIT: I am trying to get the js as repeatable as possible since the user can have between two and four slides and I will not know how many they add so I just need a repeated animation between slides however many they add and just to restart until the user leaves this screen.
  20. Apologies for starting yet another "carousel" related topic, but I was hoping some of the brilliant minds here could help me out. Is there a way to use GSAP to create an infinite looping "carousel" style animation that doesn't repeat the first element in the list, like this embedded CodePen? Mind you: I'm not looking for fancy controls to start or stop or reverse anything, just a simple, clean way to loop a bunch of items that also makes sense in a screen reader type of environment—no repetitions of items in the source code.
  21. Hi, I would like to create a carousel. Carousel has 2 parts, if i scroll 2nd part then it should fade in/out 1st part and show its content.
  22. I've seen a lot of posts about trying to create a marquee section similar to the one on Cuberto's home page. I'm trying to recreate the marquee but the animation seems to "jump" when looping. I'm thinking my math maybe off in the modifier callback? EDIT: Inspecting the dom elements it seems the row items are overflowing the row slightly possibly because of whitespace generated from using inline-blocks.
  23. Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time
  24. I'm trying to use slickslider in collaboration with gsap for all the extra features slick has to offer. What could be best practice to hide all slide elements on non-active slides ? I tried to query them all on line 112 and adding them to the mastertimeline but this seems bad practice and deliveres undesirable results (janky, can't get it fixed with split text, gsap can't find certain items) Slick provides a 'slide-current' class with which i query the active slides and have managed to get the animation part going for just the active slide. I'm struggelig with - settings opacity 0 for all items whithin all slides untill the animation starts and the slide is active (when dragging the content of the next slide should be invisible) - furthermore with this approach in codepen i notice splittext keeps nesting upon every slide, i'm trying to style the period (color:red in styles) at the end of the title but can't get consistent behaviour and this seems like bad practice. In stead of trying to reach the last child in css, are there other methods in gsap/splittext i could use te get this result ? Any help would be appreciated
×
×
  • Create New...